vue3引入elementui和vuetify一块使用

最新推荐文章于 2024-09-12 10:03:29 发布

Robinson、

最新推荐文章于 2024-09-12 10:03:29 发布

阅读量772

点赞数 1

文章标签： elementui vue.js

本文链接：https://blog.csdn.net/qq_25055051/article/details/129419262

版权

1，新建项目

D:\vueProject>vue create vue3project1


Vue CLI v5.0.8
? Please pick a preset: Default ([Vue 3] babel, eslint)


Vue CLI v5.0.8
✨  Creating project in D:\vueProject\vue3project1.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 857 packages in 19s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 102 packages in 4s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project vue3project1.
👉  Get started with the following commands:

 $ cd vue3project1
 $ npm run serve

 WARN  Skipped git commit due to missing username and email in git config, or failed to sign commit.
       You will need to perform the initial commit yourself.

2.引入 vuetify

命令：vue add vuetify

D:\vueProject\vue3project1>vue add vuetify
 WARN  There are uncommitted changes in the current repository, it's recommended to commit or stash them first.
? Still proceed? Yes

📦  Installing vue-cli-plugin-vuetify...


added 10 packages in 3s
✔  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Vuetify 3 - Vue CLI (preview)

🚀  Invoking generator for vue-cli-plugin-vuetify...
📦  Installing additional dependencies...


added 13 packages in 3s
⚓  Running completion hooks...

✔  Successfully invoked generator for plugin: vue-cli-plugin-vuetify
 vuetify  Discord community: https://community.vuetifyjs.com
 vuetify  Github: https://github.com/vuetifyjs/vuetify
 vuetify  Support Vuetify: https://github.com/sponsors/johnleider

3.引入element ui

命令：npm install element-plus --save

D:\vueProject\vue3project1>npm install element-plus --save

added 20 packages in 18s

D:\vueProject\vue3project1>

4.修改main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { loadFonts } from './plugins/webfontloader'

// 引入elementui
import ElementUI from 'element-plus'
import 'element-plus/theme-chalk/index.css'


loadFonts()

createApp(App)
  .use(vuetify)
  .use(ElementUI)//  引入elementui
  .mount('#app')

5.完成