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

 创建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()],
        }),],
})