小菜鸟vue入坑指南

vue是一款构建用户界面的渐进式框架，他是一款基于MVVM的框架，说到这里，简单说一下咱们在设计软件的时候的思想，设计软件的时候是基于MVC的架构；

首先 M: Model：能够简单的理解为就是个人data中return回来的数据，v: view:是个人视图层，能够理解为个人template， 而c：controller 能够理解为methods，就是将个人Model与view联系起来，这就是基于vue对mvc的理解；

首先 ，咱们在电脑安装vue的环境配置：(基于vue-cli去搭建项目)

1.在电脑安装node，node官网地址： nodejs.org/zh-cn/ 直接傻瓜式安装操做；（检查是否安装成功： node -v;）

2.检查npm是否安装成功

3.而后全局安装vue-cil：npm install -g vue-cli（考虑到使用npm比较慢，你们能够安装淘宝镜像cnpm） npm install cnpm -g

cnpm install -g vue-cli

若是不当心安装错误，使用 npm cache clean来清理缓存，注意安装失败后，建议清楚缓存以后，再从新安装；

4.安装完成以后，使用vue -V 来检查啊是否安装成功；

5.进入你要建立项目的文件夹，在这个文件夹下面输入：

6.回车，接下来出现的英文表示：

Project Name：要建立的项目名称（该命令会生产一个package.json文件，文件中的name选项就是这个ProjectName，默认为当前建立的项目目录名称，也能够自行制定（可是须要符合package.json中name命名规则，不要出现大写字母，空格，下划线，能够使用 - ）

Project Description：项目简介，也会出如今package.json文件中,可选

Author：做者，可选

下一步直接回车

Install vue-router：是否安装vue路由组件，作项目的话必定要安装

Use ESLint to lint your code：是否须要使用ESLint模块进行代码检测

Setup unit tests with Karma + Mocha?：是否安装测试（单元测试）

Setup e2e tests with Nightwatch?：是否安装端到端的测试

完成上面步骤，over！

这就是一个简单的使用vue-cli搭建一个工程的例子；

下面就是利用vue-cli搭建的项目目录：

---------------------------我是华丽丽的分割线----------------------------------------------------------