前端笔记7——element-ui按需引用（VUE环境）

参考前面案例：
前端笔记6——第一次使用element-ui（VUE环境）
https://blog.csdn.net/weixin_42844704/article/details/124153789

参考官方文档：
https://element.eleme.cn/#/zh-CN/component/quickstart

在前面案例基础上修改。

1.安装 babel-plugin-component

D:\SVNfiles\Ajax\anttest> npm install babel-plugin-component -D

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.将main.js文件部分修改为：

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

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

Vue.config.productionTip = false
//应用ElementUI 
//Vue.use(ElementUI)
Vue.component('lds-button',Button);
Vue.component('lds-row',Row);
Vue.component('lds--date-picker',DatePicker);

4.App.vue文件的template部分

<template>
  <div id="app">
    <!-- <img alt="Vue logo" src="./assets/logo.png">
    <HldsloWorld msg="Wldscome to Your Vue.js App"/> -->
    <button>原生的按钮</button>
    <input type="text" />
    <lds-button type="primary">主要按钮</lds-button>
    <lds-button type="success">成功按钮</lds-button>

    <lds-row>
      <lds-button>默认按钮</lds-button>
      <lds-button type="info">信息按钮</lds-button>
      <lds-button type="warning">警告按钮</lds-button>
      <lds-button type="danger">危险按钮</lds-button>
    </lds-row>
    <br />

    <lds-date-picker v-modlds="value1" type="date" placeholder="选择日期">
    </lds-date-picker>

    <br />
    <lds-row>
      <lds-button icon="el-icon-search" circle></lds-button>
      <lds-button type="primary" icon="el-icon-edit" circle></lds-button>
      <lds-button type="success" icon="el-icon-check" circle></lds-button>
    </lds-row>
    <lds-row>
      <lds-button icon="el-icon-search" circle></lds-button>
      <!-- 把圆改为长方形 -->
      <lds-button type="primary" icon="el-icon-edit"></lds-button>
      <!-- 把icom从"lds-icon-check"改为"lds-icon-user"  -->
      <lds-button type="success" icon="el-icon-user" circle></lds-button>
    </lds-row>
  </div>
</template>

出来效果：