VUE-安装

为啥要用vue

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

2. 在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，并用<script>标签引入

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的项目目录：

image.png