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 只引入需要的插件
     
  • 相关阅读:
    Neko's loop HDU-6444(网络赛1007)
    Parameters
    SETLOCAL
    RD / RMDIR Command
    devenv 命令用法
    Cannot determine the location of the VS Common Tools folder.
    'DEVENV' is not recognized as an internal or external command,
    How to change Visual Studio default environment setting
    error signing assembly unknown error
    What is the Xcopy Command?:
  • 原文地址:https://www.cnblogs.com/yulingjia/p/8336189.html
Copyright © 2011-2022 走看看