当前位置:主页 > vue > vue中按需引入Element-ui

vue中按需引入Element-ui

xi3年前 (2021-06-03)vue4060

安装

1、安装element-ui:npm i element-ui -S。
2、安装babel-plugin-component:npm install babel-plugin-component -D。

修改

1、在项目根目录下新建.babelrc文件:

2、在.babelrc中写入:

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

使用

1、在src下新建文件夹element然后在里面新建文件index.js:

2、在index.js中写入:

import Vue from 'vue'
// 按需引入:base.css 基础样式必须引入,其它组件样式按需引入
import "element-ui/packages/theme-chalk/lib/base.css";
import "element-ui/packages/theme-chalk/lib/collapse.css";
import "element-ui/packages/theme-chalk/lib/collapse-item.css";
import "element-ui/packages/theme-chalk/lib/select.css";
import "element-ui/packages/theme-chalk/lib/option.css";
import {Button} from 'element-ui';//从element-ui中引入按钮
Vue.use(Button);//在vue中使用按钮

3、在页面文件中写入:

<el-button type="primary">主要按钮</el-button>
<el-button type="success">成功按钮</el-button>

4、使用成功:

转载请标注来源与原作者

本文链接:https://xiblogs.top/?id=23

“vue中按需引入Element-ui” 的相关文章

vuex的使用

vuex的使用

vuex是什么vuex是一个专门为vue开发的状态管理工具,它采用集中式存储管理应用的所有组件的状态,其核心是state。 vuex中有什么state:存放状态数据的地方,其中数据是响应式的,数据改...

vue项目的创建

vue项目的创建

安装node1、检查node,未安装在这里(https://nodejs.org/dist/v16.14.0/node-v16.14.0-x64.msi )下载最新版安装。2、检查npm,node自带...

vue3实现一个抽奖小项目

vue3实现一个抽奖小项目

前言 在公司年会期间我做了个抽奖小项目,我把它分享出来,有用得着的可以看下。浏览链接:http://xisite.top/original/other/luckDraw/index.html项目链接...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。