vue 基础知识

操作题

Vue 两个等号 == 和三个等号 === 的区别
== 用于比较两者是否相等，忽略数据类型。
=== 用于更严谨的比较，值和值的数据类型都需要同时比较。


为什么vue中data必须是一个函数
https://blog.csdn.net/xyphf/article/details/88863059

Vue中v-model与:value的区别
v-model不可以加其他值：<input type="text" v-model="curAmount">
:value可以加 单位：<input type="text"  :value="curAmount+'元'">

var,let,cont声明变量的区别
https://www.cnblogs.com/bonly-ge/p/9262723.html

在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。
全局变量：在函数外声明的变量作用域是全局的。全局变量在JS任何地方都可以访问。

ES2015(ES6) 新增加了两个重要的 JS关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。

函数内使用 var 声明的变量只能在函数内容访问，如果不使用 var 则是全局变量
使用 var 关键字声明的全局作用域变量属于 window 对象
var 关键字定义的变量可以在使用后声明，也就是变量可以先使用再声明。
let 关键字定义的变量需要先声明再使用。声明的变量只在 let 命令所在的代码块内有效。
const 用于声明一个或多个常量，声明时必须进行初始化，且初始化后值不可再修改。

vue中 require和import区别
https://www.cnblogs.com/caiguangbi-53/p/11757508.html

let echarts = require('echarts/lib/echarts')
这里require直接从 node_modules 中查找文件位置进行引入

vue中 ref 和 $refs 的介绍与使用
https://blog.csdn.net/qq_38128179/article/details/88876060

>在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

vue中 $router 和 $route 的区别
https://blog.csdn.net/benben513624/article/details/86657492

Vue router 中的 params和query的区别
除了params可以传递参数，query也可以，写法其实很相似，
区别在于1、params需要用name来引入，query需要path来引入


vue中 路由 query 和 props
vue 路由参数变化，页面不刷新（数据不更新）解决方法：watch中监听to from对比
https://blog.csdn.net/qq_29483485/article/details/88383544

vue 文件、图片上传
https://www.cnblogs.com/rogerwu/p/9274193.html
https://www.cnblogs.com/liu2lognew/p/14502157.html

1 VUE相关知识

1.1 Node.js

Node.js是一个Javascript运行环境(runtime)，发布于2009年5月，由Ryan Dahl开发，实质是对Chrome V8引擎进行了封装。Node.js对一些特殊用例进行优化，提供替代的API，使得V8在非浏览器环境下运行得更好。V8引擎执行Javascript的速度非常快，性能非常好。 Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js 使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。总结一下，node,js提供了javascript在浏览器以外的一个执行环境，满足一些特定的场景需求。

1.2 npm

npm 是 nodejs 的包管理和分发工具。它可以让 javascript 开发者能够更加轻松的共享代码和共用代码片段，并且通过 npm 管理你分享的代码也很方便快捷和简单。通过npm可以更方便的引用和分析基于nodejs开发的类库和插件。

npm install 、npm install --save 和 npm install --save-dev的区别

相同点：三者都会本地安装包到项目的node_modules目录中
区别在于对项目package.json的修改，npm install不会修改package.json，而后两者会将依赖添加进package.json

2 VUE的基本介绍

VUE 作者 尤雨溪
VUE是MVVM框架，它是渐进式JavaScript框架，是轻量级的。

核心是Dom的监听和数据的绑定
Vue.js是一个构建数据驱动的界面的库，其目标是实现响应的数据绑定和组合的试图组件。
Vue.js拥抱数据驱动的视图概念，这意味着我们能在普通的HTML模板中使用特殊的用法将DOM“绑定”到底层数据。一旦创建了绑定，DOM将与数据保持同步。
（v-model 表单双向数据绑定）

异步执行 DOM 更新

具体来说，异步执行的运行机制如下。
（1）所有同步任务都在主线程上执行，形成一个执行栈（execution context stack）。
（2）主线程之外，还存在一个"任务队列"（task queue）。只要异步任务有了运行结果，就在"任务队列"之中放置一个事件。
（3）当"执行栈"中的所有同步任务执行完毕，系统就会读取"任务队列"，看看里面有哪些事件。
那些对应的异步任务，于是结束等待状态，进入执行栈，开始执行。
（4）主线程不断重复上面的第三步。

