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

vue中按需引入Element-ui

xi5年前 (2021-06-03)vue1140

安装

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组件间传值

父传子利用props传值,子组件中规定props数据类型,然后父组件使用子组件时需要绑定数据在子组件上:父组件: <template> <div class="parents-div"> <!--绑定msg传入子组件-->...

vscode使用vue代码模板

vscode使用vue代码模板

1、vscode中打开:文件>首选项>用户片段>输入vue按下回车2、复制下面代码并保存。 { "Print to console": { "prefix": "vue",...

vue打包后dist的使用

vue打包后dist的使用

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

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

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

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

数据看板可视化

数据看板可视化

前言这段时间一直在做可视化,在我的项目中有一部分是电力巡检的数据可视化。其中的数据看板比较简单,我将其单独抽离出来形成一个demo,为保密demo中数据非真实数据。先看效果。 具体效果 链接相关 浏览链接:https://xiblogs.top/original/bigScreen/29/in...

发表评论

访客

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