vue中有很多基础的组件可以自动化注册使用
在src/components下面创建 baseComponents/BaseVue.vue
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
import upperFirst from 'lodash/upperFirst'//应用模块
import camelCase from 'lodash/camelCase'//转为驼峰命名
Vue.config.productionTip = false
/* eslint-disable no-new */
// 全局导入组件
const requireComponent = require.context(
// 其组件目录的相对路径
'./components/baseComponents',
// 是否查询其子目录
false,
// 匹配基础组件文件名的正则表达式, 这里可以匹配的文件名为BaseXxxx.vue格式
/Base[A-Z]\w+\.(vue|js)$/
)
requireComponent.keys().forEach(fileName => {
// 获取组件配置
const componentConfig = requireComponent(fileName)
// 获取组件的 PascalCase 命名
const componentName = upperFirst(
camelCase(
// 剥去文件名开头的 `'./` 和结尾的扩展名
fileName.replace(/^\.\/(.*)\.\w+$/, '$1')
)
)
// 全局注册组件
Vue.component(
componentName,
// 如果这个组件选项是通过 `export default` 导出的,
// 那么就会优先使用 `.default`,否则回退到使用模块的根。
componentConfig.default || componentConfig
)
})
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
二、使用的话 直接要在想使用的页面:
<BaseVue></BaseVue>
Vue基础组件自动化全局注册
最新推荐文章于 2023-03-08 11:50:17 发布