nextTick
只有同步环境执行完毕，DOM渲染完毕之后，才会处理异步callback

vue nextTick深入理解－vue性能优化、DOM更新时机、事件循环机制
https://www.cnblogs.com/hity-tt/p/6729118.html

1.基础的JavaScript的试图驱动。重新绘制事件模型

2.1 Vue.js 目录结构

目录		说明
build	…	项目构建(webpack)打包相关配置文件
…	webpack.base.conf.js	基本配置文件
…	webpack.dev.conf.js	开发环境的配置文件
…	webpack.prod.conf.js	生产环境的配置文件
…	webpack.test.conf.js	测试环境的配置文件
config	…	配置文件的目录，也有三类环境的配置文件
…	index.js	核心配置文件，运行的主机、端口、代理配置（跨域）
node_modules	…	npm 加载的项目依赖模块
public	…	不会被webpack打包，输入路径时必须使用绝对路径。
src	…	要开发的目录，项目的核心区域，所有的开发文件的核心内容区域，包括组件，静态资源等。包含了几个目录及文件：
…	assets	静态资源文件夹，如*.html或logo图片等。和public不同的是assets文件夹会被webpack打包。
…	components	vue功能组件的存放位置，内部存放的是公共组件。目录里面放的组件文件，可以不用。
…	router	配置所有的路由
…	views	vue的根组件，所有的vue组件都是从这个组件中扩展的，App.vue通过编译后将内容编译到.html页面文件中。公共文件，主要以各个独立页面为主。
…	App.vue	项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录。
…	main.js	项目的核心文件，vue 的入口文件。所有的Vuex代码都必须在main.js中进行注册。
static	…	静态资源目录，如图片、字体等。
test	…	单元测试程序代码目录
.gitignore	…	这些是一些配置文件，包括语法配置，git配置等。Github相关配置，作用是git提交代码时可以指定忽略哪些文件。
index.html	…	首页入口文件，你可以添加一些 meta 信息或统计代码啥的。
package.json	…	项目配置文件，即项目的相关模块或配置信息
package.lock.json	…	项目配置文件，即项目的相关模块或配置信息。（记录当前项目安装相关依赖版本号，vue编译时会按照这个文件进行编译。）
README.md	…	项目的说明文档（项目相关打包编译及指令说明），markdown 格式
…	…	…

2.2 声明

声明式渲染，每个 Vue 应用都需要通过实例化 Vue 来实现。
定义数据对象。data 用于定义属性
methods 用于定义的函数，可以通过 return 来返回函数值。

注意点
Vue 的 el 属性是一个 CSS 选择器
Vue中所有对象中的清单内容都是固定的，不可以自由设置。

Promise

promise是什么？
1、主要用于异步计算
2、可以将异步操作队列化，按照期望的顺序执行，返回符合预期的结果
3、可以在对象之间传递和操作promise，帮助我们处理队列

axios

我们通常使用axios库与后台交互获取数据，它是基于promise的http库，可运行在浏览器端和node.js中。他有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御cSRF等。

[需求及实现]
统一捕获接口报错、弹窗提示、报错重定向、基础鉴权、表单序列化

npm install axios; //安装axios

#实现的功能
统一捕获接口报错 : 用的axios内置的拦截器
弹窗提示: 引入 Element UI的Message组件
报错重定向: 路由钩子
基础鉴权: 服务端过期时间戳和token,还有借助路由的钩子
表单序列化: 使用qs(npm模块)

链接：https://juejin.cn/post/6844903492948082702

2.1.1 {{ }} 插值语法moustache

{{ }} 用于输出对象属性和函数返回值。内部是data数据管理中心的属性渲染，也可以是表达式。moustache不支持if else复杂判断
//挂载点，所有的Vue的方法和属性都必须在对应的挂载根标签内部使用

驼峰命名

vHead <v-head>
vMain <v-main>

1.注册组件的时候使用了驼峰命名
如果在注册组件的时候使用了驼峰命名, 那么在使用时需要转换成短横线分隔命名。

2.传递数据时使用驼峰名称
如果父组件向子组件传递数据时使用了短横线分隔命名, 子组件接收时写驼峰式命名。

3.传递方法时双方都不能使用驼峰命名, 只能用短横线分隔命名。

3. 指令 directory

