在src/components文件夹目录下创建一个index.ts文件
import { App, Component } from 'Vue'
import SvgIcon from '@/components/SvgIcon/index.vue'
import Pagination from '@/components/Pagination/index.vue'
const globalComponents: { [name: string]: Component } = { SvgIcon, Pagination }
export default {install(app: App) {// 遍历注册每一个组件Object.keys(globalComponents).forEach((key) => {app.component(key, globalComponents[key])})},
}
main.ts
// SVG图标引入(插件来注册组件,也不要删除这句!!!)
import 'virtual:svg-icons-register'
// 引入插件:注册全局组件
import gloablComponent from './components/index';
// 使用
app.use(gloablComponent);
遇到的问题
引入vue文件报红线:Cannot find module ‘@/views/xxx.vue‘ or its corresponding type declarations
解决: 本目录创建env.d.ts文件
// 因为ts只能解析 .ts 文件,无法解析 .vue文件
declare module '*.vue' {import { DefineComponent } from 'vue'const component: DefineComponent<{}, {}, any>export default component
}