01
一劳永逸的组件注册
// global.js文件
import Vue from 'vue'
function changeStr (str) {
return str.charAt(0).toUpperCase() + str.slice(1)
}
const requireComponent = require.context('./', false, /\.vue$/)
// 查找同级目录下以vue结尾的组件
const install = () => {
requireComponent.keys().forEach(fileName => {
let config = requireComponent(fileName)
console.log(config) // ./child1.vue 然后用正则拿到child1
let componentName = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '')
)
Vue.component(componentName, config.default || config)
})
}
export default {
install // 对外暴露install方法
}
02
高精度权限控制
——自定义指令directive
// array.js
export function checkArray (key) {
let arr = ['1', '2', '3', '4', 'demo']
let index = arr.indexOf(key)
if (index > -1) {
return true // 有权限
} else {
return false // 无权限
}
}
// main.js
import { checkArray } from "./common/array";
Vue.directive("permission", {
inserted (el, binding) {
let permission = binding.value; // 获取到 v-permission的值
if (permission) {
let hasPermission = checkArray(permission);
if (!hasPermission) { // 没有权限 移除Dom元素
el.parentNode && el.parentNode.removeChild(el);
}
}
}
});
<div class="btns">
<button v-permission="'1'">权限按钮1</button> // 会显示
<button v-permission="'10'">权限按钮2</button> // 无显示
<button v-permission="'demo'">权限按钮3</button> // 会显示
</div>
我们都会写组件,但是你知道怎么让组件能够成为高复用性的组件库型组件吗? 我们都会项目打包上线,但是你知道如何编写配置文件能让打包速度最优化吗? 我们都会写路由,但是你知道如何写才能保证多路由模块解耦,保证更方便增加新的路由模块吗?
网易独家面试集训
3天前端直播课
8月3日—8月5日
0元学习 , 每晚8点
01
周二
周三
周四
扫码听直播领取
前端进阶资料包
添加助教小姐姐一起进步
02
唐磊,网易高级前端工程师。
03
扫描下方二维码,获取高清版
底层原理+项目实战+面试真题
免费领取
不用转发,不用分享
04
免费直播,海量资料,先到先得~
往期直播干货回顾↓