vue指令 (directory) 的作用是通过带有v-的特殊属性，实现对dom的响应式加载。
按钮权限显藏。

js	js	vue
单机	onclick	v-on:click 或 @click
双击dbl	ondblclick	v-on:dblclick
鼠标移上	onmouthenter	…
鼠标离开	onmouthleave	…
鼠标滑过	onmouthmove	…
鼠标移除	onmouthout	…
失去焦点	onblur	…
聚焦	onfocus	…
键盘事件	onkeydown	…
…	…	…

vue 指令中el 的 parentNode 为空的问题

元素el的父元素parentNode变成了null
if (el.parentNode && !Vue.prototype.$_has(binding.value)) {
    el.parentNode.removeChild(el);
}
我这边用的是bind的钩子函数。需要把钩子函数改成inserted就解决了。

vue指令
钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)：
bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。
componentUpdated：指令所在组件的 VNode 及其子 VNode 全部更新后调用。
unbind：只调用一次，指令与元素解绑时调用。

3.1. v-if v-else-if

<div id="app">
   <p v-if="false">我是第一行DOM元素</p>
   <p v-if="true">我是第二行DOM元素</p>
</div>

<div id="app">
   <p v-if="a==100">a=100</p>
   <p v-else-if="a>100">a>100</p>
</div>

3.2. v-show

v-show是通过控制元素的display属性，对元素的显示和隐藏进行逻辑判断，并没有实现元素的下树。主要区别是涉及到页面的加载性能。

3.3. v-for

遍历数组，数组对象名称是可以自定义的，下标参数是index

遍历对象，与数组不同的是，

遍历JSON

<body>
   <div id="app">
      <table border="1">
         <tr><td>序号</td><td>门店id</td><td>角色</td><td>账号</td><td>门店名称</td></tr>
         <tr v-for="(member,index) in members">
            <td>{{++index}}</td>
            <td>{{member.memberId}}</td>
            <td>{{member.role}}</td>
            <td>{{member.account}}</td>
            <td>{{member.shopName}}</td>
         </tr>
      </table>
   </div>
</body>
<script>
   //声明式渲染
   var vue = new Vue({
      el:'#app',//挂载点
      data:{
         members:[
               {memberId:3389, role:6, account:"15100010001", shopName:"门店3389"},
               {memberId:3386, role:6, account:"15100010006", shopName:"测试3386"}
         ]
      }
   })
</script>

作业：实现99乘法表

3.4. 3.4 v-html、v-text

{{}} 和 v-text 渲染文本区别：{{}}是赋值，v-text替换原来的文本信息

v-html渲染，模板

3.5. 3.5 v-cloak 遮盖指令

控制渲染，结束关联

v-cloak（遮盖）指令的作用是vue实例渲染后结束关联，所以我们可以实现网络延迟时不显示编译器的文本{{a}}

3.6. v-once 渲染一次

数据更新不会引起试图的更新，目的是为了优化页面的性能。
可用在功能组件上

3.7. v-pre跳过节点

v-pre跳过大量没有指令的节点，不去执行已标记过v-pre的节点
跳过该元素编译的过程，直接显示元素的文本
可用在某个元素上，

3.8. v-on添加事件监听

在vue中去除on，然后添加v-on或@符号，如
<button @click="add">按我加1</button>
<button v-on:click="minus">按我减1</button>
<button v-on:dblclick="minus">双击按我减1</button>

3.9. v-bind

v-bind属性对大小写不敏感。如果写驼峰命名，需要使用-隔开：
如helloWorld写为hello-world

3.10. v-model 表单双向数据绑定

实现表单元素的双向数据绑定。

$set

//向一个vo对象中增加markPoint 属性参数
var markPoint = {data: [{type: ‘max’, name: ‘最大值’}]}
this.$set(vo, ‘markPoint’, markPoint)
console.log(vo)
opt.series.push(vo);

3.11 数组

set 根据索引设置元素 this.arr.$set(index, val);

push 插入数据
使用this.$set向数组中插入数据，向数组某个对象中插入属性。

setData() {
    //向数组中插入数据
	let a = [{ name: 'a', age: '17', sex: '男'}, { name: 'b', age: '18', sex: '女'}];
	this.$set(a,2,{name: 'c', age: '20', sex: '男'});
	console.log('list',a)
	
	//向数组中的对象插入属性
	this.$set(a[2],'salary',3500);
	console.log('afterList',a);
}

