在这个JS入侵前后端的形势下，不会JS的Androider不是好Androider，所以就从零来学习一下在前端大火的vue框架，今天我就记录下vue.js的环境搭建过程。
我的安装平台是MacOS 10.12.1版本，Windows下的也类似的。

安装平台.png

1.安装Node.js

由于Node.js平台是在后端运行JavaScript代码，所以，必须首先在本机安装Node环境。

这个很easy，到Node官网下载对应平台的安装程序,之后就是一些列的下一步下一步～～～目前最新的应该是8.9版本的，我之前有安装过是v7.10.0版本的。
安装成功后打开终端shell，输入 node -v就可以看到版本了

$ node -v
v7.10.0

再输入node就可以进入Node.js的交互环境。在交互环境下，你可以输入任意JavaScript语句，例如100+200，回车后将得到输出结果，这个就比较适合初学JavaScript语法时的练手环境。
要退出Node环境，输入.exit就可以了。

2.安装npm

npm是什么？其实是Node.js的包管理工具（package manager）。

如果每次写JS代码都需要去手动引入别人的包是很麻烦的事，程序员是最喜欢偷懒的，npm就是一个包集中管理的工具，大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

其实npm已经在Node.js安装的时候顺带装好了。我们在终端输入npm -v，应该看到类似的输出：

$ npm -v
5.5.1

由于国内的和谐环境，一般npm安装需要淘宝镜像，安装需要的安装包速度快很多.
可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的

$ npm install -g cnpm --registry = https://registry.npm.taobao.org

这样就可以使用 cnpm 命令来安装模块了：

$  cnpm install [name]

到这里Node环境就安装好了。

3.安装vue

在安装vue之前我们需要先安装webpack打包工具

$ npm install webpack -g

安装vue脚手架,用官方的解释：vue-cli是官方命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

$ npm install --global vue-cli

接下来就是cd到需要存放工程的目录下

$ cd 工程目录

创建一个基于 webpack 模板的新项目:

$ vue init webpack my-project<注意工程名不能有中文>

到这一步项目就初步形成了，接下来需要安装依赖，走你,安装依赖包需要一点时间。

$ cd my-project
$ npm install

到这里环境就搭建好了，用下面命令就可以把工程跑起来喽

$ npm run dev

npm run dev.png

看一下默认的模版跑起来是什么效果：

效果图.png

最后再看一下项目结构：

工程结构.png

最后贴一张官方的结构说明,具体可参考：Project Structure

.
├── build/                      # webpack config files
│   └── ...
├── config/
│   ├── index.js                # main project config
│   └── ...
├── src/
│   ├── main.js                 # app entry file
│   ├── App.vue                 # main app component
│   ├── components/             # ui components
│   │   └── ...
│   └── assets/                 # module assets (processed by webpack)
│       └── ...
├── static/                     # pure static assets (directly copied)
├── test/
│   └── unit/                   # unit tests
│   │   ├── specs/              # test spec files
│   │   ├── index.js            # test build entry file
│   │   └── karma.conf.js       # test runner config file
│   └── e2e/                    # e2e tests
│   │   ├── specs/              # test spec files
│   │   ├── custom-assertions/  # custom assertions for e2e tests
│   │   ├── runner.js           # test runner script
│   │   └── nightwatch.conf.js  # test runner config file
├── .babelrc                    # babel config
├── .postcssrc.js               # postcss config
├── .eslintrc.js                # eslint config
├── .editorconfig               # editor config
├── index.html                  # index.html template
└── package.json                # build scripts and dependencies

后面我们再跟着官方文档来一步一步熟悉下vue.js。欢迎小伙伴们关注点赞，一起进步。

以上。

欢迎关注公众号：JueCode