vite+vue使用elementPlus/antDesign按需引入

ddestinyzz

已于 2023-02-15 08:52:37 修改

阅读量460

点赞数

文章标签： vue.js 前端 javascript

于 2023-02-14 17:10:03 首次发布

本文链接：https://blog.youkuaiyun.com/qq_52563030/article/details/129030012

版权

本文指导如何使用Vite创建一个Vue项目，集成vue-router、ElementPlus库，并安装相关插件如unplugin-auto-import和unplugin-vue-components。接着引入AntDesignVue，并在vite.config.ts中配置这两个UI框架的自动导入和组件解析。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.创建一个vue项目

npm init vite@latest m-component -- --template vue-ts

npm i

npm run dev

2.安装elementPlus和路由

npm i -S vue-router@next element-plus

3.安装插件

npm install -D unplugin-vue-components unplugin-auto-import

4.然后把下列代码插入到Vite的配置文件中(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()],
    }),
  ],
})

5.使用antDesign-----下载

npm i --save ant-design-vue

6.配置vite.config.ts

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver ,AntDesignVueResolver} from 'unplugin-vue-components/resolvers'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver(),AntDesignVueResolver()],
    }),
  ],
  server:{
    port:1102
  }
})