Vue——element-UI框架、JSON Web Tokens、样式穿透

目录

一、element-UI框架

1.安装: 

2.引入 (全部导入方式)

3、use的解释

4、element-ui 的使用

二、JSON Web Tokens​​​​​​​

1、安装egg-jwt

2、配置

3、如何创建令牌

 4、案例

三、样式穿透

1、 什么情况下使用样式穿透

2、 样式穿透的三种办法

1. >>>

2. /deep/

3. ::v-deep

4. :deep()  穿透选择器

3、/deep/ ，>>>，::v-deep的区别

---

一、element-UI框架

1、纯html-ui框架：layui、 bootstrap 、mui 、jQuery-ui... 

就是一份写好样式的css代码

2、基于框架的ui框架：Vue、react...

写好了样式和基于框架语法的组件的组件库

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

根据Vue框架的语法，已经是实现了很多组件，只需引入然后注册魏组件，再使用就行了

1.安装: 

npm i element-ui -S
 

2.引入 (全部导入方式)

import ElementUI from 'element-ui';   //引入组件库，但是注意css有可能会冲突

import 'element-ui/lib/theme-chalk/index.css';   //引入全局的css样式，整个ui框架的风格

Vue.use(ElementUI);   //注册全局组件，把ElementUI框架提供的所有组件全部注册为全局组件

import Vue from 'vue';
import ElementUI from 'element-ui';   //引入组件库，但是注意css有可能会冲突
import 'element-ui/lib/theme-chalk/index.css';//全局的css样式
import App from './App.vue';
 
Vue.use(ElementUI);//注册全局组件==>Vue.component("xxxx",{})
 
new Vue({
  el: '#app',
  render: h => h(App)
});

（一般说use是去给原型绑定东西，但是这里不是，它是去全局注册）

install（arg）{arg就是调用use对象，install会直接运行}

3、use的解释

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
//一.自定义全局组件
import Gold1 from './components/Gold1.vue'
//Gold1.name Gold1文件中导出的对象的属性
Vue.component(Gold1.name,Gold1)
Vue.component("mygold",Gold1)
//二.use语法
// let obj={
// 	//有几个函数 自行研究 我只讲install
// 	install(arg){
// 		//agr就是调用use的对象
// 		// install会直接运行
// 		arg.prototype.hqyj=100
// 	}
// }
// let install=(arg)=>{
// 	arg.prototype.hqyj2=100
// 	arg.component("mygold",Gold1)
// }
 
// Vue.use(obj)//会执行obj内部的install
// Vue.use(install)//会直接执行传入install
 
// import  mytool from "./mytool.js"
// Vue.use(mytool)
 
//三.全部导入方式:
//1.引入ui框架  可以引入多个ui框架  但是注意css有可能会冲突 
import ElementUI from 'element-ui';
//2.引入全局css整个ui框架的风格
import 'element-ui/lib/theme-chalk/index.css';
//3.把ElementUI框架提供的所有组件全部注册为全局组件
Vue.use(ElementUI)
 
//四.按需导入方式:
// import 'element-ui/lib/theme-chalk/index.css';
// import {Switch} from 'element-ui';
// // Vue.component(Switch.name,Switch)
// Vue.use(Switch)
 
 
 
new Vue({
  router,
  store,//让整个vue项目仓库生效
  render: h => h(App)
}).$mount('#app')

4、element-ui 的使用

什么是布局？怎么排版的-最核心的就是怎么横着排列模块，竖着是无限高

1、栅格布局 ==>不是css技术，但是每一种ui框架都有，是css实现出来的，比如bootstrap的栅格就是浮动和定位实现的

2、css3-columns布局

3、flex弹性布局

4、表格布局

5、.......

树形控件

二、JSON Web Tokens

“ JSON Web Token(缩写 JWT)是目前最流行的跨域认证解决方案,本文介绍它的原理,用法和详细的数据结构。 Json web token(JWT)是为了网络应用环境间传递声明而执行的一种基于JSON的开发标准(RFC 7519),该token被设计为紧凑且安全的,特别适用于分布式站点的单点登陆(SSO)场景。

网络请求的过程中，记不住密码，把账号密码发给它的后台，就会生成一个token码，下次登录或者请求网站的任何东西的时候，只需要把token码发给它，就可以登录了

1、安装egg-jwt

npm install egg-jwt --save

2、配置

// {app_root}/config/plugin.js
exports.jwt = {
  enable: true,
  package: "egg-jwt"
};

// {app_root}/config/config.default.js
 
exports.jwt = {
  secret: "123456"
};

3、如何创建令牌

const token = app.jwt.sign({ foo: 'bar' }, app.config.jwt.secret);

把账号密码加密为暗文
          const token = this.app.jwt.sign({ foo: 'bar' },"xiangmu");  

把发送的token解密为保存的数据
          let re=this.ctx.app.jwt.verify(ziduan.token, "xiangmu");

 4、案例

	async login1() {
		  var ziduan=this.ctx.request.body
		  // console.log(ziduan)
		  //把账号密码加密为暗文
		  const token = this.app.jwt.sign({ foo: 'bar' },"xiangmu");  
		  console.log(token,111);
		  this.ctx.body={info:"ok",code:200,token}   //把token码发送给前端，然后其它页面把token码本地缓存起来
	}

	 async car(){
		  var ziduan=this.ctx.request.query
            //去数据库中验证是否正确，在加密
		  //把发送的token解密为保存的数据
		  let re=this.ctx.app.jwt.verify(ziduan.token, "xiangmu");
		  console.log(re)
		  this.ctx.body={info:"test"}
	 }

三、样式穿透

1、 什么情况下使用样式穿透

引入第三方组件库（如element-ui、element-plus），修改第三方组件库的样式
样式文件中使用了 scoped 属性，但是为了确保每个组件之间不存在相互影响所以不能去除

就是使用别人的框架，比如layui，elementUI，想把别人写的东西，改一下样式，颜色等

就是在控制台找到改盒子的class名，给他写你想要的样式，结果发现不生效，因为自己写的没有别人的优先级高

2、 样式穿透的三种办法

1. >>>

适用与 css、stylus，不太推荐，可能会有问题
外层类 /deep/ 想要修改类名 {修改样式}

2. /deep/

适用于 scss、less
外层类 >>> 想要修改类名 {修改样式}

3. ::v-deep

通用，据说可以加快编译速度
::deep 想要修改类名 {修改样式}

4. :deep()  穿透选择器

3、/deep/ ，>>>，::v-deep的区别

• css 使用 >>>
• less 使用 /deep/
• scss 使用 ::v-deep

在style经常用scoped属性实现组件的私有化时，要改变element-ui某个深层元素（eg:.el-input__inner）或其他深层样式时，需要使用/deep/，如

.conBox /deep/ .el-input__inner{
    padding:0 10px;
}

注意：/deep/在vue 3.0会报错,如果/deep/报错，可采用::v-deep，效果基本一样

.conBox ::v-deep .el-input__inner{
    padding:0 10px;
}

注意：深度作用选择器 >>>只作用于css，但如果是sass/less的话可能无法识别，这时候需要使用 /deep/和::v-deep 选择器。