Vue的装逼小技巧小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。本文同时参与「掘力星计划」，赢取

小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。

本文同时参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

vue+webpack 自动化引入模块

在开发中大型项目时，会将一个大功能拆分成一个个小功能，除了能便于模块的复用，也让模块条理清晰，后期项目更好维护。

像 api 文件一般按功能划分模块，在组合时可以使用 require.context 一次引入文件夹所有的模块文件，而不需要逐个模块文件去引入。每当新增模块文件时，就只需要关注逻辑的编写和模块暴露，require.context 会帮助我们自动引入。

需要注意 require.context 并不是天生的，而是由 webpack 提供。在构建时，webpack 在代码中解析它。

let importAll = require.context('./modules', false, /\.js$/)

class Api extends Request{
    constructor(){
        super()
        //importAll.keys()为模块路径数组
        importAll.keys().map(path =>{
            //兼容处理：.default获取ES6规范暴露的内容; 
            //后者获取commonJS规范暴露的内容
            let api = importAll(path).default || importAll(path)
            Object.keys(api).forEach(key => this[key] = api[key])
        })
    }
}

export default new Api()

require.context 参数：

文件夹路径
是否递归查找子文件夹下的模块
模块匹配规则，一般匹配文件后缀名

只要是需要批量引入的场景，都可以使用这种方法。包括一些公用的全局组件，只需往文件夹内新增组件即可使用，不需要再去注册。如果还没用上的小伙伴，一定要了解下，简单实用又能提高效率。

vue--优雅的注册组件

插件通常用来为 Vue 添加全局功能。像常用的 vue-router、vuex 在使用时都是通过 Vue.use 来注册的。Vue.use 内部会自动寻找 install 方法进行调用，接受的第一个参数是 Vue 构造函数。

一般在使用组件库时，为了减小包体积，都是采用按需加载的方式。

如果在入口文件内逐个引入组件会让 main.js 越来越庞大，基于模块化开发的思想，最好是单独封装到一个配置文件中。配合上 Vue.use，在入口文件使用能让人一目了然。

首先我们设置一个中间文件

config.js

import {
  Backtop,
  Button
} from 'element-ui'

const components = {
  Backtop,
  Button
}

const componentsHandler = {
  install(Vue){
    Object.keys(components).forEach(key => Vue.use(components[key]))
  }
}

export default componentsHandler

main.js:

import Vue from 'vue'
import elementCompoents from '@/config/config'

Vue.config.productionTip = false

Vue.use(elementCompoents)

new Vue({
  render: h => h(App)
}).$mount('#app')

vue异步组件

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染

Vue.component('async-example', function (resolve, reject) {
  setTimeout(function () {
    // 向 `resolve` 回调传递组件定义
    resolve({
      template: '<div>I am async!</div>'
    })
  }, 1000)
})

这个工厂函数会收到一个 resolve 回调，这个回调函数会在你从服务器得到组件定义的时候被调用。你也可以调用 reject(reason) 来表示加载失败。这里的 setTimeout 是为了演示用的，如何获取组件取决于你自己。

使用局部注册的时候，你也可以直接提供一个返回 Promise 的函数：

'my-component': () => import('./my-async-component')

Vue的装逼小技巧