使用vue与element组件

Posted jassin-du

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用vue与element组件相关的知识,希望对你有一定的参考价值。

1、安装element

npm i element-ui -S

2、引入

在main.js写入一下内容

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

3、按需引入

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

首先,安装 babel-plugin-component:

npm install babel-plugin-component -D

然后,将 .babelrc 修改为:

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

 

以上是关于使用vue与element组件的主要内容,如果未能解决你的问题,请参考以下文章

使用 element-ui 组件测试 Vue 组件

vue-element组件安装教程

Vue使用directive指令实现Element中Dialog等弹框组件的移动与缩放

vue+Ts+element组件封装

vue2 使用vuex进行组件间的通讯 element-ui Aside折叠与展开

19-Vue之Element UI-按钮组件