Vue 环境安装和创建项目

环境配置

一. 独立版本

Vue.js的独立版本就是在 Vue.js 的官方网站上直接下载 vue.min.js ，并用 script 标签引入。

二. CDN 方法

使用 CDN 方法，远程链接引入，需要连接网络。

Staticfile CDN（国内） :
https://cdn.staticfile.org/vue/2.2.2/vue.min.js
unpkg（推荐）：
https://unpkg.com/vue/dist/vue.js
cdnjs :
https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js

三. NPM 方法

NPM方法安装速度较慢，因此不推荐用于日常开发、测试，但在用 Vue.js 构建大型应用时推荐使用 NPM 安装。

Vue.js 提供了一个官方命令行工具，可用于快速搭建大型单页应用。
Vue.js 的推荐开发环境为 Nodejs。
npm:为 Nodejs 下的包管理器。

1. 安装Nodejs

打开 Nodejs 官网 https://nodejs.org/en/。
选择对应的版本下载，这里建议下载后一个的最新版本。
将安装包安装即可。

安装后进行测试检查是否安装成功，在键盘上按下 win + R 键，输入 cmd，然后回车，打开cmd窗口，输入node -v和npm -v显示当前安装的版本号，即表示安装成功。

2. 安装淘宝镜像

可以选择性的安装，由于使用 npm 的官方镜像可能会非常慢，也可能会出现很多问题，这里使用淘宝 NPM 镜像。
http://npm.taobao.org/

输入以下命令。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装完成之后，输入 cnpm -v 检测版本。

3. 安装脚手架

脚手架帮助我们搭建基本的开发环境，好比架子搭建好了，利用它可以搞定目录结构，本地调试，单元测试，热加载及代码部署等。

输入指令 cnpm install -g vue-cli ，期间若停止可按 enter 键继续运行。

输入 vue -V 可以查看 vue 版本。

这时环境已经基本搭建成功。

4. 创建vue.js项目

建议不要装在c盘，这里我们在 D 盘下创建项目，首先要通过命令行进入 D 盘，输入 d: 进入 D 盘。
接下来，再在 D 盘下创建项目，如果要在某个文件内创建项目的话，需要进入到相应的文件夹内。

输入 vue init webpack my-first-demo 命令，my-first-demo 是自定义的项目名字。


5. 安装依赖

由于各个模板之间都是相互依赖的，所以安装依赖。
进入到创建的项目中 cd my-first-demo ，输入指令 cnpm install 。
6. 安装完成

输入命令 cnpm run dev 启动项目，启动成功后用
http://localhost:8080 访问项目。
运行成功后，会看到以下界面，即配置完成。