Vue.js教程栏目介绍学习规划和了解 Vue.js，可以一起来学习。
这篇学习笔记将记录一些我个人在学习 Vue.js 框架时所编写的程序代码与学习心得。为此，我会在ProgrammingLanguage/JavaScript目录下创建一个名为的vuejs目录，并在该目录下设置以下两个子目录：
note目录用于存放markdown格式的笔记。code目录则用于存放笔记中所记录的程序代码。这部分笔记将记录我对 Vue.js 框架的概念性了解，以及在项目中引入该框架的具体方法，并编写一个"Hello World"程序。
Vue.js 是一套用于构建用户界面的渐进式框架。该框架被设计为可以自底向上逐层应用，它的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue.js 也完全能够为复杂的单页应用提供驱动。简而言之，Vue.js 具有以下特性：
当然，由于 Vue.js 的作者本身是一个中国人，所以 Vue.js 社区的中文资料也相比其他 JavaScript 框架社区要丰富一些，这对于很多习惯中文阅读的用户来说，或许也是选择使用这一框架的原因。
和大多数 JavaScript 前端程序库和应用框架一样，在自己的项目中引入 Vue.js 框架主要有 CDN 引用和本地引用两种方式，下面分别来学习一下它们。
CDN 是内容分发网络（Content Delivery Network 或 Content Distribution Network）的缩写，这是一种利用现有的互联网络系统中最靠近目标用户的服务器，更快、更可靠地分发音乐、图片、视频、应用程序以及其他数据资料的方式，目的是提供高性能、可扩展性及低成本的网络内容传递给用户。换而言之，在使用 CDN 这种引用方式时，Vue.js 框架文件会被存储在指定的 CDN 服务网络的某个服务器节点上，由该服务来集中负责针对该框架文件的访问负载并维护该框架的版本，而我们只要在 HTML 文档的<script>标签中引用相应 CDN 服务的 URL 即可，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本，优化了文件大小和载入速度 --> <script src="https://cdn.jsdelivr.net/npm/vue"></script>
在上述示例中，我测试了使用cdn.jsdelivr.net提供的 CDN 服务来引用 Vue.js 框架，这也是 Vue.js 官方教程中推荐的服务。至于是该引用开发环境的版本，还是生产环境的版本，这就要取决于具体的使用场景了。在通常情况下，我会选择在程序开发阶段引用反馈信息相对丰富的开发环境版本，而等到程序发布之时再切换至更追求执行效率的生产环境版本。下面来了解一下使用 CDN 这种引用方式的优势：
当然了，这种引用方式归根结底都得依赖于网络环境，甚至很多时候是国外的网络环境，由于众所周知的原因，我们的网络环境经常会受到各种不可抗力的影响，所以我个人更倾向于将框架文件下载到本地来引用。
正如上面所说，如果想减少意外状况，最好的选择是将 Vue.js 的框架文件下载到本地，然后再引用它们。下载这类文件的方式有很多，现如今为了便于更新版本，人们通常会选择使用 npm 这类包管理器来下载 JavaScript 的各种程序库和应用框架。具体做法就是在之前创建的code目录下执行以下命令：
npm install vue --save # 如果需要相应的权限，可以使用 sudo 命令来提权
如果安装过程一切顺利，接下来就只需要在 HTML 文档的<script>标签中引用框架文件的路径即可，像这样：
<!-- 开发环境版本，包含了有帮助的命令行警告 --> <script src="node_modules/vue/dist/vue.js"></script> <!-- 或者 --> <!-- 生产环境版本，优化了文件大小和载入速度 --> <script src="node_modules/vue/dist/vue.min.js"></script>
在这里，选择开发环境版本还是生产环境版本的依据是一样的，就不再重复了。下面来验证一下框架文件是否被成功引入。
我将通过编写一个"Hello World"程序来验证 Vue.js 框架是否已被成功引入，具体步骤如下：
在code目录下创建一个名为01_sayHello的项目目录，并在该目录下设置以下两个子目录：
img目录：用于存放图片资源。js目录：用于存放自定义 JavaScript 脚本文件。将名为logo.png的图表文件存储到code/01_sayHello/img目录中。
在code/01_sayHello目录中创建一个名为index.htm的 HTML 文档，并在其中输入如下代码：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script defer="defer" src="../node_modules/vue/dist/vue.js"></script>
<script defer="defer" src="js/main.js"></script>
<title>你好，Vue.js</title>
</head>
<body>
<p id="app">
<h1> {{ sayHello }} </h1>
<img :src="vueLogo" style="width:200px">
</p>
</body>
</html>在code/01_sayHello/js目录中创建一个名为main.js的 JavaScript 脚本文档，并在其中输入如下代码：
// 程序名称： sayHello
// 实现目标：
// 1. 验证 Vue.js 执行环境
// 2. 体验构建 Vue.js 程序的基本步骤
const app = new Vue({
el: '#app',
data:{
sayHello: '你好，Vue.js！',
vueLogo: 'img/logo.png'
}
});接下来只需将相关的 Web 服务运行起来（该服务器可以是 Apache 或者 Nginx，也可以是 VSCode 的 Live Sever 插件），然后如果在 Web 浏览器中看到如下页面，就说明 Vue.js 框架已经被引入到了程序中，并被成功执行起来了。
更多相关免费学习推荐：js视频教程
以上是Vue.js 学习记录之一：学习规划和了解 Vue.js的详细内容。更多信息请关注PHP中文网其他相关文章！
