这三个小技巧应该熟知:
组件 : 全局组件注册Vue权限控制 : 高精度全局权限控制Render函数 : 拯救繁乱的template 路由分区以及动态添加路由「全局组件注册」
创建全局.js文件管理全局组件
// 1 - globalComponent.js中可以这么封装↓
import Vue from 'vue' // 引入vue// 处理首字母大写 abc => Abcfunction changeStr(str){ return str.charAt(0).toUpperCase() + str.slice(1)}/* require.context(arg1,arg2,arg3) arg1 - 读取文件的路径 arg2 - 是否遍历文件的子目录 arg3 - 匹配文件的正则 关于这个Api的用法,建议小伙伴们去查阅一下,用途也比较广泛*/const requireComponent = require.context('.', false, /.vue$/)console.log('requireComponent.keys():',requireComponent.keys()) // 打印requireComponent.keys().forEach(fileName => { const config = requireComponent(fileName) console.log('config:',config) // 打印 const componentName = changeStr( fileName.replace(/^.//, '').replace(/.w+$/, '') // ./child1.vue => child1 ) Vueponent(componentName, config.default || config) // 动态注册该目录下的所有.vue文件})
使用globalComponents
// 2 - 将globalComponent.js引入main.js
import global from './components/globalComponent'// 3 - 使用这类组件不再需要引入和注册,直接标签使用即可
I am HelloWorld
「高精度全局权限处理」
开发中 - 处理一些按钮显示权限问题
这种场景出现几率极高,尤其是处理含有多种角色的项目,如果这一类型的权限判断有多次处理,每一次出现都经历判断的话,代码将会异常难看且冗余,因此我们可以通过全局权限判断来处理
/* 在项目里新建一个common文件夹用于存放全局 .js 文件 这种全局文件夹做法相当普遍,一般项目里都应该有这样一个文件夹来管理全局的东西*/// common/jurisdiction.js 用于存放与权限相关的全局函数/变量export function checkJurisdiction(key) { // 权限数组 let jurisdictionList = ['1', '2', '3', '5'] let index = jurisdictionList.indexOf(key) console.log('index:',index) if (index > -1) { // 有权限 return true } else { // 无权限 return false }}
// 将全局权限Js挂载到全局中// main.jsimport { checkJurisdiction } from './common/jurisdiction'// 优雅操作 - VUE自定义指令Vue.directive('permission',{ inserted(el, binding){ // inserted → 元素插入的时候 let permission = binding.value // 获取到 v-permission的值 if(permission){ let hasPermission = checkJurisdiction(permission) if(!hasPermission){ // 没有权限 移除Dom元素 el.parentNode && el.parentNode.removeChild(el) } }else{ throw new Error('需要传key') } }})
// 使用方式
I am Home
权限1
权限2
// 无需再通过value去判断,直接通过v-permission的值进行判断即可
「拯救繁乱的template」
I am Home
button1
button2
button3
上面这种写法,当出现多种类型的button,就会显得杂乱无章,当然,很多人会选择去封装一个button组件,那么这个组件的封装,又是一个技巧点,利用VUE的render函数,减少不必要的template,因此我们可以这样写
// 创建一个button.vue文件 写法如下
// 引入
I am Home
根据value来显示不同类型的button,我们只需要通过value去修改type,text等,就可以实现这一目的,而不需要去创建多个,通过v-if去判断
「路由分区以及动态添加路由」
总路由管理文件 - index.js
分区路由
- index.routes.js
- login.routes.js
在大型项目中,往往会有很多互不关联的模块,例如电商平台中的商城,个人信息,这种情况下就可以对路由进行
// 总路由管理文件 index.js 写法import Vue from 'vue'import VueRouter from 'vue-router'Vue.use(VueRouter)const routerList = [] // 路由数组 - 存放所有路由function importAll(routerArr){ // 该函数用于将所有分区路由中的路由添加到路由数组 routerArr.keys().forEach( key => { console.log(key) routerList.push(routerArr(key).default) })}importAll(require.context('.',true,/.routes.js/))const routes = [ ...routerList]const router = new VueRouter({ routes})export default router
总结:这些方法看似简单,但运用起来能给我们的开发带来不小的便利,理解其中的理念去减少代码量,减少冗余,在合适的场景下使用合适的方法才能提高自己的能力
更多推荐
vue main.js中引入js_VUE实战技巧,让你的代码少一点
发布评论