Vue2.0 从环境搭建到发布
1 Vue2.0 推荐开发环境
1.1 Node.js
1.1.1 Node.js介绍
简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。
1.1.2 Node.js安装配置
安装包及源码下载node.js官网
本文实例以6.10.2版本为例，其他版本类似，安装步骤如下：
- 1 点击安装包后，一直点next（下一步）就行了，然后会出现安装目录。默认安装目录 "C:\Program Files\nodejs" , 你可以修改目录，并点击next，最后出现Finish界面，点击finish退出安装向导。
- 2 检测PATH环境变量是否配置了Node.js，打开系统终端（cmd），输入命令"path"，输出如下结果里面带有nodejs字样的，就证明环境变量配置好了。
- 3 检测Node.js版本，输入node -v就会显示一个版本号，例如v6.10.2。
1.2 NPM
1.2.1 NPM介绍
NPM（node package manager）是随同NodeJS一起安装的包管理工具，通常称为node包管理器。
顾名思义，它的主要功能就是管理node包，包括：安装、卸载、更新、查看、搜索、发布等。npm的背后，是基于couchdb的一个数据库，详细记录了每个包的信息，包括作者、版本、依赖、授权信息等。它的一个很重要的作用就是：将开发者从繁琐的包管理工作（版本、依赖等）中解放出来，更加专注于功能的开发。
1.2.2 npm包安装模式
在具体介绍npm包的管理之前，我们首先得来了解一下npm包的两种安装模式。
本地安装 vs 全局安装（重要）
node包的安装分两种：本地安装、全局安装。两者的区别如下
本地安装：package会被下载到当前所在目录，也只能在当前目录下使用。
全局安装：package会被下载到到特定的系统目录下，安装的package能够在所有目录下使用。(注：带有-g字样的命令行就是全局安装，反之就是本地安装)
1.2.3 npm国内镜像
使用国内镜像，下载速度更快，推荐安装淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org
然后输入
npm info underscore
如果上面配置正确的话会出现response
1.2.4 package.json配置文件
每个项目的目录下面，一般都有一个package.json文件，定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。
npm install 命令根据这个配置文件，自动下载所需的模块，也就是配置项目所需的运行和开发环境。下面是一个完整的package.json文件
字段说明
- 1 name 定义项目的名称（必填）
- 2 version 定义项目的版本（必填）
- 3 description 项目的简介（选填）
- 4 scripts 指定运行脚本命令的npm命令行的缩写，比如dev指定了npm run dev时，所需要执行的命令
- 5 dependencies 指定了项目运行所依赖的的模块
- 6 devDependencies 指定了项目开发所需要的模块
比如：
npm install jquery --save时表示jquery模块会写入dependencies属性
npm install css-loader --save -dev 表示该css-loader模块会写入devDependencies属性
1.3 webpack
1.3.1 webpack介绍
Vue的组件都是通过.vue或者像微信小程序的.wxml和.wxss等自定义的组件都无法被用户端的各种浏览器解析，需要被翻译和打包成js文件。
这里我们所用的webpack版本号是2.3.3（注：：后面我在介绍我们工程当中webpack是怎么进行配置的，其实webpack是需要一定的时间才能掌握，这里我们只是把它当做工具来用，知道它在我们整个工程是用来干什么的就行了）
1.3.2 webpack的安装
npm install webpack -g
这个时候由于我们安装了淘宝镜像，cnpm就是代表使用淘宝镜像设置npm（这个时候必须感谢一波，才让我们不要老是搭梯子）
cnpm install webpack -g
(注： 两者其实实现的效果是一样的，区别在于前一个是在外国服务器下的模块，后者是国内的服务器，下载起来会快一点)
1.4 vue脚手架
1.4.1 vue-cli介绍
vue-cli是用来生成模板的vue工程，相当于按照设计好的图来盖房子。微信小程序一开始也会以可视化界面的方式问你是否创建示例工程，其实就是封装了类似的脚手架。
1.4.2 vue-cli安装
npm install vue-cli -g
这个时候我们全局安装的包已经ok了，这个时候我们需要在硬盘中找一个文件夹放工程用的，打开终端进入该目录
比如我在f盘里创建了vue名称的文件夹，然后
cd vue
2 创建Vue工程
2.1 创建项目
然后输入命令行（我们现在用的是 vue2.2.6,也就是 vue2.0 的版本）
vue init webpack 工程名字<工程名字不能用中文>
vue init webpack-simple 工程名字<工程名字不能用中文>（创建一个项目结构简单的vue工程）
vue init webpack#1.0 工程名字<工程名字不能用中文> (创建Vue1.0的版本)
这里我们的工程名字取demo08（随便取的，这是工程名，可以看你的心情了取名字）然后会有一些初始化的设置
- Project name (demo08) 直接回车默认
- Project description (A Vue.js project) 直接回车默认
- Author dzh 写上你的大名
- Install vue-router? (Y/n) 这个是问你是否安装路由功能，打上Y（yes）省的后面还要再去下（主要还是这个东西必不可少）
- Use ESLint to lint your code? (Y/n) 这个是一个QA工具，用来避免低级错误和统一代码的风格，可根据自己的情况去选择
- Setup unit tests with Karma + Mocha? (Y/n) 这个是问你需要使用karma进行vue组件自动化测试吗？这是后面进行单元测试用的，根据自己实际情况选择
- Setup e2e tests with Nightwatch? (Y/n) 设置端到端测试，Nightwatch？ 当然这些都看你自己的爱好了，我这里是没有选择测试功能。
我的选择如图所示
然后回车会出现下面的提示，就是告诉你接下来怎么做
这个时候我们的项目已经创建好了
2.2 项目配置
cd demo08 进入创建的工程目录工程
工程目录如图所示：
安装项目依赖
cnpm install
这个比较快，不过有可能会出现缺了很多依赖库（不过本人用着好像还没出现问题，一旦出了问题就只能npm install重新再进行一次安装项目依赖了，不过从国外服务器下，需要一定的网速和梯子了，否则贼慢）
npm install
这个时候你会发现的的demo08文件夹下面多了一个叫 node_modules 的文件夹，这个是一个类似仓库的东西，用来存放我们所依赖的包
2.3 启动项目
终于要到了激动人心的时刻了，对我们要启动项目了，项目启动的默认端口号是8080；所以小伙伴们启动项目的时候要注意是否端口被占用的情况。(注：我用的是8088)
npm run dev / cnpm run dev
输入完命令会自动启动浏览器,就会看到这帅帅的界面了。
