Vue2.0上手教程（一）-- 教你搭建 Vue 脚手架（vue-cli）教程

Vue 作为前端三大框架之一GitHub地址，也是目前一个比较热门的前端框架，最新的 2.0 版本在1.0版本的基础上做了很多调整，废弃了很多api。。。Vue.js 不支持 IE8 及其以下版本，因为 Vue.js 使用了 IE8 不能模拟的 ECMAScript 5 特性。
说明：此文章是基于 Vue 2.0、webpack 构建的一个后台管理项目开发经验，并且参考了网上一些前人的技术分享，自己拿过来总结一下，我会将自己遇到的问题贴出，希望可以帮助到其他人，Ps：高手大神请绕道。

一、基本的环境搭建

1、安装 node.js

从 node.js 官网下载安装包，选择自己电脑的系统版本位数，直接点击下载，安装过程很简单，一直“下一步”就可以了（傻瓜式安装）。安装完成之后，打开命令行工具(win+r，然后输入cmd)，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。（官网下载安装的 node.js，自带 npm 包管理工具）

2、更换镜像源

对于国内用户，建议将 npm 的注册表源设置为国内的镜像，避免安装“依赖”的时候很很慢很慢超级慢，如 淘宝 NPM 镜像，可以大幅提升安装速度。在命令行工具中运行以下语句即可使用淘宝镜像：npm install -g cnpm --registry=https://registry.npm.taobao.org，使用方法将npm替换成cnpm：npm install => cnpm install，安装完成之后输入 cnpm -v，如下图，如果出现相应的版本号，则说明安装成功。

3、安装webpack

打开命令行工具输入：npm install webpack -g，安装完成之后输入 webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

4、安装vue-cli脚手架构建工具

打开命令行工具输入：npm install vue-cli -g，安装完成之后输入 vue -V（注意这里是大写的“V”），如下图，如果出现相应的版本号，则说明安装成功。

就这样完成以上步骤，我们开发vue项目的环境和工具都安装好了~~~

二、使用 vue-cli 来构建项目

1、在本地新建一个文件夹存放工程使用，使用命令行 cd 到该目录下。

2、创建一个基于 webpack 模板的新项目demo，项目的名称可以自己随意，但是不要是中文。在命令行工具输入：vue init webpack demo

3、进入创建的项目目录：cd demo

4、安装项目需要的依赖：npm install，系统会根据 package.json 安装项目所需要的依赖文件，依赖文件存放在 node_modules 文件夹中，目录结构如下。

5、运行项目：npm run dev，会自动打开浏览器，并访问 localhost:8080，显示的默认页面如下。

注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。

三、vue 项目打包

1、打包项目：npm run build，将项目打包成可发布的状态，上传到服务器。

2、上传文件到服务器：打开项目目录 dist 文件夹，将 static 文件夹和 index.html 直接上传到服务器的根目录。

博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~