本文介绍: 我们可以引入需要组件,以达到减小项目体积的目的。然后直接在官网选取合适控件引入使用即可下载npm i elementui

elementui官网组件 | Element

1、全部引入

下载:npm i elementui

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我们可以只引入需要组件,以达到减小项目体积的目的。

下载:
    npm i element-ui

    npm install babel-plugin-component -D
然后,将 babel.config.js 修改为:

{
  "presets": [
    '@vue/cli-plugin-babel/preset', 
    ["@babel/preset-env", { "modules": false }]],
  "plugins": [
    [
      "component",
      {
        "libraryName": "element-ui",
        "styleLibraryName": "theme-chalk"
      }
    ]
  ]
}
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)
});

 

 

原文地址:https://blog.csdn.net/weixin_49931650/article/details/134740307

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_25046.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注