在这个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
网友评论