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 组件库

1. Vant

https://youzan.github.io/vant

2. Cube UI

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

3. Mint UI

http://mint-ui.github.io

PC 端常用 UI 组件库

1. Element UI

https://element.eleme.cn

2. 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

按需引入

安装 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