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

这篇具有很好参考价值的文章主要介绍了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简介很多。自动导入也是推荐的一种写法我们注释掉全局引用

vue3 vite直接创建项目添加 element-ui 按需引入和全部引入,# vue,前端,javascript,vue.js

然后改为按需引入

源文件

vue3 vite直接创建项目添加 element-ui 按需引入和全部引入,# vue,前端,javascript,vue.js

修改后

首先安装两款插件

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

修改后文章来源地址https://www.toymoban.com/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()],
        }),],
})

到了这里，关于vue3 vite直接创建项目添加 element-ui 按需引入和全部引入的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！