vue3创建项目 添加element-ui

Posted 2022-12-23 安果移不动

 创建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')

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

 然后改为按需引入

源文件

 修改后

首先安装两款插件

yarn -D 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()],
        ),],
)