关于Tui组件,因还没有正式发布到npm上,还无法像ElementUi&Antd的依赖安装的方式引入;目前只能按以下方式引入(后续我会发布npm)
一、个人对组件注册的理解(仅仅是个人理解)
组件注册分两种:全局注册和局部注册(即单个页面引入注册);就我个人:通常我会把基础组件(整个项目超过60%以上的页面都会使用的组件——通常设定为基础组件)全局注册;而业务组件(指定针对某一个页面而封装的组件,里面存着单个页面的业务逻辑——通常设定为业务组件)就是单个页面引入注册
二、全局注册方法
1、第一种(传统方式)
// 在main.js中如下配置
import XXX from "路径"
Vue.component("名字要是字符串的格式",XXX)
2、第二种利用webpack的方式(require.context)
import Vue from 'vue'
// 全局自动注册baseComponents下的基础组件
const requireComponent = require.context('./baseComponents', true, /\.vue$/)
// 找到组件文件夹下以.vue命名的文件,如果文件名为index,那么取组件中的name作为注册的组件名
requireComponent.keys().forEach(filePath => {
const componentConfig = requireComponent(filePath)
const fileName = validateFileName(filePath)
const componentName = fileName.toLowerCase() === 'index'
? capitalizefirstLetter(componentConfig.default.name)
: fileName
Vue.component(componentName, componentConfig.default || componentConfig)
})
// 首字母大写
function capitalizefirstLetter (str) {
return str && str.charat(0).toupperCase() + str.slice(1)
}
// 对符合'xx/xx.vue'组件格式的组件取组件名
function validateFileName (str) {
return /^\S+\.vue$/.test(str) &&
str.replace(/^\S+\/(\w+)\.vue$/, (rs, $1) => capitalizefirstLetter($1))
}
然后在main.js如下注册(即可全局使用)
import './components/index.js' // 全局基础组件注入
3、第三种(用install,就以我封装的Tui为例)Tui gitHub组件地址
1、找到 packages下的index.js(以下是关键代码)
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,则所有的组件都将被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
install.installed = true
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
...components, // 按需引入
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
install
}
2、main.js中如下注册(即可全局使用)
import Tui from '../packages'
三、按需引入(局部注册)
// 在某个页面如下引入
import XXX from "路径"
export default {
components:{
XXX
}
}
四、组件地址
五、相关文章
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。