1.2 Vue.js的下载及使用
通过前面的介绍，我们对于什么是Vue.js及Vue的特点和优势已经有了一个初步的了解，接下来我们来学习Vue.js的使用，首先我们需要下载Vue.js。
1.2.1 Vue.js下载
下载Vue.js可以直接去官网，如图1-2所示。
图1-2 Vue下载
说明 在开发中最好使用开发版本，在控制台有错误提示信息方便调试程序。
1.2.2 Vue.js引用
已经下载了Vue.js，如何把Vue.js引入代码中呢？可以使用<script>标签引入，格式如下：
也可以使用#CDN来引入Vue.js：
这样就可以直接使用Vue.js库了。
1.2.3 npm安装
在用Vue.js构建大型应用时推荐使用npm安装，npm可以和webpack（前端资源加载/打包工具）或Browserify（使用类似于node的require()的方式来组织浏览器端的JavaScript代码，通过预编译让前端JavaScript可以直接使用node npm安装的一些库）配合使用。Vue.js也提供配套工具来开发单文件组件。由于npm安装速度慢，因此可以使用淘宝的镜像及其命令cnpm（cnpm是淘宝团队开发的一个npm国内复制品，可以使用npm的所有命令选项，不用登录国外网站即可安装npm下的任何软件）来安装Vue。
说明 如果计算机中npm命令不是内部命令，需要先安装node.js。
下面是具体安装的过程演示，首先查看node.js的版本号，再按照步骤安装。
（1）如图1-3所示，查看npm的版本号并安装Vue。
图1-3 npm版本及安装Vue
（2）如图1-4所示，安装脚手架vue-cli。vue-cli脚手架是Vue.js提供的一个官方命令行工具，用于快速搭建大型单页应用。
图1-4 安装脚手架vue-cli
（3）创建一个基于webpack模板的新项目，如图1-5所示，创建项目名称为myproject。
图1-5 webpack模板的新项目
（4）使用cd命令进入项目my-project中，并安装项目依赖项，如图1-6所示。
图1-6 安装模块
（5）使用cnpm run dev运行项目，如图1-7所示。
图1-7 运行程序
成功执行以上命令后访问http://localhost:8080/，输出结果如图1-8所示。
图1-8 Vue单页面App
打开项目所在目录my-project\src\components下的文件Hello.vue并修改msg：把“Welcome to Your Vue.js App”改为“欢迎进入斤斗云学堂”，发现什么了？界面没有刷新而数据自动更新了，是不是很神奇！后续课程我们会继续深入学习。
1.2.4 解读Vue项目文件目录结构
利用node和npm环境，我们可以很快地搭建一个Vue环境。搭建完成后，我们可以看到生成的文件夹中包括图1-9所示的文件。
图1-9 Vue项目目录结构
下面具体介绍Vue项目目录结构。
（1）build文件夹保存webpack的基本配置，config文件夹保存项目基本配置。（2）node_modules是npm加载的项目依赖的模块。
（3）src目录是我们要开发的目录，如图1-10所示。
图1-10 Vue项目src目录结构
assets：用来放置图片。
common：用来存放字体文件和通用的样式文件。
components：用来放组件文件。
App.vue：项目入口文件。
（4）static文件夹用来放置静态资源目录。
（5）index.html：首页入口文件。
（6）package.json：项目配置文件。