element UI的使用

1.找官网css

     http://element.eleme.io/#/zh-CN/component/quickstart

2.安装webpack

  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);

四、*webpack.config.js 配置file_loader web

     http://element.eleme.io/1.4/#/zh-CN/component/quickstart
    {
        test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
        loader: 'file-loader'
    }

5.看文档直接使用。




element UI组件的单独使用（第一种方法）：


一、cnpm install babel-plugin-component -D 


二、找到.babelrc 配置文件把

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


改成 注意：


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

三、npm

    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'
    }element-ui