前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue2使用ElementUI

vue2使用ElementUI

作者头像
打不着的大喇叭
发布2024-03-11 17:25:29
690
发布2024-03-11 17:25:29
举报
文章被收录于专栏:喇叭的学堂喇叭的学堂

elementui官网:组件 | Element

1、全部引入

下载:npm i element-ui

代码语言:javascript
复制
在 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)
});

然后直接在官网选取合适控件引入使用即可

2、按需引入

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

代码语言:javascript
复制
下载:
    npm i element-ui

    npm install babel-plugin-component -D
代码语言:javascript
复制
然后,将 babel.config.js 修改为:

{
  "presets": [
    '@vue/cli-plugin-babel/preset', 
    ["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
代码语言:javascript
复制
import Vue from 'vue';
import { Button, Select } from 'element-ui';
import App from './App.vue';

Vue.component(Button.name, Button);
Vue.component(Select.name, Select);
/* 或写为
 * Vue.use(Button)
 * Vue.use(Select)
 */

new Vue({
  el: '#app',
  render: h => h(App)
});
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2024-03-11,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1、全部引入
  • 2、按需引入
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档