当前位置:首页 > vue > 正文内容

vue中按需引入Element-ui

xi5年前 (2021-06-03)vue1209

安装

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、使用成功:

扫描二维码推送至手机访问。

版权声明:本文由曦的博客发布,如需转载请注明出处。

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

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

vue自定义组件的点击事件失效

vue自定义组件的点击事件失效

在vue开发过程中为了减少重复代码,很多时候都需要将重复的部分写成一个组件,方便调用。但是使用组件时很可能又会给该组件添加点击事件。如果直接这样写,事件则会失效:正确写法应该是这样:...

vue打包后dist的使用

vue打包后dist的使用

发现问题vue项目完成打包出dist后准备打开index.html,发现居然页面是一片空白,f12一片报红。 分析问题经过多次网上查询后发现这是由于vue打包时,脚手架会帮你配置好大量参数,但其中路径publicPath被配置为了”/“,需要手动修改。 解决办法1、将vue.config.js中...

canvas实现图片标记

canvas实现图片标记

前言由于业务需求,需要有一个图片标记功能,其实就是对图片画框画线做标记,类似微信的图片编辑但是需要存下标记图及其标记的具体数据,。功能其实很简单,但刚开始的时候也是费了一些功夫的。我将原项目中该功能抽离出来单独写了一个demo,作为记录,同时你们在开发过程中有类似需求的话也可以参考一下该思路,其中有...

vue+xlsx实现表格的导入导出

vue+xlsx实现表格的导入导出

前言前端在开发过程中若是管理系统之类的业务系统,则大多都会涉及到表格的处理,其中最为常见的就是表格的导入导出。有很多办法都可以实现,其中最简单的还是使用插件xlsx。 实现目标1、对表格数据进行增加、删除。2、表格数据的导出、导入。 具体逻辑增加、删除功能比较简单,直接利用vue数据的响应式即可...

vue中代理解决跨域

跨域是什么简单的讲就是你在一个地方使用另一个地方的资源,被浏览器给挡下来了,不让你用!当然,它挡下来是有自己理由的:为了安全(╬▔皿▔)╯。 解决跨域我是用vue开发的,就vue代理模式解决跨域说明一下。1、在vue.config.js中这样写: let devProxy = { //获取...

发表评论

访客

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