splice删除
arr.splice(arr.indexOf(ele), length) 表示先获取元素的下标，删除长度为length的元素
arr.splice(1, 2) 删除数组索引为1开始的后面2个元素。

concat 合并数组
this.arr = this.arr.concat(anotherArr);

数组变动检测

1、变异方法（修改了原始数组），vue为触发视图更新，包装了以下变异方法：
push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
pop() 方法用于删除并返回数组的最后一个元素。
shift() 方法用于把数组的第一个元素从其中删除，并返回第一个元素的值。
unshift() 方法可向数组的开头添加一个或更多元素，并返回新的长度。
splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
sort() 方法用于对数组的元素进行排序。
reverse() 方法用于颠倒数组中元素的顺序。

2、非变异方法（不会修改原始数组而是返回一个新数组），替换数组
filter() 方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素。
concat() 方法用于连接两个或多个数组。
slice() 方法可从已有的数组中返回选定的元素。

3、注意：以下操作不触发视图更新
this.arr[index] = val;
this.arr.length = 2;

其他
split() 方法用于把一个字符串分割成字符串数组。

事件

VUE事件
https://cn.vuejs.org/v2/guide/events.html

4. 修饰符

4.1. 选项卡

###4.2.

4.3. 发布框textArea

4.4. 事件修饰符

修饰符是vue功能的扩展，是对vue事件或者系统操作等进行功能的补充

4.4.1 .stop 处理事件穿透（常用）

vue写法 @click.stop阻止默认事件的发生

JavaScript的event.stopPropergation()方法

4.4.2 .self

.self修饰符的作用是只有点击元素本身时才能够触发事件，不接受冒泡上来的事件，同时不阻止事件冒泡。

4.4.3 .prevent

4.4.4 capture捕获机制处理

对事件捕获监听

4.4.5 .once

对捕获的事件只触发一次

4.5 按键修饰符

.space是vue封装的对keyCode别名，与下面的代码表示相同

JavaScript

4.6 系统修饰符

4.6.1 .ctrl

4.6.2 .exact

4.7 鼠标按键修饰符

<button @click.right=’add’>按我加1</button>
<button @click.right.prevent=’add’>按我加1</button>
鼠标右键点击时可以实现数值增加1，但是也会出现右键默认弹窗。
可结合prevent修饰符实现右键的事件监听。

.middle

<button @click.right.middle=’add’>按我加1</ button>

4.8 表单修饰符

.lazy 修饰符是将Input输入框的数据绑定v-model从实时监听状态变为change状态
.number 修饰符，将输入的含数字字符串转为纯数字类型，过滤无效的字符串。
.trim 修饰符，过滤前后空白

<div>
    <input type="text" v-model.lazy="val">
    <input type="text" v-model.number="val">
    <input type="text" v-model.trim="val">
        <p>{{val}}</p>
</div>

5 vue脚手架 vue-cli

vue-cli是vue的脚手架工具，帮助我们快速生成了vue的起步项目，内置一些必备的打包工具等，让我们快速开发上手。
地址：https://cli-vuejs.org/zh/

5.1 vue-cli 目录结构

见2.1

5.2 npm run 编译过程

在scripts这个对象中的key就是npm run的命令值。
vue-cli默认提供了三个命令，分别是编译/热部署，打包，lint检验文件代码合格性

输入npm run dev
第一步：从node_modules/.bin/vue-cli-service文件目录
vue-cli核心代码是lib/Service.js

5.3 起步文件介绍

一个vue的组件就是将试图和逻辑进行了一个整合。

main.js

