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;
效果如下: