让vscode认识@符号并提出提示
修改tsconfig.json,增加如下配置
{
"compilerOptions": {
// ...
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
}
}
}
配置路径别名-方便导入艾特使用
核心步骤:
- 添加配置
- 安装包
在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
- 新建文件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)
}
}
- 在main.ts中全局注册
import XtxUI from './components'
const app = createApp(App)
app.use(XtxUI)