一、首先需要安装必要的软件
Homebrew ：Mac系统的包管理器，用于安装NodeJS和一些其他必需的工具软件
Node.js：JavaScript运行环境(runtime)
npm: node.js下的包管理器，NPM 能很好地和诸如 webpack 或 Browserify 模块打包器配合使用
webpack : vue的组件都是.vue或者像微信小程序的.wxml或者.wxss等自定义组件都无法被用户端的浏览器解析,需要编译和打包成js文件
vue-cli ：用来生成模板的Vue工程
二、安装步骤
1.安装homebrew
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
注：在Max OS X 10.11（El Capitan)版本中，homebrew在安装软件时可能会碰到/usr/local目录不可写的权限问题。可以使用下面的命令修复：
sudo chown -R `whoami` /usr/local
在终端输入brew -v,如果能查询到brew的版本信息，那么恭喜你安装成功。可以继续往下撸了
2.使用homebrew安装node.js
brew install node
同上，如果在终端输入node -v 能够查询到版本信息，就说明安装成功。
3.获取nodejs模块安装目录访问权限
sudo chmod -R 777 /usr/local/lib/node_modules/
4.安装全局的webpack
npm install webpack -g
5.安装vue脚手架vue-cli
npm install vue-cli -g
6.找一个合适的位置存放你的vue工程
cd 目录路径
注：目录路径直接把创建好的文件夹拖拽到终端里就可以
7.创建项目
vue init webpack-simple 项目名
如：vue init webpack-simple vue2demo
注：项目名不可以使用中文，也不能使用大写字母
创建项目之后会出现一系列的参数配置，根据自己的情况 进行选择，因为最后2个的配置具体是啥意思我也没搞懂呢
8.将根目录切换到项目
cd 项目名
如：cd vue2demo
9.安装项目依赖
npm install
10.安装 vue 路由模块vue-router和网络请求模块vue-resource
npm install vue-router vue-resource --save
11.启动项目
npm run dev
注：如果运行成功，浏览器会弹出以下的运行结果图：
图1
四、本地编译器的选择
我用的是vscode（visual studio code）
图2
打开编译器，选择打开文件夹，就可以看到，刚刚创建的工程的目录列表
图3
注：如果你打开你的.vue文件发现一片灰，不要急，vscode会提示你安装相关插件工具，具体安装了啥忘记截图了，就记得第一个是tools什么的，然后重载页面，就可以看到五彩缤纷的编程页面了。今天就到这啦，继续加油。
网友评论