Vue安装Element Plus全过程
作者:不情不愿
这篇文章主要介绍了Vue安装Element Plus全过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
Vue安装Element Plus
Element UI 是一款基于 Vue 的桌面端组件库,提供了丰富的PC端组件,简化了常用组件的封装,大大降低了开发难度。
随着 Vue 版本的更新,Element-UI 2.x 升级到了Element Plus 。
使用 Vue CLI 3 需要安装 Element Plus,具体方式如下:
npm全局安装
npm install element-plus --save
打开 package.json 文件可以查看是否安装成功以及安装的版本信息:
在main.js文件中引入
import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) app.mount('#app')
基本使用
App.vue
<template> <div id="app"> <h2>Element-UI 测试</h2> <el-row class="mb-4"> <el-button>Default</el-button> <el-button type="primary">Primary</el-button> <el-button type="success">Success</el-button> <el-button type="info">Info</el-button> <el-button type="warning">Warning</el-button> <el-button type="danger">Danger</el-button> <el-button>中文</el-button> </el-row> <el-row class="mb-4"> <el-button plain>Plain</el-button> <el-button type="primary" plain>Primary</el-button> <el-button type="success" plain>Success</el-button> <el-button type="info" plain>Info</el-button> <el-button type="warning" plain>Warning</el-button> <el-button type="danger" plain>Danger</el-button> </el-row> <el-row class="mb-4"> <el-button round>Round</el-button> <el-button type="primary" round>Primary</el-button> <el-button type="success" round>Success</el-button> <el-button type="info" round>Info</el-button> <el-button type="warning" round>Warning</el-button> <el-button type="danger" round>Danger</el-button> </el-row> <el-row> <el-button :icon="Search" circle /> <el-button type="primary" :icon="Edit" circle /> <el-button type="success" :icon="Check" circle /> <el-button type="info" :icon="Message" circle /> <el-button type="warning" :icon="Star" circle /> <el-button type="danger" :icon="Delete" circle /> </el-row> </div> </template>
运行结果
如下:
官网版本:
可以看到 icon 图标信息并没有成功显示。
这是因为,图标由在 Element-UI 版本中的样式,在Element Plus 中被封装成了一个个组件。
安装图标库
npm install @element-plus/icons-vue
然后在main.js中使用for循环
将图标以组件的形式全部引入:
import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import App from './App.vue' import * as ElIcon from '@element-plus/icons-vue' const app = createApp(App) for (let iconName in ElIcon){ app.component(iconName, ElIcon[iconName]) } app.use(ElementPlus) app.mount('#app')
需要通过标签的方式使用
<el-icon><Search/></el-icon>
App.vue
<template> <div id="app"> <h2>Element-UI 测试</h2> <br> <!-- 在组件中使用 --> <el-row> <el-button circle icon = "Search"></el-button> <el-button type="primary" circle icon = "Edit"></el-button> <el-button type="success" circle icon = "Check"></el-button> <el-button type="info" circle icon = "Message"></el-button> <el-button type="warning" circle icon = "Star"></el-button> <el-button type="danger" circle icon = "Delete"></el-button> </el-row> <br> <!-- 结合 el-icon 使用 --> <el-row> <el-icon><Search/></el-icon> <el-icon><Edit/></el-icon> <el-icon><Check/></el-icon> <el-icon><Message/></el-icon> <el-icon><Star/></el-icon> <el-icon><Delete/></el-icon> </el-row> </div> </template>
效果如下:
总结
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。