?創(chuàng)建home 工程
yarn create vite home --template vue cd home
yarn
yarn dev
yran dev就可以看到一個網(wǎng)址 點進去就可以看到效果了
添加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簡介很多 。自動導入也是推薦的一種寫法 我們注釋掉全局引用
?然后改為按需引入
源文件
?修改后
首先安裝兩款插件文章來源：http://www.zghlxwxcb.cn/news/detail-581483.html
yarn add unplugin-vue-components unplugin-auto-import修改后文章來源地址http://www.zghlxwxcb.cn/news/detail-581483.html
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()],
}),],
})
到了這里，關(guān)于vue3 vite直接創(chuàng)建項目 添加 element-ui 按需引入和全部引入的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
