vue2.0项目中使用element-ui步骤

1.安装element-ui:

npm i element-ui -S

2.推荐按需引入组件

(1)、借助 babel-plugin-component,我们可以只引入需要的组件,以达到减小项目体积的目的

安装 babel-plugin-component:

npm install babel-plugin-component -D

(2)、修改 .babelrc 文件

在文件中加入一下内容即可

"plugins": [

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"      }

    ]

  ]

说明一下,element-ui文档上的快速上手是针对vue-cli3.0版本,所以有些不一样。在2.0项目加上"presets": [["es2015", { "modules": false }]] 会产生报错。

3.在main.js 中引入需要使用到的组件

比如 Button 和 Select,那么需要在 main.js 中写入以下内容:

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

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

4.将文档中的相应组件的示例代码贴到你需要使用的项目中

下面是示例:

示例代码

并且把相应的变量啥的声明一下,在具体这个文件中不需要再次引入

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

直接就能够使用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vue-cli搭建项目 确保安装了node与npm 再目标文件夹下打开终端 执行cnpm i vue-cli -g...
    Akiko_秋子阅读 3,305评论 1 22
  • PS:转载请注明出处作者: TigerChain地址: https://www.jianshu.com/p/db7...
    TigerChain阅读 64,825评论 5 81
  • 安装ElementUI npm i element-ui -S 按需引入 借助babel-plugin-compo...
    ing1023阅读 3,477评论 0 0
  • 第一节 vue:读音: v-u-eview vue和angular区别?vue——简单、易学指令以 v-xxx一片...
    黑色的五叶草阅读 1,151评论 0 1
  • 文/yxr 《三国演义》第一页第二句话是。传说三国天下大乱。分久必合,合久必分。 续写:刘备是皇朝后代的...
    读伱_9fba阅读 158评论 0 0