zoukankan      html  css  js  c++  java
  • 使用elementUI组件来完成前台展示

    使用elementUI组件来完成前台展示,当然不是全部都用,有用到的时候,才用。

    网址:https://element.eleme.cn/#/zh-CN

    安装

    cnpm i element-ui -S

    快速上手

    全局配置,一次配置,全局好用,缺点:不管你用不用,都加载进来了。

    src/main.js文件中配置一下就可以了

    // 全局配置elementui组件
    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);

    在任意组件中都可以直接使用elementui组件了

    <template>
      <div class="box">
       <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>
      </div>
    </template>

    按需加载 

    # 安装babel插件

    cnpm install babel-plugin-component -D

    在项目根目录下面有一个babel.config.js中配置如下

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

    在组件,完成组件的显示效果 不要在el- 后面首字母大写 el-row el-button 就行了

    import Vue from 'vue'
    import {Row,Button} from 'element-ui'
    Vue.use(Row)
    Vue.use(Button)
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Qt中widget重新setParent需要注意的问题
    在有状态机下,写自动测试需要注意的问题
    C#获取当前路径的7种方法
    VS快捷键大全
    [WPF]设置背景色
    [WPF]建立自适应窗口大小布局的WinForm窗口
    [WPF]Slider控件常用方法
    [C#.NET]
    VB中的API详解
    VB6.0和VB.Net的函数等对照表
  • 原文地址:https://www.cnblogs.com/ht955/p/14309342.html
Copyright © 2011-2022 走看看