目录
????????Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。
????????在有HTML，CSS，JavaScript的基础上，快速上手。
????????Vue.js的API是参考了AngularJS、Knockout、Ractive.js、Rivets.js。
????????Vue.js的API的对于其他框架的参考不仅是参考，其中也包含了许多Vue.js的独特功能。
????????简单小巧的核心，渐进式技术栈，足以应付任何规模的应用。
????????20kbmin+gzip?运行大小、超快虚拟DOM?、最省心的优化。?
| 目录/文件 | 说明 |
|---|---|
| build | 项目构建(webpack)相关代码 |
| config | 配置目录，包括端口号等。我们初学可以使用默认的。 |
| node_modules | npm 加载的项目依赖模块 |
| src | 包含了几个目录及文件： |
| static | 静态资源目录，如图片、字体等。 |
| test | 初始测试目录，可删除 |
| .xxxx文件 | 这些是一些配置文件，包括语法配置，git配置等。 |
| index.html | 首页入口文件，你可以添加一些 meta 信息或统计代码啥的。 |
| package.json | 项目配置文件。 |
| README.md | 项目的说明文档，markdown 格式 |
element-ui的使用????????全部引用
import ElementUI from 'element-ui';
Vue.use(ElementUI);????????按需引用
import { Row, Button } from 'element-ui'
Vue.use(Row).use(Button)vue-router????????是vue.js的官方路由。它与vue.js核心深度集成，让用vue.js构建单页应用变得轻而易举。功能包括：
| 嵌套路由映射? | 动态路由选择 模块化、基于组件的路由配置 |
| 路由参数、查询、通配符 | 展示由vue.js的过渡系统提供的过渡效果 |
| 细致的导航控制 | 自动激活css类的链接 |
HTML5 history模块或hash模式 | 可定制的滚动行为 URL的正确编码 |
安装vue-router指定版本
npm install vue-router@3.6.5
Apache Hadoop YARN （Yet Another Resource Negotiator，另一种资源协调者）是一种新的 Hadoop 资源管理器，它是一个通用资源管理系统，可为上层应用提供统一的资源管理和调度，它的引入为集群在利用率、资源统一管理和数据共享等方面带来了巨大好处。
Yarn是由Facebook、Google、Exponent和Tilde联合推出了一个新的JS包管理工具，正如官方文档中写的，Yarn是为了弥补npm的一些缺陷而出现的。这句话让我想起了使用npm的坑：
npm install 的时候巨慢。特别是新的项目拉下来要等半天，删除node_modules，重新install的时候依旧如此。
同一个项目，安装的时候无法保持一致性。由于package.json文件中版本号的特点，下面三个版本号在安装的时候代表不同的含义。
"5.0.3","~5.0.3","^5.0.3"
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功
yarn虽然和nom一样是本地缓存，但是yarn无需互联网链接就能安装本地缓存的依赖项，提供了离线模式，而这个是npm实现不了的。
yarn解决了由于语义版本控制而导致的npm的不确定性问题，通过安装时创建的默认文件，确保使用的库的版本相同。
yarn增加了一些能让开发人员并行化处理所有必需的操作，且通过添加了一些改进，使得运行速度有了显著的提升，整个安装时间也变得更少。
npm的输出信息比较冗长，相比之下，yarn简洁很多。默认情况下，直观且直接地打印出必要的信息。
yarn的语义相对于npm更加清晰，主要是因为yarn改变了一些npm的命令名称，看上去就更清晰了。
| npm | yarn |
| npm install | yarn |
| npm install react --save | yarn add react |
| npm uninstall react --save? | yarn remove react |
| npm install react --save-dev | yarn add react --dev |
| npm update --save | yarn upgrade |
v-once指令：只会执行一次渲染，当数据发生改变时，不会再变化
v-show指令：接受一个表达式或一个布尔值。相当于给元素添加一个display属性
v-if指令~v-else指令~v-else-if指令：v-if和v-show有同样的效果，不同在于v-if是重新渲染，而v-show使用display属性来控制显示隐藏。频繁切换的话使用v-show减少渲染带来的开销。 说明一下：v-if可以单独使用，而v-else-if,v-else必须与v-if组合使用
v-for指令： v-for可用来遍历数组、对象、字符串。
v-html指令~v-text指令：是渲染字符串，会覆盖原先的字符串. v-html是渲染为html。{{}}双大括号和v-text都是输出为文本。
v-bind指令：是用可以将标签内的属性值解析成js代码，在标签的属性中使用v-bind，双引号里的内容会被当作js解析（只能解析变量或三元表达式），如下： 如果给属性值设置为一个变量，那么可以使用v-bind可以缩写为:<属性>="<变量>"
v-on(g)指令：v-on用于事件绑定 语法:v-on:<事件类型>="<函数名>"简写：@<事件类型>="<函数 名>"
v-model(h)指令：数据双向绑定指令，限制在 <input>、<select>、<textarea>、components中用 语法： v-model="<变量名>"
@keyup.enter 是对文本框的回车事件
vue框架的常用组件1、vue-router: 根据url锚点路径 ，在容器中加载不同的模块，本质作用是做页面导航
2、axios：axios主要是用于向后台发起请求的，还有在请求中做更多是可控功能。
???????? a.从浏览器中创建 XMLHttpRequest
????????b.从 node.js 发出 http 请求
????????c.支持 Promise API
????????e.拦截请求和响应
????????f.转换请求和响应数据
????????g.取消请求
????????h.自动转换JSON数据
????????i.客户端支持防止 CSRF/XSRF
3、vuex： 实现集中式状态管理的插件
????????a：集中化的状态管理
????????b：易于调试
????????c：状态共享
????????d：插件化
????????e：更好的组织代码
????????f：更好的代码重用 缺点：
????????????????a：增加了学习成本
????????????????b：增加了代码复用难度
4、Element UI： 是基于vue实现的一套不依赖业务的UI组件库，提供了丰富的PC端组件，减少 用户对常用组件的封装，降低了开发的难易程度。
vue与Element ui的关系
????????1.Element-Ui是基于vue封装的组件库，简化了常用组件的封装，提高了重用性原则；
????????2.vue是一个渐进式框架，Element-Ui是组件库；
5、swiper：
6、vue-echarts： 轮播图表
7、vue-video-player： 安装
?
npm install vue-video-player
import VuevideoPlayer from 'vue-video-player';
import 'video.js/dist/video-js.css';
Vue.use(VuevideoPlayer);?8、vue-photo-p[rev](http://www.js-code.com/tag/rev/)iew：
promise：Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和 更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供Promise。 作用：Promise的出现主要是解决地狱回调的问题，比如你需要结果需要请求很多个接口，这些接口 的参数需要另外那个的接口返回的数据作为依赖，这样就需要我们一层嵌套一层，但是有Promise 我们就无需嵌套。 本质：分离异步数据获取和业务。
/deep/
.el-checkbox /deep/ .el-checkbox__input {
display: none;
}.el-aside::-webkit-scrollbar{
display: none;
}::-webkit-scrollbar{
height: 15px;
}
::-webkit-scrollbar-thumb{
background-color: silver;
height: 15px;
}