发布时间:2022-09-13 20:00
移动端常用UI组件库:
1.vant
2.Cube UI
3.Mint UI
4.https://nutui.jd.com/#/
PC端常用UI组件库:
1.Element UI
2.IView 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)
pycharm连接远程服务器的docker容器进行运行和调试代码
Office卸载不干净,注册表项权限修改后仍然无法删除的问题
鸿蒙系统 什么时候发布,鸿蒙系统3.0什么时候发布?鸿蒙系统3.0发布时间介绍...
一文讲透,商业智能BI的未来形态,发展现状及前景分析|推荐收藏
02-vue 侦听器 计算属性、单页面应用程序◆ vite 的基本使用 vue-cli vue 组件-props axios 的基本使用
linux克隆虚拟机、开机修改系统相关配置、修改 /etc/hostname ,修改主机名、查看network服务和NetworkManager服务