vue项目优化

1.动态加载组件

说明：比如在component文件下有很多的组件，在其他的组件引入，势必会有很多的import的引入，麻烦，所以动态引入在main.js，之后在其他的vue文件中直接使用，无需导入

//cptsRegister.js文件

import Vue from 'vue'

function capitalizeFirstLetter (str) {
    return str.charAt(0).toUpperCase() + str.slice(1)
}

// 用来匹配.vue的前缀函数
function validateFileName(str) {
    return /^\S+\.vue$/.test(str) && str.replace(/^\S+\/(\w+)\.vue$/, (res, $1) => capitalizeFirstLetter($1))
}


const requireComponent = require.context('./', true, /\.vue$/)

// 遍历匹配到的文件夹及文件名，并且遍历得到每一个
requireComponent.keys().forEach(filePath => {
    
    // 得到每一个.vue文件中的属性方法和组件的name值
    const componentConfig = requireComponent(filePath)
    // 得到文件名的前半部分index
    const fileName = validateFileName(filePath)
    // 判断如果是以index开头命名的就返回组件的name值来注册组件，否则就使用文件名来注册
    
    const componentName = fileName.toLowerCase() === 'index' ? capitalizeFirstLetter(componentConfig.default.name) : fileName
    Vue.component(componentName, componentConfig.default || componentConfig)
})



// main.js
//在main.js引入
import './components/cptsRegister.js'

目录结构：

2.全局过滤器的优化

说明：如果有很多的全局过滤器，一个一个注册很麻烦，所以一次性注册所以过滤器

// filterRegister.js

const filters = {
    compNumber: function (title) {
        return title + '张雪冬'
    }
}

export default filters



// main.js

// 全局注册所有的过滤期

import filterRegister from './utils/filterRegister.js'

for (let key in filterRegister) {
  Vue.filter(key, filterRegister[key])
}

目录结构：

3.封装复用的组件

说明：就是需要在很多组件中使用的组件

// index.js
// 设置复用组件
import Vue from 'vue'

import toast from './toast'

let myMulti = {

    // 封装的复用组件
    toast (text, duration) {

        let ToastConstructor = Vue.extend(toast)

        toast.props.text = text

        let toastDom = new ToastConstructor({
            el: document.createElement('div')
        })
        document.body.appendChild(toastDom.$el)
    
        toastDom.text = text
        toastDom.duration = duration
    
        setTimeout(() => {
            toastDom.isShow = false
        }, toastDom.duration)

    }
}

export default myMulti


// main.js

// 封装的可服用的组件，挂载到Vue的原型上
import multiIndex from './multi-cpts/index.js'
for (let key in multiIndex) {
  Vue.prototype.$multi = multiIndex[key]
}

目录结构：