VUE-安装 VUE-安装

为啥要用vue
1．提高开发效率
提高开发效率的发展历程：原生JS->JQuery类库->前端模板引擎->Angular/vue（能减少不必要的DOM操作，提高渲染效率；双向数据绑定，通过框架提供的指令，我们只需要关心数据的业务逻辑，不再关心DOM是如何渲染的了）

在vue中一个核心的概念就是让用户不再操作DOM元素，解放了用户的双手，让我们更多的去关注业务逻辑。

框架和库的区别
框架：是一套完整的解决方案，对项目的侵入性比较大，项目如果需要更换框架，则需要重新架构整个项目；
库：提供某一个小功能，对项目的侵入性较小，如果某个库无法完成某些需求，可以很容易切换到其他库实现需求。
MVC和MVVM

文章图片
image.png
MVVM对应于VUE代码中：
M：data里面的数据
V：html结构
VM：new出来的Vue对象
VUE安装
真的是，神烦这种安装。
1．首先要安装node.js
https://nodejs.org/dist/v4.4.3/node-v4.4.3-x64.msi
检测安装是否成功：
node --version
2．安装vue
可以直接下载vue.js，并用标签引入
NPM是啥？
它是同node.ls一起安装的包管理工具，能解决node.js代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用；
允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用；
允许用户将自己编写的包货命令行程序上传到NPM服务器供别人使用
node集成了npm，所以npm也一并安装好了，输入npm –v检测版本
可以使用淘宝npm镜像代替官方版本：
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
这样便可以使用cnpm命令安装模块了：
$ cnpm install [name]
ok，说这个是干嘛呢，就是用来安装VUE的：
最新稳定版
$ cnpm install vue
创建一个工程目录：
全局安装 vue-cli $ cnpm install --global vue-cli
创建一个基于 webpack 模板的新项目 $ vue init webpack my-project
这里需要进行一些配置，默认回车即可 This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob test@runoob.com
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
vue-cli ? Generated "my-project".
To get started:

cd my-project npm install npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack
进入项目，安装并运行：
cd my-project
cnpm install
cnpm run dev
然后访问： http://localhost:8080/
然后就可以看到运行的结果了。
我们看下VUE的项目目录：