vue开发小技巧(持续更新)

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>