zoukankan      html  css  js  c++  java
  • Vue(十八)Element UI

    Elment UI
    1. 简介
    Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率
    ElementUI PC端
    MintUI 移动端
    2. 快速上手
      
      使用vue-cli创建项目
      - vue init webpack-simple vue-element
      - cd vue-element
      - cnpm install
    2.1 安装elment ui
    cnpm install element-ui -S
    2.2 在main.js中引入并使用组件
    import ElementUI from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css' //该样式文件需要单独引入
    Vue.use(ElementUI);
    这种方式引入了ElementUI中所有的组件
    import Vue from 'vue'
    import ElementUi from 'element-ui'
    import 'element-ui/lib/theme-chalk/index.css' //该样式文件需要单独引入
    import App from './App.vue'
    
    Vue.use(ElementUI)
    
    new Vue({
      el: '#app',
      render: h => h(App)
    }
     
    2.3 在webpack.config.js中添加loader
    CSS样式和字体图标都需要由相应的loader来加载,所以需要style-loader、css-loader
    默认并没有style-loader模块,所以需要单独安装
    cnpm install style-loader --save-dev
    2.4 使用组件
    2.5 使用less
    安装loader,需要两个:less、less-loader
    cnpm install less less-loader -D
    在webpack.config.js中添加loader
    3. 按需引入组
    3.1 安装babel-plugin-component
    cnpm install babel-plugin-component -D
    3.2 配置.babelrc文件
    "plugins": [["component", [
    {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-default"
    }
    ]]]
    3.3 只引入需要的插件
     
  • 相关阅读:
    JAVA Number类
    ConcurrentHashMap.Segment源码解析
    Java Concurrent包初探
    JAVA枚举类
    构造不可变类及其优点
    Unsafe类初探
    Paxos made simple 翻译尝试
    平行二叉堆和优先队列
    Android OpenCV学习
    Android-Java和HTML5交互-混合开发-优化
  • 原文地址:https://www.cnblogs.com/yulingjia/p/8336189.html
Copyright © 2011-2022 走看看