Vue Element Vue-Underscore、Qs、Vue-Cookies、LocalStorage、CSS 样式

1、vue-underscore
本示例以 Vue Element Admin 项目为基础，介绍 vue-underscore

● 官网
   vue-underscore

● 安装

npm install vue-underscore
npm i vue-underscore

● /src/main.js

import Vue from 'vue';
import underscore from 'vue-underscore';
import App from './App';

Vue.use(underscore);

new Vue({
  ...App
}).$mount('#app');

● Examples

2、qs
本示例以 Vue Element Admin 项目为基础，介绍 qs

● 安装

npm install qs
npm i qs

【提示：貌似 qs 这个库是 axios 里面包含的，不需要再下载】
● URL 解析成 对象

qs.parse()

● 对象 序列化成 URL，以【&】进行拼接

qs.stringify()

● arrayFormat【格式化数组】

qs.stringify({ids: [48,49]},{arrayFormat: 'brackets'})

● main.js 引入【全局引入】

import Vue from 'vue'

import qs from 'qs'

// 全局属性配置，在任意组件内可以使用this.$qs获取qs对象
Vue.prototype.$qs = qs

● Examples【全局引入示例】

● Examples【在需要用到的组件中引入】

3、vue-cookies
本示例以 Vue Element Admin 项目为基础，介绍 vue-cookies

● 官网
vue-cookies

● 安装

npm install vue-cookies --save

● main.js 全局引入【全局引入】

import Vue from 'Vue'

import VueCookies from 'vue-cookies'

Vue.use(VueCookies)

● 设置默认值

this.$cookies.config(expireTimes, path)
expireTimes：默认1d
path：默认'/'
domain：cookie所在的域，默认为请求地址

● Examples

● 设置过期时间单位类型
单位    名称
y          year
m         month
d          day
h          hour
min      minute
s          second

4、Local Storage

// set 保存
localStorage.setItem('room', JSON.stringify({'room_code':'1','room_name':'房间1'}))

// get 获取
var room = JSON.parse(localStorage.getItem('room'))
console.log(`Ln 346 ${localStorage.getItem('room')};${room.room_code}`)

// remove 删除
localStorage.removeItem('room');

5、CSS
● 注意
*scoped：当一个style有这个标签，它的样式就只能作用于当前的Vue组件，可以使组件的样式不相互污染；去掉scoped，可能会造成全局污染。

首先，因为element-ui的属性是全局的，style不能设置scoped，否则不起作用
其次，因为element-ui的属性是全局的，所以如果改变当前页面为了不影响其他页面，必须给当前页面一个id，再设置他的style

#custom .el-table__body tr.current-row > td { background-color: #1890ff !important;color: white; }
#custom .el-table--enable-row-hover .el-table__body tr:hover > td { background-color: #1890ff; color: white; }

● 注意
有scss的地方一定要用deep；不用scss时就要用>>>

● 重写

● table背景色修改【注意：不要在

6、覆盖 element 样式
覆盖 element 样式，css必须要去掉scope，才能作用到外面，要注意不要污染全局css，如果只是修改某个el-input，可以在其外层加一个

， 然后用子代选择器选出来。

.custom > .el_input 
或
.custom .el_input

*
*
*
*
*
*