目录
什么是VUE？
Vue是一款用于构建用户界面的JavaScript框架。它基于标准HTML、CSS和JavaScript构建，并提供了一套声明式的、组件化的编程模型，帮助开发者高效地开发用户界面。
VUE的框架特点
易用
在有HTML，CSS，JavaScript的基础上，快速上手。
Vue.js的API是参考了AngularJS、Knockout、Ractive.js、Rivets.js。
Vue.js的API的对于其他框架的参考不仅是参考，其中也包含了许多Vue.js的独特功能。
灵活
性能
20kbmin+gzip 运行大小、超快虚拟DOM 、最省心的优化。
VUE的目录结构
| 目录/文件 | 说明 |
|---|---|
| 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
yarn与npm
Yarn是什么
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介绍
NPM是随同NodeJS一起安装的包管理工具，能解决NodeJS代码部署上的很多问题，常见的使用场景有以下几种：
允许用户从NPM服务器下载别人编写的第三方包到本地使用。 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。 由于新版的nodejs已经集成了npm，所以之前npm也一并安装好了。同样可以通过输入 "npm -v" 来测试是否成功安装。命令如下，出现版本提示表示安装成功
Yarn与npm的主要区别介绍
-
yarn虽然和nom一样是本地缓存，但是yarn无需互联网链接就能安装本地缓存的依赖项，提供了离线模式，而这个是npm实现不了的。
-
yarn解决了由于语义版本控制而导致的npm的不确定性问题，通过安装时创建的默认文件，确保使用的库的版本相同。
-
yarn增加了一些能让开发人员并行化处理所有必需的操作，且通过添加了一些改进，使得运行速度有了显著的提升，整个安装时间也变得更少。
-
npm的输出信息比较冗长，相比之下，yarn简洁很多。默认情况下，直观且直接地打印出必要的信息。
-
yarn的语义相对于npm更加清晰，主要是因为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 |
vue常用指令
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 我们就无需嵌套。 本质：分离异步数据获取和业务。
通过深度选择器来改变Element-ui的内部样式
/deep/
.el-checkbox /deep/ .el-checkbox__input {
display: none;
}vue中对样式的更改
el-aside 去除滚动条
.el-aside::-webkit-scrollbar{
display: none;
}滚动条加粗
::-webkit-scrollbar{
height: 15px;
}
::-webkit-scrollbar-thumb{
background-color: silver;
height: 15px;
}
1043
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
