2.插件安装及注册

一、安装setup扩展插件

可以在使用setup语法糖时，直接设置组件name属性，安装命令

npm install vite-plugin-vue-setup-extend

在vite.config.ts中声明引入

import vueSetupExtend from 'vite-plugin-vue-setup-extend'

在导出的defineConfig中注册使用

export default defineConfig({
  plugins: [
//调用
  vueSetupExtend(),
]
}

实现效果

<script setup lang="ts" name="user">


</script>

二、安装vue官方的vscode插件

Vue Language Features (Volar)、

TypeScript Vue Plugin (Volar)

三、安装 element plus组件库

 //安装element-plus
npm i element-plus
 //安装图标库
npm i @element-plus/icons-vue

在main.ts中声明引用，并在app中注册使用

//引入element-plus插件及样式
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
//制定语言为中文
//@ts-ignore
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'



app.use(ElementPlus, {
  locale: zhCn,
})

四、安装svg图标库

1.安装

npm i vite-plugin-svg-icons

2.在vite.config.ts中声明引入并注册使用

//引入svg图标插件
import { createSvgIconsPlugin } from 'vite-plugin-svg-icons'

export default defineConfig({
  plugins: [
    vue(),
    vueSetupExtend(),
       //注册使用
    createSvgIconsPlugin({
      iconDirs: [path.resolve(process.cwd(), 'src/assets/icons')],
      symbolId: 'icon-[dir]-[name]'
      
    }),
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

3.在main.ts中引入svg配置代码

//svg插件需要的配置代码
import 'virtual:svg-icons-register'