VueJs现在不可谓不火啊，下载量从丢丢哥关注Vue的时候的下载量8000多现在突然上升到39388了;
如果仅仅引用Vue.js文件很简单，可以直接在项目中开发
我们这次讲的是用webpack前端模块化管理，安装Vue脚手架
本文档讲的是Ubuntu下的安装流程
一、安装NodeJs
由于安装node很多资源都在国外，也许一开始的起步就难倒了好多人，丢丢哥在这里推荐一个比较稳妥比较快的安装方法。
- 首先去nodejs官网下载源码包(64位的选择64位，32位的选择32位)
下载完成后有2个下载的压缩文件
我们使用这个.xz后缀的放到ubuntu环境中 然后开始安装
- 配置Node
1.将下载好的安装包node-v6.9.2-linux-x64.tar.xz;移动至/opt目录并解压，命令如下：
mv node-v6.9.2-linux-x64.tar.xz /opt
xz -d node-v6.9.2-linux-x64.tar.xz
(如果xz没装，请用apt安装它)
tar -xvf node-v6.9.2-linux-x64.tar
然后重命名node-v6.9.2-linux-x64
mv node-v6.9.2-linux-x64 node
2.配置全局变量
vim /etc/profile
在该文件末尾编译添加,编译完成后: wq保存并退出
export NODE_HOME=/opt/node
export PATH=$PATH:$NODE_HOME/bin
export NODE_PATH=$NODE_HOME/lib/node_modules
3.再输入下面的命令，重新执行刚修改的初始化文件，使之立即生效
source /etc/profile
4.然后输入 node -v ; npm -v会发现已经安装完成了
5.说明环境变量配置生效，安装成功了，是不是很快？不过你进入root时会发现该配置并没有生效
6.在命令行输入vim /root/.bashrc 并在文件末尾加入一行source /etc/profile 保存并推出，这样就大功告成了
二、安装Vue
1.很多人按照官方直接去安装Vue，会发现慢如狗
这里我们使用淘宝的cnpm 这个里面都是国内的源
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 全局安装Vue 可以任何地方 vue init ....
cnpm install --global vue-cli
然后新建一个目录（要有权限）
vue init webpack TempVue
# 进入你的项目
cd TempVue
# 拉取依赖
cnpm install
就可以初始化一个Vue脚手架项目了
# 进入你的项目
cd TempVue
# 拉取依赖
cnpm install
然后打开package.json
{
"name": "mydemo",
"version": "1.0.0",
"description": "VuesDemo",
"author": "吕倡 <lvchang@ttmac.net>",
"private": true,
"scripts": {
"dev": "node build/dev-server.js",
"build": "node build/build.js"
},
"dependencies": {
"vue": "^2.1.0",
"vue-router": "^2.1.1"
},
"devDependencies": {
"autoprefixer": "^6.4.0",
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"babel-register": "^6.0.0",
"chalk": "^1.1.3",
"connect-history-api-fallback": "^1.1.0",
"css-loader": "^0.25.0",
"eventsource-polyfill": "^0.9.6",
"express": "^4.13.3",
"extract-text-webpack-plugin": "^1.0.1",
"file-loader": "^0.9.0",
"friendly-errors-webpack-plugin": "^1.1.2",
"function-bind": "^1.0.2",
"html-webpack-plugin": "^2.8.1",
"http-proxy-middleware": "^0.17.2",
"json-loader": "^0.5.4",
"semver": "^5.3.0",
"opn": "^4.0.2",
"ora": "^0.3.0",
"shelljs": "^0.7.4",
"url-loader": "^0.5.7",
"vue-loader": "^10.0.0",
"vue-style-loader": "^1.0.0",
"vue-template-compiler": "^2.1.0",
"webpack": "^1.13.2",
"webpack-dev-middleware": "^1.8.3",
"webpack-hot-middleware": "^2.12.2",
"webpack-merge": "^0.14.1"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
}
}
终端中运行
npm run dev
会发现项目运行了，浏览器会自动打开，(但是Vagrant中不会自己打开浏览器 ，那是因为vagrant虚拟机 地址不是127.0.0.1 而是192.168.33.10等)
如图:
