百度容易收录的网站,学生个人主页模板,网站建设拟解决问题,山西省两学一做网站UI是页面的门面#xff0c;一个好的UI自然令人赏心悦目#xff1b;国人团队开发的ElementUI在众多UI中较为常见#xff0c;因此通过介绍它的使用让大家更好的了解第三方UI的使用。 安装 Npm install element-plus --save 或 Cnpm install element-plus --save 配置
全局配置… UI是页面的门面一个好的UI自然令人赏心悦目国人团队开发的ElementUI在众多UI中较为常见因此通过介绍它的使用让大家更好的了解第三方UI的使用。 安装 Npm install element-plus --save 或 Cnpm install element-plus --save 配置
全局配置完整 main.js import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./router
// 全局element-plus
import ElementPlus from element-plus
import element-plus/dist/index.cssconst app createApp(App)app.use(createPinia())
app.use(router)
//启用element-plus
app.use(ElementPlus)app.mount(#app)
使用 app.vue script setup
import { RouterLink, RouterView } from vue-router
import HelloWorld from ./components/HelloWorld.vue
/scripttemplateheaderimg altVue logo classlogo src/assets/logo.svg width125 height125 /div classwrapperHelloWorld msgYou did it! /navRouterLink to/Home/RouterLinkRouterLink to/aboutAbout/RouterLink/nav/div/headerRouterView /div classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-button/div
/template
效果 字体图标配置
安装字体图标 npm install element-plus/icons-vue 配置 main.js import ./assets/main.cssimport { createApp } from vue
import { createPinia } from piniaimport App from ./App.vue
import router from ./router
// 全局element-plus
import ElementPlus from element-plus
import element-plus/dist/index.css
//全局引用图标字体
import * as ElementPlusIconsVue from element-plus/icons-vueconst app createApp(App)app.use(createPinia())
app.use(router)
//启用element-plus
app.use(ElementPlus)
//启用图标字体
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}app.mount(#app)
使用
script setup
import { RouterLink, RouterView } from vue-router
import HelloWorld from ./components/HelloWorld.vue
//导入图标
import {Edit} from element-plus/icons-vue;
/scripttemplateheaderimg altVue logo classlogo src/assets/logo.svg width125 height125 /div classmb-4el-buttonDefault/el-buttonel-button typeprimaryPrimary/el-buttonel-button typesuccessSuccess/el-buttonel-button typeinfoInfo/el-buttonel-button typewarningWarning/el-buttonel-button typedangerDanger/el-buttonel-icon :size90 colorredEdit //el-icon/divdiv classwrapperHelloWorld msgYou did it! /navRouterLink to/Home/RouterLinkRouterLink to/aboutAbout/RouterLink/nav/div/headerRouterView //template
效果
