• 使用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)
    右侧打赏一下 代码改变世界一块二块也是爱
  • 相关阅读:
    Java类的静态块の二
    Java类的静态块の一
    Eclipse优化工具Optimizer for Eclipse
    C#实现MD5WITHRSA签名
    Ubuntu 初始化Root账户密码
    shell连接本机虚拟机
    Nodejs的Express完成安装指导
    node.js之Windows 系统下设置Nodejs NPM全局路径
    Unicode, UTF-8, GBK, ASCII的区别
    BootstrapValidation一些tips
  • 原文地址:https://www.cnblogs.com/ht955/p/14309342.html
Copyright © 2020-2023  润新知