VUE中的一些常用知识

• element 组件的使用

import {xx} from "element-ui"
Vue.use(Button);
Vue.prototype.$message = Message;
Vue.prototype.$confirm = MessageBox.confirm;
//引用
this.$message.error("获取动态参数列表失败！")

• 挂载路由导航守卫

//挂载路由导航守卫
router.beforEach((to,from,next)=>{
//to 将要访问的路径
//from 代表从哪个路径跳转而来
//next 是一个函数,表示放行
// next() 放行 next('/login') 强制跳转
if (to.path === '/login')  return next()
const tokenStr = window.sessionStrage.getItem('token');
if(!tokenStr) return next('/login') next()
})

• 路由

1.安装vue-router 
2.引用 import VueRouter from "vue-router"
// 懒加载的方式引用页面
const Login = () => import('../components/Login');
3.全局使用Vue.use(VueRouter);
4.配置路径
 const routes = [
{path:"/home",
component:welcome,
//重定向
redirect:"/welcome"
children:[
{path:'welcome',component:Welcome}]
}]

const router = new VueRouter({
    routes 
})
export default router;

•  axios的拦截器

1.安装axios 
2.import axios from "axios"
2.配置请求的根路径
axios.defaults.baseURL = 'http://xxxxxxx.com:8889/api/private/v1/',
//请求拦截器
axios.interceptors.request.use(config =>{
    //展示进度条
    //NProgress.start();
    //为请求头对象,添加Token验证的Authorzation字段
    config.headers.Authorization = window.sessionStorage.getItem("token")
    return config
})
//响应拦截器
axios.interceptors.response.use(config=>{
    //隐藏进度条
    NProgress.done();
    return config;
})

• 全局过滤器filter 

Vue.filter('dateFormat',function(originVal){
    const dt = new Date(originVal);
    const y = dt.getFullYear();
    const m = (dt.getMonth() + 1 + "").padStart(2, "0");
    const d = (dt.getDate() + "").padStart(2, "0");
    const hh = (dt.getHours() + "").padStart(2, "0");
    const mm = (dt.getMinutes() + "").padStart(2, "0");
    const ss = (dt.getSeconds() + "").padStart(2, "0");
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`;
})

• 常用的第三方依赖

• 可以展开的table

vue-table-with-tree-grid

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

• 导入富文本框编辑器

vue-quill-editor

import TreeTable from 'vue-table-with-tree-grid'
Vue.component('tree-table', TreeTable)

• 生成唯一标识id

nanoid

npm i  nanoid