Vue常用PC端和移动端组件库、Element UI的基本使用(完整引入和按需引入)

1. Vue常用PC端和移动端组件库

提供常用的布局、按钮、输入框、下拉框等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
  4. NutUI: https://nutui.jd.com/#/

• PC端常用UI组件库

  1. Element UI: https://element.eleme.cn 或 https://element-plus.org(Vue3)
  2. IView UI: https://www.iviewui.co
  3. Ant Design: https://www.antdv.com/docs/vue/introduce-cn

2. Element UI的基本使用

先安装依赖包

D:\vue3_project>cnpm i element-ui

2.1 完整引入

1. main.js。完整引入ElementUI组件库和全部样式，再使用组件。也可以进行国际化的设置

import Vue from 'vue'
import App from './App.vue'

// 完整引入
// 引入ElementUI组件库
import ElementUI from 'element-ui'
// 引入ElementUI全部样式
import 'element-ui/lib/theme-chalk/index.css'


Vue.config.productionTip = false

// 使用插件
Vue.use(ElementUI);


const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

2. App.vue

• 使用了原生的按钮
• 使用了组件的Button按钮基础用法，并提供了很多可选的Icon图标
• 使用了组件的DatePicker日期选择器

<template>
  <div>
    <!-- 原生的按钮 -->
    <button>原生的按钮</button>
    <input type="text">


    <!-- Button 按钮-基础用法: https://element.eleme.cn/#/zh-CN/component/button#ji-chu-yong-fa -->
    <!-- el-row是组件标签 -->
    <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>

    <el-row>
      <!-- 可用的icon可以查看: Icon 图标-图标集合: https://element.eleme.cn/#/zh-CN/component/icon#tu-biao-ji-he -->
      <el-button icon="el-icon-search" circle></el-button>
      <el-button type="primary" icon="el-icon-edit" circle></el-button>
      <el-button type="success" icon="el-icon-check" circle></el-button>
      <el-button type="info" icon="el-icon-message" circle></el-button>
      <el-button type="warning" icon="el-icon-star-off" circle></el-button>
      <el-button type="danger" icon="el-icon-delete" circle></el-button>
    </el-row>

    <!-- DatePicker 日期选择器-选择日: https://element.eleme.cn/#/zh-CN/component/date-picker#xuan-ze-ri -->
    <el-date-picker
        v-model="value1"
        type="date"
        placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>

	export default {
		name:'App'
	}
</script>

3. 效果如下。引入的依赖的js文件非常大
   

2.2 按需引入

babel-plugin-component是UI组件库专门进行按需引入的一个库。可以借助它来实现按需引入。先进行安装依赖

D:\vue3_project>cnpm install babel-plugin-component -D

1. babel.config.js。presets列表添加元素，再添加plugins属性

module.exports = {
  // 预设置
  presets: [
    '@vue/cli-plugin-babel/preset',    // 原先有的。解析vue相关的js文件的
    ["@babel/preset-env", { "modules": false }]    // 添加的
  ],
  "plugins": [    // 添加的
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}

2. main.js
   • 按需引入组件，再应用组件。样式会根据组件动态引入和应用
   • 可以自定义组件的名称，然后在vue组件中使用自定义的组件

import Vue from 'vue'
import App from './App.vue'

// 按需引入组件
import { Row,Button,DatePicker } from 'element-ui'

Vue.config.productionTip = false

// 应用ElementUI组件。样式会根据组件动态引入和应用
Vue.component(Button.name, Button)
Vue.component(Row.name, Row)
// 使用DatePicker.name, 即组件名称是: el-date-picker
// 如果使用'my-date-picker', 则组件名称是: my-date-picker
Vue.component(DatePicker.name, DatePicker)

const vm = new Vue({
    el: '#app',
    render: h => h(App)
})

3. 效果如下。引入的依赖的js文件小了很多