共计 650 个字符,预计需要花费 2 分钟才能阅读完成。
首先在 src 下创立一个 baseComponents
而后创立一个 index.js 在 baseComponents
在 src/baseComponents/index.js 写上面代码
import Vue from 'vue'; | |
// 获取指定目录下的所有组件文件 | |
const components = require.context('./', false, /\.vue$/); | |
// 遍历组件文件 | |
export default Vue => {components.keys().forEach(fileName => { | |
// 提取组件名 | |
const componentName = fileName.replace(/^\.\//, '').replace(/\.\w+$/,''); | |
// 获取组件选项对象 | |
const componentConfig = components(fileName); | |
// 全局注册组件 | |
Vue.component(componentName, componentConfig.default || componentConfig); | |
}); | |
} |
还要去 src/main.js 文件写上
import baseComponents from "./baseComponents"; | |
// 注册全局组件 | |
Vue.use(baseComponents); |
接下来你就能够在 src/baseComponents 的文件夹外面减少你想要组件了。
比方 src/baseComponents/background.vue
而后在你须要用的中央间接用 <background/> 就能够应用了
正文完