1、引入不同的组件库 按需加载时需要用vue.use()
1. 以前的写法
import VeeValidate from 'vee-validate'; // 表单验证
import { Button, Lazyload, Popup,Toast } from 'vant';
Vue.use(VeeValidate);
Vue.use(Button);
Vue.use(Lazyload); //图片懒加载
Vue.use(Popup);
Vue.use(Toast);
2. 优化 链式引用
import VeeValidate from 'vee-validate'; // 表单验证
import { Button, Lazyload, Popup,Toast } from 'vant';
Vue.use(VeeValidate).use(Button).use(Lazyload).use(Popup).use(Toast);
3. 组成数组 循环引入(这种适用于引入大量的组件时)
import VeeValidate from 'vee-validate'; // 表单验证
import { Button, Lazyload, Popup,Toast } from 'vant';
const vantAllComponent=[VeeValidate,Button,Lazyload,Popup,Toast];
vantAllComponent.forEach(element => {
Vue.use(element);
});
2、页面导入多个组件
require.context('@/components/layout', true, /\.vue/) 该方法是指找到components/layout文件夹下所有已vue格式的文件
第一个参数是表示路径
第二个参数表示是否查找子文件
第三个参数表示匹配什么格式的文件
1.全局导入
const requireComponents = require.context('@/components/layout', true, /\.vue/);
let res_com={};
requireComponents.keys().forEach(fileName => {
// 组件实例
const reqCom = requireComponents(fileName);
// 截取路径作为组件名
const reqComName = fileName.split('/')[1];
Vue.component(reqComName, reqCom.default || reqCom) //挂载组件
res_com[reqComName]=reqCom;
});
console.log(res_com);
2.局部导入
const path = require('path');
const files = require.context('@/components/containers/home/bannerNotice', false, /\.vue$/);
const modules = {};
files.keys().forEach(key => {
const name = path.basename(key, '.vue');
modules[name] = files(key).default || files(key);
});
console.log(modules);
引入
components:modules
3、动态绑定class避免出现空类写法
虽然空类不影响代码运行 但是不符合html语意 能避免还是可以避免
<div :class="isActive?'active':''"></div>
当isActive=true时,渲染结果
<div class="active"></div>
当isActive=false时,渲染结果 空的class
<div class></div>
解决办法
1/
<div :class="isActive?'active':null"></div>
2/
<div :class="isActive?'active':undefined"></div>
3/对象方法
<div :class="{active:isActive}"></div>
4/这种写法 如果不想给有active类 isActive设置为null或者undefined 如果是false也会出现空类的情况
<div :class="isActive&&'active' "></div>