做个网站应该怎么做,东莞建网站平台,销售型网站建设的基本要素,绿色环保企业网站模板目录
第一章 vue2全局注册公共组件
1.1 方法一#xff1a;逐个注册
1.2 方法二#xff1a;批量注册
1.2.1 require.context()方法解释
第二章 vue3全局注册公共组件
1.1 方法一#xff1a;逐个注册
1.2 方法二#xff1a;批量注册 第一章 vue2全局注册公共组件
Vue…目录
第一章 vue2全局注册公共组件
1.1 方法一逐个注册
1.2 方法二批量注册
1.2.1 require.context()方法解释
第二章 vue3全局注册公共组件
1.1 方法一逐个注册
1.2 方法二批量注册 第一章 vue2全局注册公共组件
Vue.component() // vue2注册组件的方法
1.1 方法一逐个注册
import BreadCrumbs from /components/BreadCrumbs.vue
import HomeBanner from /components/HomeBanner.vue
import HomeBottom from /components/HomeBottom.vue
import TabChange from /components/TabChange.vue
import NewTabs from /components/NewTabs.vue
……export default {// vue2自带的方法install: function (Vue) {// 注册全局容器Vue.component(BreadCrumbs, BreadCrumbs)Vue.component(HomeBanner, HomeBanner)Vue.component(HomeBottom, HomeBottom)Vue.component(TabChange, TabChange)Vue.component(NewTabs, NewTabs)……},
}// 引入公共主键(上面的方法在该文件下)
import components from /plugin/components// 使用公共组件
Vue.use(components)1.2 方法二批量注册
import Vue from vue// vue2方法 —— 自动注册全局组件
const componentsContext require.context(./, true, /\.vue$/)componentsContext.keys().forEach((component) {const componentConfig componentsContext(component)/*** 兼容 import export 和 require module.export 两种规范*/const ctrl componentConfig.default || componentConfigVue.component(ctrl.name, ctrl)
})require.context()方法官网 require-context - npm 1.2.1 require.context()方法解释
const componentsContext require.context(./, true, /\.vue$/)console.log(componentConfig, componentsContext)
console.log(require,require.prototype) 通过控制台中打印require发现require其实就是就是一个函数 通过require的原型发现require的方法有三个属性id、key、resolve属性解释
resolve是一个函数并返回已解析请求的模块idkey函数是否返回上下文模块可以处理的所有可能请求的数组
require.context(directory,useSubdirectories,regExp)参数介绍
directory表示要检索的目录useSubdirectories表示是否检索目录下的子文件夹regExp匹配文件的正则表达式一般是文件名
例如
require.context(./, true, /\.vue$/) // 匹配该文件夹下.vue后缀的文件夹 第二章 vue3全局注册公共组件
app.component() // vue3注册组件的方法
1.1 方法一逐个注册
import BreadCrumbs from /components/BreadCrumbs.vue
import HomeBanner from /components/HomeBanner.vue
import HomeBottom from /components/HomeBottom.vue
import TabChange from /components/TabChange.vue
import NewTabs from /components/NewTabs.vue
……import { createApp } from vueconst app createApp(App)registerVantComponent(app)export default {registerVantComponent: function (app) {// 注册全局容器app.component(BreadCrumbs, BreadCrumbs)app.component(HomeBanner, HomeBanner)app.component(HomeBottom, HomeBottom)app.component(TabChange, TabChange)app.component(NewTabs, NewTabs)……},
}
1.2 方法二批量注册
方案一 import { defineAsyncComponent } from vue/*** description 自动将 ./src/components/global 下的组件注册成为全局组件* param app 当前应用实例* returns {void} void*/const components import.meta.glob(./*.vue)export function registerGlobalComponent(app) {// 组件注册成为全局组件for (const [key, value] of Object.entries(components)) {const name key.slice(key.lastIndexOf(/) 1, key.lastIndexOf(.))app.component(name, defineAsyncComponent(value))}
}方案二 /*** description 自动将 ./src/components/global 下的组件注册成为全局组件* param app 当前应用实例* returns {void} void*/export function registerGlobalComponent(app) {// 组件注册成为全局组件const components import.meta.globEager(./*)for (const path in components) {if (path.includes(.vue)) {let componentName path.match(/(.*)\.vue$/)[1]if (componentName.includes(./)) {componentName componentName.replace(./, )}const component components[path].defaultapp.component(componentName, component)}}
}
针对于vue3的批量注册小编提供了两种方案(注意vue3不支持require方法了)思路与vue2注册是一致的都可行的但是小编更推荐方案一因为方案二小编在项目上线的过程中遇到了低版本手机不兼容导致项目不兼容跑不动的bugimport.meta.glob()是一个 ES 模块的特殊属性用于动态导入多个模块该方法接受一个模式字符串作为参数并返回promise该Promise 析为一个对象该对象包含匹配该模式的所有模块的键值对该例子中import.meta.glob(./*.vue) —— ./ 表示同目录下(也可以自定义其他目录)* 表示任意名称.vue 后缀import.meta.globEager() 是 Webpack 5 和 Deno 这样的现代 JavaScript 环境中引入的一个特性用于异步加载模块和文件。meta 属性是 ES2020 中引入的它允许直接访问到 import 语句的元信息包括导入路径列表。globEager 是对 import.meta.glob 的增强版本它提供了立即同步加载所有匹配给定模式如 **/*.js的模块的能力。但是这个特性并非浏览器原生支持而是由一些工具如 Vite 或 Deno 提供的扩展。在使用浏览器环境中尝试使用它可能会遇到兼容性问题。
