Vue3+Ts+Vite项目(第四篇)自动引入Element-Plus与ref、reactive等vue语法

一、安装Element-Plus

yarn add element-plus

二、配置按需自动导入
2.1、首先你需要安装 unplugin-vue-components 和 unplugin-auto-import 这两款插件

yarn add -D unplugin-vue-components unplugin-auto-import

2.2、在vite.config.ts添加如下配置

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
 
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
})

三、使用
在项目中可以直接使用element组建了
Element-lus官网：https://element-plus.org/zh-CN/

四、自动引入vue语法
4.1、在vite.config.ts中添加如下配置

 AutoImport({
      // 自动导入 Vue 相关函数，如：ref, reactive ...
      imports: ['vue', 'vue-router'],
      resolvers: [ElementPlusResolver()],
      eslintrc: {
        enabled: true,
      },
    }),

4.2、在tsconfig.json添加配置

"include": [
   "src/**/*.ts",
   "src/**/*.tsx",
   "src/**/*.vue",
   "./auto-imports.d.ts"
 ],