Element-UI结合脚手架之按需引入

简介: Element-UI结合脚手架之按需引入




前言

按需引入,可以减小打包体积,这里会记录一下我如何将 Element-ui 按需引入的过程。

🚀Element的官网传送门🚀

步骤

一、首先,是需要安装一个插件 (babel-plugin-component)

npm install babel-plugin-component -D

二、接下来改写配置文件

我是找到了 babel.config 文件

注意将 es2015 改为 [‘@babel/preset-env’, { modules: false }]

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset',
    ['@babel/preset-env', { modules: false }]
  ],
  plugins: [
    [
      'component',
      {
        libraryName: 'element-ui',
        styleLibraryName: 'theme-chalk'
      }
    ]
  ]
}

三、使用

main.js(这里是为了演示,直接在main.js中进行了)

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import { Button, Select } from 'element-ui'
// 按需引入
Vue.use(Button)
Vue.use(Select)
Vue.config.productionTip = false
new Vue({
  router,
  render: h => h(App)
}).$mount('#app')
<el-row>
      <el-button>默认按钮</el-button>
      <el-button type="primary">主要按钮</el-button>
      <el-button type="success">成功按钮</el-button>
      <el-button type="info">信息按钮</el-button>
      <el-button type="warning">警告按钮</el-button>
      <el-button type="danger">危险按钮</el-button>
    </el-row>

结语

晚安呀,明天继续努力,学会记录。

目录
相关文章
|
前端开发 JavaScript
使用Vue+Element-UI从0搭建一个常见的前端模板
使用Vue+Element-UI从0搭建一个常见的前端模板
471 0
|
4月前
|
JavaScript 前端开发 开发工具
使用vue3+element-ui plus 快速构建后台管理模板
本文介绍了如何使用Vue 3和Element UI Plus快速构建后台管理模板的步骤,包括安装Vue 3脚手架、Element UI Plus以及如何全局配置Element UI Plus。然后详细讲解了如何使用Element UI Plus构建布局,包括Header组件、Aside组件和HomeView视图的创建和样式调整,以及App.vue和main.css的修改,最后提供了项目的文件结构图和效果展示。
使用vue3+element-ui plus 快速构建后台管理模板
|
3月前
|
JavaScript 前端开发 数据安全/隐私保护
UI 框架:Element-plus组件库(一)
在现代Web开发中,用户界面的设计与交互体验至关重要。随着前端技术的迅速发展,各种UI框架层出不穷,旨在提升开发效率和用户体验。其中,Element Plus作为一款基于Vue 3的组件库,因其简洁优雅的设计和丰富的功能而备受欢迎。 Element Plus不仅提供了众多高质量的组件,还注重与开发者的友好互动,使得即使是初学者也能快速上手。在本系列文章中,我们将深入探讨Element Plus的各个组件及其应用,通过实例演示如何有效利用该框架构建美观且功能强大的用户界面。
580 0
|
6月前
Element UI 按需引入(含CollapseTransition)
Element UI 按需引入(含CollapseTransition)
135 1
|
7月前
|
缓存 JavaScript 测试技术
如何创建一个VUE3项目并使用Element UI插件
如何创建一个VUE3项目并使用Element UI插件
|
8月前
|
JavaScript 编译器
vue3引入element-plus完整步骤
vue3引入element-plus完整步骤
942 5
|
开发框架 JavaScript 前端开发
vue2.0 + element-ui 实战项目- 搭建环境(一)
vue2.0 + element-ui 实战项目- 搭建环境(一)
260 0
|
JavaScript
vue老项目sass和element-ui开发踩坑
公司的一个各种依赖比较老的项目,习惯了之前的iview和stylus开发,刚接手还是有很多不习惯的地方
164 0
|
JavaScript 前端开发 API
Vue框架Element UI教程-Mock的使用(七)
Vue框架Element UI教程-Mock的使用(七)
85 0
|
JavaScript 前端开发
Vue框架Element UI教程-页面渲染(八)
Vue框架Element UI教程-页面渲染(八)
90 0