所有的Vuex代码都必须在main.js中进行注册。
render渲染当前App.vue组件。
$amount(’#app’) 挂载函数。

App.vue
App.vue的 <template 中引入了HelloWorld组件，并打印HelloWorld信息。div 根标签不能去除。
template 元素的作用是搭建vue文件的结构。
script 元素的作用是对当前文件逻辑进行交互。
style 元素的作用是对当前文件的样式进行修饰。

index.html
<noscript 标签

prototype

Vue.prototype.$axios = axios;
给vue函数添加一个原型属性$axios 指向Axios；这样做的好处是在vue实例或组件中不用再去重复引用Axios，直接用 this.$axios就能执行axios 方法了

5.4 vue组件

所有的vue组件都是以.vue结尾的文件，vue-cli中的App.vue文件就是整个vue的根组件。
return 每个组件返回的是一个对象。
data是一个函数，返回的是一个对象，让每个数据隔离，这个是JavaScript原理设计的，export default必须要有一个暴漏。
People的data返回的是一个对象，每一个实例返回的都是独立对象，互不冲突。

5.5 props 父子组件传值

vue提供了一个props的入口，也是父子组件之间唯一的传值方式，父组件通过v-bind自定义属性传入值，子组件通过props接收对应的参数。

5.5 $emit 子组件向父组件传值

$emit() 方法是vue封装的，用于向父组件返回自定义事件。父组件通过在子组件设置对应的自定义事件后，触发该事件。

子组件不可直接修改父组件的值，只能传递一个自定义方法，父组件通过vue封装的$emit方法，调用这个自定义事件，实现修改父组件的值。

子组件使用 $emit 触发父组件的自定义事件

People.vue

在Number子类，点击子组件按钮调用add()函数，add触发$emit返回的自定义方法“add”。
App.vue父级通过@add接收返回事件sumNum()方法，触发sumNum()方法中的业务。完成a++动作

<template>
  <div>
    <h3>子组件向父组件传参</h3>
    <h3>a:{{a}}</h3>
    <button @click="add">按我加1</button>
  </div>
</template>

<script>
export default {
    props: {
      a: {
        type:Number,
        required: true
      }
    },
    data() {
      return {
        //返回Object
      }
    },
    methods:{
      add(){
        this.$emit("add")//自定义父组件名称
      }
    }
}
</script>

<style></style>

App.vue
@add自定义事件是子组件通过@emit传递的自定义事件，修改父组件事件方法sumNum()，然后修改自己的值。

<template>
  <div>
    <People @add="sumNum" v-bind:a="a">
    </People>
  </div>
</template>
<script>
//引入People组件
import People from './components/People.vue'
export default {
  components: {
    People
  },
  data()
  {
    return {
      a: 10
    }
  },
  methods:{
    sumNum(){
      console.log("最终在这里执行a++动作")
      this.a++
    }
  }
}
</script>

<style></style>

5.5 watch

watch显示2个参数一个是旧的，一个是新的。作用是用来监听数据，data中的数据，及props、路由。
handler()是监听函数，如果需要初始化时进行监听，将immediate设置为true.

5.7 computed 计算属性

5.7.1. computed与普通的methods的区别

6 $attrs、$listeners 实例属性

(1)$attrs包含了父作用域中不作为prop被识别（且获取）的attribute绑定参数（class和style除外）。一个组件没有声明任何prop时，这里会包含所有父作用域的绑定（class和style除外），并且v-bind=”$attrs”传入内部组件——在创建高级别的组件时非常有用。

(2)$listeners包含了父作用域中的（不含.native修饰器的）v-on事件监听器。
它可以通过v-on=”$listeners”传入内部组件—在创建更高层次的组件时非常有用。

$listeners获取的是祖先组件绑定到后代组件的所有事件监听，如：Parent传递add事件，Child传递minus()事件方法，则GrandSon能够通过$listeners获取到add()和minus()两个事件。
即：子组件可以接收到父组件的（非.native修饰符）的事件监听。

//.native辅助原生的事件监听。
<Child v-on:click.native="add"></Child>

7 $refs 和 $el 实例属性

7.1.1 $refs 控制子元素事件

7.1.2 $el 通过refs修改样式

Vue 的 el 属性是一个 CSS 选择器

7.2 mounted()

ref 和 $refs

在JavaScript中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在Vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。

ref的介绍

ref被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向该子组件实例

通俗的讲，ref特性就是为元素或子组件赋予一个ID引用,通过this.$refs.refName来访问元素或子组件的实例

<p ref="p">Hello</p>
<children ref="children"></children>

this.$refs.p
this.$refs.children

$refs的介绍
this.$refs是一个对象，持有当前组件中注册过 ref 特性的所有 DOM 元素和子组件实例

注意： $refs只有在组件渲染完成后才填充，在初始渲染的时候不能访问它们，并且它是非响应式的，因此不能用它在模板中做数据绑定
.
注意：当ref和v-for一起使用时，获取到的引用将会是一个数组，包含循环数组源
https://blog.csdn.net/qq_38128179/article/details/88876060

8 mixins 混入

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

8.1 第一节：可复用的功能

用来分发vue组件中可复用的功能。一个混入对象可以包含任意组件选项。类似函数封装。
在混入mixins文件增加create()，会分别依次执行，不会进行覆盖。

slot 插槽

很详细
https://www.cnblogs.com/loveyt/p/9946450.html

作用域插槽

作用域插槽，就是在槽上面绑定数据。
作用域插槽绑定了一套数据，父组件可以拿来用，情况就是：样式父组件说了算，但内容可以显示子组件插槽绑定的。

<slot name="up" :data="data"></slot>
 export default {
    data: function(){
      return {
        data: ['zhangsan','lisi','wanwu','zhaoliu']
      }
    }
}

router-view

router-view

Webpack

20.1 创建项目 vue init webpack myvue

20.2 启动项目 npm run dev

20.3 编译 npm run build

VUE + Element UI

npm i element-ui -S  #在项目的根目录安装Element UI

在package.json可以看到elementui已经引入成功了

修改/src/main.js文件，引入element-ui和样式

import ElementUI from 'element-ui'

import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);

