v3的全局组件使用和使用app.use

让vscode认识@符号并提出提示

修改tsconfig.json,增加如下配置

{
  "compilerOptions": {
    // ...
    "baseUrl": ".",
    "paths": {
      "@/*": ["src/*"]
    }
  }
}

配置路径别名-方便导入艾特使用

核心步骤：

1. 添加配置
2. 安装包

在vite.config.ts中增加配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 这里使用nodejs的模块，可能会报错，需要安装node的类型声明文件
const path = require('path')
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src')
    }
  }
})

需要安装node的类型声明文件 npm i @types/node -D
注意：修改完 vite.config.ts 文件需要重启

全局组件的使用-基本使用

const app = createApp(App)
app.component("组件名", 组件对象）

例子：

const app = createApp(App)
// v3的全局组件
import XtxSkeleton from '@/components/XtxSkeleton/XtxSkeleton.vue'
app.component('XtxSkeleton',XtxSkeleton)

全局组件的使用-插件

使用app.use

1. 新建文件components/index.ts

// 统一的注册所有的全局组件
import XtxSkeleton from '@/components/XtxSkeleton/XtxSkeleton.vue'
// App 是在vue库中定义好的类型
import { App } from 'vue'
export default {
  install (app: App) {
    app.component('XtxSkeleton', XtxSkeleton)
  }
}

2. 在main.ts中全局注册

import XtxUI from './components'
const app = createApp(App)
app.use(XtxUI)