一、Vue简介
Vue（发音为/vjuː/，类似于view）是用于构建用户界面的渐进框架。与其他整体框架不同，Vue从头开始设计以逐渐采用。核心库仅集中在视图层，并且易于拾取并与其他库或现有项目集成。另一方面，当与现代工具和支持库结合使用时，Vue也完全能够为复杂的单页应用程序提供支持。
重点：
1.只关注视图层
2.MVVM模式框架
3.SPA（single page web application）应用
-MVVM模式是一种试图与数据双向绑定的框架，即数据发生变化，试图会跟着变化；试图发生变化，数据模型也发生变化，开发者再也不需要操作DOM节点。
案例：乘法表的例子
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
//cdn的方式 引入Vue
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<!--MVVM模式-->
<div id="app">
<input type="text" v-model="num"/>
<table border="1">
<tr v-for="i in parseInt(num)">
<td v-for="j in i">{{j}}*{{i}}={{j*i}}</td>
</tr>
</table>
</div>
<script>
var app=new Vue({
el:"#app",
data:{
num:9
}
})
</script>
</body>
</html>
效果图：
-SPA 单页面应用(其实就是安装Vue的第二种方式)，可以实现组件化开发，提高开发效率，适用大型项目。这种项目开发完后，只有一个html页面，内容是由一堆js、css渲染的。
spa的缺点：Spa应用部署后只有1个页面，而且这个页面只有一堆js、css文件，所以Spa应用不易被搜索引擎搜到。
二、为什么选择Vue
1.渐进式框架
2.双向数据绑定
3.不需要操作DOM，状态机，状态的改变，会引起视图的更新
4.Vue不仅仅可以构建整个大型应用，还可以作为一个项目的某一个功能 实现然后嵌入项目
5.Vue环境构建非常方便：vue-cli指令
6.Vue单文件组件：组件化开发
7.社区非常强大，提供各种各样的插件供我们使用
三、Vue创建方式分为两种
1.使用cdn方式直接引入（一般不用）
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js">
2.利用Nodejs环境搭建Vue（SPA应用,开发一般选择这种）
基本环境安装
首先需要安装两个东西：
1.Nodejs
2.npm（国外镜像）
四、NodeJs的Windows安装
1.下载安装包
下载Nodejs安装包，地址为：https://nodejs.org/en/download/， 在页面中点击下载对应的操作系统，windows的推荐下载Windows Installer (.msi)。为了方便，百度云盘地址为：https://pan.baidu.com/s/1B13U3MlIMDFbbltuS5ZbTQ，密码为：z2yu。
2.安装
安装msi的时候需要注意的是选择安装模块的时候可以点击Add to PATH(其中包含了Node.js和npm)，如下：
3.环境变量配置
1）安装完成后需要设置环境变量：即Path中添加安装地址，如： D:\java\nodejs
在cmd窗口中输入以下命令，验证安装是否成功：
四、搭建第一个完整的 vue-cli 项目
****第一步安装 Node.js 淘宝镜像加速器（cnpm）**（一般选择不装）
这样子的话,下载会快很多~
-g 就是全局安装
npm install cnpm -g#或使用如下语句解决 npm 速度慢的问题
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装过程可能有点慢~,耐心等待!虽然安装了cnpm,但是尽量少用!
安装位置:
C:\Users\Administrator.SC201803081145\AppData\Roaming\npm
第二步全局安装vue-cli
在指定的文件夹中 输入npm install vue-cli -g #只需要第一次安装时执行，以后的vue项目从第三步开始
第三步 使用webpack模板创建自己的项目
这里的 vuehr是项目名称，可以根据自己的需求起名
vue init webpack vuehr
第四步 初始化并执行
cd my-project #进到自己的项目中
npm install #安装依赖
npm run dev #启动项目
-
> 温馨提示(出现错误时)：
> npm uninstall -g vue-cli 卸载vue-cli
> npm config delete proxy 删除代理
执行完成后,目录多了很多依赖
安装并运行成功后在浏览器输入：http://localhost:8080
效果:
Vue-cli目录结构
- build 和 config：WebPack 配置文件
- node_modules：用于存放 npm install 安装的依赖文件
- src： 项目源码目录
- static：静态资源文件
- .babelrc：Babel 配置文件，主要作用是将 ES6 转换为 ES5
- .editorconfig：编辑器配置
- eslintignore：需要忽略的语法检查配置文件
- .gitignore：git 忽略的配置文件
- .postcssrc.js：css 相关配置文件，其中内部的 module.exports 是 NodeJS 模块化语法
- index.html：首页，仅作为模板页，实际开发时不使用
- package.json：项目的配置文件
- name：项目名称
- version：项目版本
- description：项目描述
- author：项目作者
- scripts：封装常用命令
- dependencies：生产环境依赖
- devDependencies：开发环境依赖
