vue3 vite直接创建项目添加 element-ui 按需引入和全部引入

安果移不动

已于 2023-02-18 15:14:54 修改

阅读量2.6k

点赞数 2

分类专栏： # vue 文章标签：前端 javascript vue.js

于 2022-12-21 23:18:12 首次发布

独学而无友，则孤陋寡闻。q群582951247

本文链接：https://blog.csdn.net/mp624183768/article/details/128403069

版权

vue 专栏收录该内容

106 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何使用Vite创建Vue3项目，并详细展示了如何全局和按需引入Element Plus组件库。通过unplugin-auto-import和unplugin-vue-components插件，实现了自动导入和按需加载，简化了项目配置。

摘要由CSDN通过智能技术生成

创建home 工程

yarn create vite home --template vue

 cd home
  yarn
  yarn dev

yran dev就可以看到一个网址点进去就可以看到效果了

添加element-ui

yarn add element-plus

全局引入（不推荐）

之前的main.js

import { createApp } from 'vue'



import './style.css'
import App from './App.vue'



createApp(App).mount('#app')

修改后的

import { createApp } from 'vue'

import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

import './style.css'
import App from './App.vue'



const app = createApp(App)

app.use(ElementPlus)
app.mount('#app')

按需引入（推荐，比vue2只能很多只需要引入一次即可）

element-plus 在vue3中的按需引入。要比2简介很多。自动导入也是推荐的一种写法我们注释掉全局引用

然后改为按需引入

源文件

修改后

首先安装两款插件

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

修改后

import {defineConfig} from 'vite'
import vue from '@vitejs/plugin-vue'


// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import {ElementPlusResolver} from 'unplugin-vue-components/resolvers'


// https://vitejs.dev/config/
export default defineConfig({
    plugins: [vue(), // ...
        AutoImport({
            resolvers: [ElementPlusResolver()],
        }), Components({
            resolvers: [ElementPlusResolver()],
        }),],
})