Vue深入之js文件全局声明和基础组件的全局注册
前言:有些时候,部分基础的js和vue组件会在不同的页面进行使用,但是每次只是用很少一部分,甚至只用一次,最后导致每个页面里面都会有很长一串的js或者基础组件的长列表,尤其在基础组件很多的时候,会让你头痛万分。下面将介绍如何进行全局注册(都是基于vue-cli)1.js文件全局注册 例如:把一个名为store.js的文件放在和main.js的同级目录下进行操作,先引入,再注册
·
前言:有些时候,部分基础的js和vue组件会在不同的页面进行使用,但是每次只是用很少一部分,甚至只用一次,最后导致每个页面里面都会有很长一串的js或者基础组件的长列表,尤其在基础组件很多的时候,会让你头痛万分。下面将介绍如何进行全局注册(都是基于vue-cli)
1.js文件全局注册
例如:把一个名为store.js的文件放在和main.js的同级目录下进行操作,先引入,再注册
其他页面是使用方法:this.$Store
2.vue基础组件全局注册
例如:在components的文件下创建一个base文件夹存放需要全局注册的基本组件(baseInput.vue baseSelect.vue)
在main.js文件添加以下代码:
import upperFirst from 'lodash/upperFirst'
import camelCase from 'lodash/camelCase' //因为在组件名字处理的时候会用到lodash的部分,所以引入
const requireComponent = require.context(
'./components/base', //当前基础组件相对与main.js的相对位置
false, //是否查询子目录
/base[A-Z]\w+\.(vue|js)$/ //匹配基础组件的名字的正则,如果base里面的组件都是基础组件,那么只需要将所有包含即可,这里因为我的组件都是base开头的
)
requireComponent.keys().forEach(fileName => {
const componentConfig = requireComponent(fileName) //获取组建配置
const componentName = upperFirst( //获取组件的 PascalCase 命名
camelCase(
fileName.replace(/^\.\/(.*)\.\w+$/, '$1') // 剥去文件名开头的 `'./` 和结尾的扩展名
)
)
// 全局注册组件
Vue.component(
componentName,
componentConfig.default || componentConfig
)
})
在App.vue里试试
成功:
更多推荐
已为社区贡献4条内容
所有评论(0)