声明：本教程不收取任何费用，欢迎转载，尊重作者劳动成果，不得用于商业用途，侵权必究！！！！
上一篇文章带大家了解了Vue框架项目实战整理：1、快速启动Vue、开发工具介绍，这篇文章我将介绍Vue环境搭建我的实战历程，我就直接把自己当时在印象笔记上面的做的实战笔记给粘贴复制过来了，然后做了一些微调，如有问题欢迎留言讨论！
1、安装 brew
打开终端，输入：
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
中间可能要你输入锁屏密码等，按照提示操作即可。
安装完成后，可查看安装版本：brew -v
2、安装 nodejs
可参考：Node.js的安装
node -v可查看安装版本
3、安装webpack
（1）安装淘宝镜像
大家都知道国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装后报错：
checkPermissions Missing write access to /usr/local/lib/node_modules
那是因为文件没有root权限,运行语句前面加上sudo
即：sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
这时候让你输入密码，密码不会显示，直接enter就行了
[email protected]: If using 2.x branch, please upgrade to at least 2.1.6 to avoid a serious bug with socket data flow and an import issue introduced in 2.1.0
执行以下命令,看看：
npm update [email protected]
npm update -d
npm -v （查看npm版本）
解决办法:
只是一个警告【可以忽略】
说你有一个包过时了，建议升级到高版本
输入sudo cnpm -v，可以查看当前cnpm版本，这个和npm的版本还是不一样的。
这样就可以使用 cnpm 命令来安装模块了：
cnpm install [name]
vue安装
在用 vue.js 构建大型应用时推荐使用 npm 安装，npm 能很好地和诸如 webpack 或 browserify 模块打包器配合使用。
vue.js 也提供配套工具来开发单文件组件。
cnpm install vue
（2）安装webpack
cnpm install webpack -g
报错1：
Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/webpack_tmp’
解决办法：
依然是权限错误，命令行前面加上sudo即可
sudo cnpm install webpack -g
报错2:
One CLI for webpack must be installed. These are recommended choices, delivered as separate packages
解决办法：
执行以下命令
sudo cnpm install webpack-cli -g
4、安装vue脚手架
cnpm install vue -cli -g
安装后报错：
Error: EACCES: permission denied, access '/usr/local/lib/node_modules’
那是因为文件没有root权限,运行语句前面加上sudo
即：sudo cnpm install vue -cli -g
这时候让你输入密码，密码不会显示，直接enter就行了。如下图：
5、切换项目目录，根据模板创建项目
在硬盘上建立一个文件夹放工程用的，在终端中进入该目录
cd 目录路径
cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project
根据模板创建项目
vue init webpack-simple 工程名字<工程名字不能用中文>
如： vue init webpack-simple demodemoyyh
报如下错误：
-bash: vue: command not found
于是我尝试如下命令：
获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
查看npm全局路径
/usr/local/lib/node_modules
然后我在mac中查看此目录下的内容，貌似要安装的文件都有了
于是进行6、7、8的尝试终于成功！！！ 历时一天，可叹！
6、安装vue
cnpm install vue
安装后，vue命令还是不可用
7、安装vue-cli脚手架构建工具
cnpm install --global vue-cli
安装后，vue命令可以用了
8、大功告成：切换目录，根据模板创建项目
cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project
vue init webpack-simple demodemoyyh
9、安装项目依赖
一定要从官方仓库安装，npm 服务器在国外，所以这一步安装速度会很慢。
npm install
不要从国内镜像cnpm安装(会导致后面缺了很多依赖库)
cnpm install
报错：
npm notice created a lockfile as package-lock.json. You should commit this file.
根据错误提示，是系统没有‘package.json’这个文件导致。这个文件的作用就是管理你本地安装的npm包。
一个package.json文件可以做如下事情：
（1）展示项目所依赖的npm包 （2）允许你指定一个包的版本[范围] （3）让你建立起稳定，意味着你可以更好的与其他开发者共享
此刻我们需要执行命令：npm init
创建package.json文件，系统会提示相关配置
也可以使用命令：npm init -y 【初学者初次搭建，建议用这个命令】
直接创建package.json文件，这样创建好处是：必填项已经帮你填好。
如果你嫌麻烦 或 不知道怎么填，就用此命令吧
【注：此命令必须是在项目目录下执行】
/Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh
下面执行创建，如下图：
然后才执行 npm install
10、安装 vue 路由模块vue-router和网络请求模块vue-resource
cnpm install vue-router vue-resource —save
11、启动项目、小结
启动项目：
npm run dev
小结：
（1）搭建环境，花费了时间，期间出的问题太多，要有耐心多尝试，坚持就是胜利！！！【快2点了，马上睡觉！】
（2）以后快速启动Vue环境
cd /Users/luminal/Documents/LuminalCode/Luminal_Web_H5/vue_project/demodemoyyh
npm run dev
demodemoyyh文件下面的目录：
命令行界面：
显示效果界面：
下一篇文章我将整理：Vue框架项目实战整理：3、Vue项目执行流程分析（一）