Vue的小技巧

1.自动注册组件(require.context)

components/index.js  将其封装成vue插件，提供install

const requireComponents = require.context("./common", false, /\.vue$/);

console.log(requireComponents.prototype);

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

const install = Vue => {
  // requireComponents.keys()----["./MyButton.vue"]
  requireComponents.keys().forEach(filename => {
    const config = requireComponents(filename); //vue的实例
    // filename ---- ./MyButton.vue
    // 进行转化得到 MyButton,另外防止有小写，进行首字母转化
    const componentName = toFirstUpper(
      filename.replace(/\.\//, "").replace(/\.\w+$/, "")
    );
    // 全局注册组件
    Vue.component(componentName, config.default || config);
  });
};

export default {
  install
};

main.js 使用插件

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import MyComponent from "./components/index";
Vue.use(MyComponent); //使用自动注册的插件

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount("#app");

Home.vue  页面演示，因为是全局注册的，可以直接使用

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <my-button type="warning"></my-button>
  </div>
</template>

<script>
export default {
  name: "Home",
  components: {}
};
</script>

components/common/MyButton.vue

<template>
  <button :class="`btn btn-${type}`">测试按钮</button>
</template>

<script>
export default {
  name: "MyButton",
  props: {
    type: {
      type: String,
      default: "normal"
    }
  }
};
</script>

<style lang="scss" scoped>
.btn {
  padding: 0 16px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  font-size: 16px;
  color: #333333;
  &-warning {
    color: #ffffff;
    background-color: #ffae00;
  }
  &-danger {
    color: #ffffff;
    background-color: red;
  }
}
</style>

2. 同样，可以用require.context来自动注册路由

router/index.js  路由的注册

import Vue from "vue";
import VueRouter from "vue-router";

Vue.use(VueRouter);

let routes = [];

//根据目录下的文件，自动进行路由的注册
const requireViews = require.context("@/views", true, /\.vue$/);

requireViews.keys().forEach(filename => {
  // ["./About.vue", "./Home.vue"]
  const view = filename.replace(/\.\//, "").replace(/\.\w+$/, "");
  /**
   * path 进行小写
   * name的话有目录嵌套就用-隔开，字母小写
   * component 用路由懒加载
   */
  const route = {
    path: `/${view.toLowerCase()}`,
    name: view.toLowerCase().replace("/", "-"),
    component: () =>
      import(/* webpackChunkName: "about" */ `../views/${view}.vue`)
  };
  routes.push(route);
  console.log(routes);
});

const router = new VueRouter({
  mode: "history",
  base: process.env.BASE_URL,
  routes
});

export default router;

效果如下：