Vue基础27之VueUI组件

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

<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-picker
        type="daterange"
        align="right"
        unlink-panels
        range-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-datePicker
        type="daterange"
        align="right"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
       >
    </expecial-datePicker>
  </div>
</template>

<script>
export default {
  name: "App",
}
</script>

<style>
.input{
  width: 200px;
  margin-top: 10px;
}
</style>