后台界面布局

登录

vue+elementui搭建后台管理界面(1登录)
https://www.cnblogs.com/wbjxxzx/p/9942648.html

首页

首页布局代码

<template>
    <!-- <el-container>：外层容器。当子元素中包含 <el-header> 或 <el-footer> 时，全部子元素会垂直上下排列，否则会水平左右排列。 -->
    <el-container>
        <el-header>
            <div class="header_logo"><img :src="header_logo_img" alt="alm-iot" />后台管理-布局</div>
        </el-header>
        <el-container>
            <el-aside width="200px">
                <el-menu :default-active='activeIndex' class="el-menu-demo" model="horizontal" @select="handleSelect">
                <!-- <el-menu :default-active="this.$router.path" model="horizontal" @select="handleSelect" router> -->
                    <el-menu-item index="1">个人中心</el-menu-item>
                    <el-submenu index="2">
                        <template slot="title" class="fr">设备管理</template>
                        <el-menu-item index="2-1">选项1</el-menu-item>
                        <el-menu-item index="2-2">选项2</el-menu-item>
                    </el-submenu>
                    <el-menu-item index="/OrderList">订单管理</el-menu-item>
                </el-menu>
            </el-aside>
            <!--Main中的内容-->
            <el-main>Main 
                <router-view></router-view>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import header_logo_img from "@/assets/logo.png";
export default {
    name: "Home",
    data() {
        return {
            header_logo_img,
            msg: "Elelement Layout Home",
        };
    },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.el-container {
    position: absolute;
    width: 100%;
    top: 0px;
    left: 0;
    bottom: 0;
}
.el-aside {
    background-color: #d3dce6;
    color: #333;
    text-align: center;
    line-height: 200px;
}
.el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    line-height: 160px;
}
.el-menu .fr {
    float: right;
}
/*边框底部*/
.el-header .el-menu {
    border-bottom: none;
}

.el-aside, .el-main {
    padding-top: 60px; /*填充上部*/
}
.el-aside .el-menu {
    border-right: none; /*menu右边框*/
}
.el-header {
    width: 100%;
    background-color: #b3c0d1;
    color: #333;
    text-align: left;
    line-height: 60px;
    padding: 0;
    z-index: 1000;
}
.header_logo {
    flex: 3;
    display: flex;
    justify-content: left;
    margin-left: 10px;
}
.header_logo img {
    width: 50px;
    height: 50px;
}
</style>

MD5加密

随机数，签名，时间戳，token

1.安装
npm install --save js-md5 -d
2.在mian.js中引入
import md5 from 'js-md5';
3.设置成全局属性，方便每个页面使用
Vue.prototype.$md5 = md5;
4.在需要的页面中调用
this.$md5('原始密码');


前端vue 用rsa加密传输
npm i jsencrypt -S 
https://www.cnblogs.com/wqnmlgbsz/p/13094289.html


 

参考资料

https://www.runoob.com/vue2/vue-tutorial.html

$refs, $children, $parent获取父子组件的实例来实现父子组件之间的通信
https://blog.csdn.net/yiyueqinghui/article/details/84203477