当前位置：首页 > news >正文

Vue基础27之VueUI组件

news 2025/8/14 5:24:43

Vue基础27

Vue UI组件库
- 移动端常用 UI 组件库
- PC 端常用 UI 组件库
- Element-ui插件
- - 基本使用
  - - 安装
    - 引入并使用
    - - main.js
      - App.vue
  - 按需引入
  - - 安装 babel-plugin-component
    - babel.config.js
    - main.js
    - App.vue

Vue UI组件库

移动端常用 UI 组件库

Vant

https://youzan.github.io/vant

Cube UI

https://didi.github.io/cube-ui

Mint UI

http://mint-ui.github.io

PC 端常用 UI 组件库

Element UI

https://element.eleme.cn

IView UI

https://www.iviewui.co

Element-ui插件

基于Vue框架的国产UI组件（饿了么出品）

基本使用

安装

npm i element-ui

在这里插入图片描述

引入并使用

main.js

import Vue from 'vue'import App from './App'//引入ElementUI组件库
import ElementUI from 'element-ui'
//引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css';//关闭vue的生产提示
Vue.config.productionTip = false//应用ElementUI
Vue.use(ElementUI)
new Vue({el: "#app",render: h => h(App),
})

App.vue

<template><div class="bg"><button>原生按钮</button><input type="text" placeholder="原生input框"><br> <br>
<!--    element-ui的引入--><el-button type="primary">主要按钮</el-button><div class="input"><el-input  placeholder="请输入内容"></el-input></div><br><el-button icon="el-icon-search" circle></el-button><br>
<!--    日期引入--><el-date-pickertype="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></el-date-picker></div>
</template><script>
export default {name: "App",
}
</script><style>
.input{width: 200px;margin-top: 10px;
}
</style>

在这里插入图片描述

按需引入

安装 babel-plugin-component

npm install babel-plugin-component -D

babel.config.js

module.exports = {presets: ['@vue/cli-plugin-babel/preset',["@babel/preset-env", { "modules": false }]],plugins: [["component",{"libraryName": "element-ui","styleLibraryName": "theme-chalk"}]]
}

main.js

import Vue from 'vue'import App from './App'// //引入ElementUI组件库
// import ElementUI from 'element-ui'
// //引入ElementUI全部样式
// import 'element-ui/lib/theme-chalk/index.css';//关闭vue的生产提示
Vue.config.productionTip = false//按需引入
import{Button,Row,DatePicker,Input} from "element-ui";// //应用ElementUI
// Vue.use(ElementUI)
Vue.component(Button.name,Button)
Vue.component(Row.name,Row)
Vue.component(Input.name,Input)
Vue.component('expecial-datePicker',DatePicker)new Vue({el: "#app",render: h => h(App),
})

App.vue

<template><div class="bg"><button>原生按钮</button><input type="text" placeholder="原生input框"><br> <br>
<!--    element-ui的引入--><el-row><el-button type="primary">主要按钮</el-button></el-row><div class="input"><el-input  placeholder="请输入内容"></el-input></div><el-row><el-button icon="el-icon-search" circle></el-button></el-row>
<!--    日期引入--><expecial-datePickertype="daterange"align="right"unlink-panelsrange-separator="至"start-placeholder="开始日期"end-placeholder="结束日期"></expecial-datePicker></div>
</template><script>
export default {name: "App",
}
</script><style>
.input{width: 200px;margin-top: 10px;
}
</style>