zoukankan      html  css  js  c++  java
  • 基于Vue的Ui框架

    基于Vue的Ui框架


    饿了么公司基于vue开的的vue的Ui组件库


    Element Ui 基于vue pc端的UI框架

    http://element.eleme.io/


    MintUi 基于vue 移动端的ui框架

    http://mint-ui.github.io/#!/en


    mintUI的使用:

    1.找官网

    2.安装 npm install mint-ui -S -S表示 --save

    3.引入mint Ui的css 和 插件

    import Mint from 'mint-ui';

    Vue.use(Mint);


    import 'mint-ui/lib/style.css'

    4.看文档直接使用。


    在mintUi组件上面执行事件的写法

    @click.native

    element UI的使用:

    1.找官网 http://element.eleme.io/#/zh-CN/component/quickstart

    2.安装 cnpm i element-ui -S -S表示 --save

    3.引入element UI的css 和 插件

    import ElementUI from 'element-ui';
    import 'element-ui/lib/theme-chalk/index.css';
    Vue.use(ElementUI);


    4、*webpack.config.js 配置file_loader http://element.eleme.io/1.4/#/zh-CN/component/quickstart


    {
    test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
    loader: 'file-loader'
    }

    5.看文档直接使用。


    element UI组件的单独使用(第一种方法):


    1、cnpm install babel-plugin-component -D


    2、找到.babelrc 配置文件

    {
    "presets": [
    ["env", { "modules": false }],
    "stage-3"
    ]
    }


    改为 注意:


    {
    "presets": [["env", { "modules": false }]],
    "plugins": [
    [
    "component",
    {
    "libraryName": "element-ui",
    "styleLibraryName": "theme-chalk"
    }
    ]
    ]
    }

    3、
    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)


    element UI组件的单独使用(第二种方法):

    import { Button, Select } from 'element-ui';

    Vue.use(Button)
    Vue.use(Select)

    引入对应的css

    import 'element-ui/lib/theme-chalk/index.css';

    如果报错: webpack.config.js 配置file_loader

    {
    test: /.(eot|svg|ttf|woff|woff2)(?S*)?$/,
    loader: 'file-loader'
    }

  • 相关阅读:
    javascript模块化进阶
    javascript模块化基础
    css架构探索
    javascript函数基础概念 (补充完结)
    聊聊圣杯布局
    javascript函数基础概念
    yum提示This system is not registered with RHN.RHN support will be disabled.
    Linux分区和挂载硬盘
    Thunderbird扩展
    yum install nginx
  • 原文地址:https://www.cnblogs.com/1711643472qq/p/9172914.html
Copyright © 2011-2022 走看看