1. 对 Vue 的理解
Vue.js 是一个以数据驱动和组件化的思想构建的 JavaScript MVVM 库，下载 Vue.js 后可以直接在html里引用，Vue 本身并不依赖 Node 运行。
比如如下的代码就可以直接在浏览器中查看
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue Test</title> <script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="app"> <p>{{ message }}</p> </div> <script> new Vue({ el: '#app', data: { message: 'Hello Vue.js!' } }) </script> </body> </html>
但是随着业务开发过程中所需的库或框架越来越多，在页面中直接引用会对库的管理和版本控制等造成极大的不便。所以一般会借助 NodeJS中的 npm 工具来管理依赖包。
包括后面再使用 vue-cli 脚手架搭建项目的时候需要NodeJS，目前使用NodeJS最多的场景基本上都是作为前端工程化构建工具。
2. 开发环境搭建
2.1 安装 Node.js
首先需要安装 Node.js（Javascript运行环境），因为 Vue 依赖于 NodeJS 的 npm 的工具来管理依赖包。npm 是随同 NodeJS 一起安装的包管理工具， 可以理解为 JAVA 中的 Maven。
安装成功后，可以通过命令检测安装的版本信息。
命令：
node -v //监测 Node 的版本
npm -v //检测 npm 的版本
2.2 安装淘宝镜像
npm 包管理工具在下载外部依赖包时候速度太慢，一般通过淘宝镜像来下载，后续可以用 cnpm 命令管理工具代替默认的 npm 管理工具
命令： npm install -g cnpm --registry=https://registry.npm.taobao.org
2.3 全局安装 Vue 的脚手架工具 Vue-cli
vue-cli本身也是依赖包，用于自动生成vue项目模板，也就是说我们可用用vue-cli来生成一个基本的项目，里面包含了一些基本目录结构、配置文件、入口函数等等。就类似于我们用VS创建一个WinForm、Asp.Net MVC 等项目，Eclipse创建一个Maven项目一样。
命令： cnpm install --global vue-cli
安装成功后可以通过命令 "vue" 来查看脚手架相关信息。
3. 创建项目
脚手架安装成功后就可以通过它来创建一个新的项目了。
3.1 创建一个基于 webpack 模板的新项目
在项目存储目录中，按住 shift + 右键，然后选择在此处打开命令窗口，输入以下命令。
命令：vue init webpack 项目名
如下图所示，就是vue项目基本目录结构
3.2 安装依赖
创建成功后，因为项目运行有很多基础依赖包，所以项目开始需要安装依赖。在项目目录中，按住 shift + 右键，然后选择在此处打开命令窗口，输入以下命令。
命令：cnpm install
3.3 启动项目
在 "project-name" 文件夹中，按住 shift + 右键，然后选择在此处打开命令窗口，输入以下命令就可以启动项目了。在然后在浏览器访问 "localhost:8080"。
命令：cnpm run dev
其中 http://localhost:8080 就是我们的项目访问地址
4. npm 常用命令
新增依赖外部包 npm install <package-name> //局部安装，包文件下载到 node_modules 目录中（默认会安装最新的版本） npm install -g <package-name> //全局安装（默认会安装最新的版本） npm install <package-name>@X.Y.Z //安装特定版本（X.Y.Z为包的版本号） 查看已安装的依赖外部包 npm list <package-name> //当前目录 npm list <package-name> -g //全局 更新依赖外部包 npm update <package-name> npm update <package-name> -g 卸载依赖外部包 npm unistall <package-name> //当前目录 npm unistall -g <package-name> //全局