全局组件注册
高频率使用的组件，我们不要再傻傻的用import单个引入了，弊端：既笨拙，繁琐又低效
我们要对高频率使用的组件放在一个单独文件下，用单独的js文件管理3343
index.js
// 首字母大写，返回整个字符串
function changeStr(str) {
return str.chartAt(0).toUpperCase() + str.slice(1);
}
// 通过webpack的API
// false 是否匹配同级下的子目录，查找vue结尾的文件
const requireComponent = require.context('./', false, /\.vue$/);
// 返回当前目录文件下带vue的文件
const install = (Vue) => {
requireComponent.keys().forEach(fileName => {
// 获取第i个组件
let config = requireComponent(fileName);
// 获取组件名字
let component = changeStr(
fileName.replace(/^\.\//, '').replace(/\.\w+$/, '');
)
Vue.component(componentName, config.default || config);
});
}
export default {
install,
}
main.js文件
import index from '@/components/component/index.js';
// 全局注册
Vue.use(index);
路由文件引入配置
对于业务逻辑很强大，有很多子页面，路由配置都按模块单独分开写，还可实现页面懒加载，当要使用当前页面文件时，才加载，不会项目一启动就全部加载出来
index.routes.js
export default {
path: './index',
name: 'index',
component: () => import('@/views/index.vue'),
childer: [], // 配置子路由
}
router.js
import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from '@/views/Home.vue';
Vue.use(VueRouter);
// 分区存放路由功能模块
const routerList = [];
function importAll(r) {
r.keys().forEach(
(key) => routerList.push(r(key).default); // 拿到页面类的default
)
}
importAll(require.context('../index.router.js', true, /\.routes\.js/));
// 存放核心路由文件
const routes = [
{
path: '/',
name: 'Home',
component: Home,
},
...routerList,
]
Render函数
弥补template的不足而生的，在template里面，存在一值多判断
如下文件示例，就是傻瓜式低级操作
Render.vue
<template>
<div class="render">
<button v-if = "value === 1">按钮一</button>
<button v-else-if = "value === 2"> 按钮二</button>
<button v-else> 按钮三</button>
</div>
</template>
<script>
export default {
data() {
return {
value: 1,
}
}
}
</script>
如下文件，高级骚操作
Render.vue
<template>
<div class="render">
<Button :type="type" :text="text" @myEvent="parDom"/>
</div>
</template>
<script>
import Button from './button.vue';
export default {
data() {
return {
value: 1,
type: 'success',
text: '成功按钮',
};
},
components: {
Button,
},
methods: {
parDom() {
console.log('我要飞机');
},
},
};
</script>
button.vue
<script>
export default {
props: {
type: {
type: String,
default: 'normal',
},
text: {
type: String,
default: 'normal',
},
},
// h 是用来创建dom的
render(h) {
// render 与template创建的dom的区别
// 同点：都是类编辑器
// 不同点：template制造的是虚拟dom,在转译时，转译成vNode节点
// render函数直接生成真实节点，免去了转译过程
return h('button', {
// 等同于:class
class: {
// 使用.btn的样式
btn: true,
'btn-success' : this.type === 'success',
'btn-warning' : this.type === 'warning',
'btn-danger' : this.type === 'danger',
'normal' : !this.type,
},
// dom属性
domProps: {
innerText: this.text || '默认按钮',
},
// 绑定方法
on: {
click: this.handleClick,
}
})
},
data() {
return {
};
},
methods: {
handleClick() {
this.$emit('myEvent');
},
},
};
</script>
<style>
.btn {
width: 100px;
height: 30px;
color: #fff;
}
.btn-success {
background: green;
}
.btn-warning {
background: yellow;
}
.btn-danger {
background: red;
}
</style>
组件权限判断组件显隐
组件显隐，用display: block/none; 太low啦，任何一个会F12的，有可能一改，如果后台逻辑处理的不够好，就会造成系统崩溃
array.js
export function checkArray(key) {
let arr = ['success', '2', '3', '4', 'demo'];
let index = arr.indexOf(key);
if (index > -1) {
return true;
} else {
return false;
}
}
main.js
import checkArray from '../array';
Vue.directive('display-key', {
inserted (el, binding) {
let displayKey = binding.value;
if (displayKey) {
let hs = checkArray(displayKey);
if (!hs) {
el.parentNode && el.parentNode.removeChild(el);
} else {
// 抛出异常
throw new Error('need Key! Like v-display-key = "displayKey"');
}
}
}
})
button.vue
<template>
<div class="render">
<Button v-display-key="'success'" :type="type" :text="text" @myEvent="parDom"/>
</div>
</template>
<script>
import Button from './button.vue';
export default {
data() {
return {
value: 1,
type: 'success',
text: '我是权限成功按钮',
};
},
components: {
Button,
},
methods: {
parDom() {
console.log('我要飞机');
},
},
};
</script>
