常用UI 组件库
这里主要介绍 element-ui 的使用
安装：npm i element-ui
一、全部引入
src/main.js
import ElementUI from 'element-ui' // 导入全部组件 import 'element-ui/lib/theme-chalk/index.css'; // 导入全部样式 Vue.use(ElementUI) // 使用组件 二、按需引入
1.安装：npm i babel-plugin-component -D，我的一开始报错没有babel npm i babel
2.修改 babel.config.js
module.exports = {
presets: [ '@vue/cli-plugin-babel/preset', ["@babel/preset-env", {
"modules": false }] ], plugins: [ [ "component", {
"libraryName": "element-ui", "styleLibraryName": "theme-chalk" } ] ] } 3.示例
· 使用了三个el标签：el-date-picker el-row el-button
<div> <el-date-picker v-model="value1" type="datetime" placeholder="选择日期时间">
el-date-picker> <el-row> <el-button>默认按钮
el-button> <el-button type="primary">主要按钮
el-button> <el-button type="success">成功按钮
el-button> <el-button type="info">信息按钮
el-button> <el-button type="warning">警告按钮
el-button> <el-button type="danger">危险按钮
el-button>
el-row>
div> · 在main.js引入，每个单词首字母要大写
import {
Row,Button,DatePicker} from 'element-ui' // 引入时会自动引入样式 Vue.component(Row.name,Row) // 可以以全局组件形式使用（Row.name 等于 el-row，可以自行定义） Vue.use(Button) // 也可以像插件一样 use，默认叫 el-button Vue.use(DatePicker) 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请联系我们举报，一经查实，本站将立刻删除。
发布者：全栈程序员-站长，转载请注明出处：https://javaforall.net/222790.html原文链接：https://javaforall.net
