element-plus中如何实现按需导入与全局导入

目录
  • 按需导入：
  • 全局导入

按需导入：

安装插件

首先需要引入额外的插件：前**vite-plugin-components已重命名为unplugin-vue-components**

npm install unplugin-vue-components

配置插件

在weapack或vite配置文件内中添加配置

// vite.config.ts
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
​
export default {
  plugins: [
    // ...
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}

// webpack.config.js
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
​
module.exports = {
  // ...
  plugins: [
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
}
//main.ts
import { createApp } from 'vue'
import App from './App.vue'
​
import { Edit,Search } from '@element-plus/icons'  //图标需要分开导入，按需导入图标
import { ElButton } from 'element-plus';   //按需导入
​
const app = createApp(App);
//注册组件
app.component("edit", Edit)
app.component("search", Search)
app.component('ElButton',ElButton)
app.mount('#app');
<template>
    <h2>home页面</h2>
    <el-button type="primary" >主要按钮</el-button>
    <el-button type="success" >成功按钮</el-button>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
    <el-icon :size="20">
        <search></search>
    </el-icon>
</template>
<script setup lang="ts">
</script>

全局导入

推荐添加

// tsconfig.json
{
  "compilerOptions": {
    // ...
    "types": ["element-plus/global"]
  }
}

安装

npm install element-plus --save
# or
yarn add element-plus
​
# 安装icon图标依赖库
npm install @element-plus/icons
# or
yarn add @element-plus/icons

在main.ts 文件中全局配置

import { createApp } from 'vue'
import App from './App.vue'
import { store, key } from './store';
// 注入路由
import router from './router';
​
// 全局引入ui库
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
​
const app = createApp(App);
app.use(store, key);
app.use(router);
app.use(ElementPlus);
app.mount('#app');

使用ui组件

使用图标，因为图标和普通ui组件不是同一个包，使用需要分别导入

//导入具体的组件后直接使用
<template>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
</template>
<script setup lang="ts">
    import { Edit } from '@element-plus/icons'
</script>

将图标库在main.ts文件中impott并使用app.component()注册便可以直接在组件中使用了，和普通的使用ui库同理

<template>
    <h2>home页面</h2>
    <el-button type="primary" >主要按钮</el-button>
    <el-button type="success" >成功按钮</el-button>
    <el-icon :size="20" :color="'blue'">
        <edit />
    </el-icon>
    <el-icon :size="20">
        <search></search>
    </el-icon>
</template>
<script setup lang="ts">
</script>

到此这篇关于element-plus中如何实现按需导入与全局导入的文章就介绍到这了,更多相关element-plus 按需导入与全局导入内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 浅谈vue.js导入css库(elementUi)的方法

    1.安装以下模块,让webpack可以解析css文件 cnpm install style-loader --save-dev cnpm install css-loader --save-dev cnpm install file-loader --save-dev 2.安装elementUi模块 cnpm install element-ui@next -S 3.在webpack.base.conf.js中添加配置 { test: /\\\\\\\\.css$/, loader: "styl

  • 使用vue-cli导入Element UI组件的方法

    首先第一步,现在命令行中输入npm i element-ui,如: 接着在mian.js 中添加 import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) 如:=> 最后在命令行输入npm run dev打开自己创建的项目就可以使用了 总结 以上所述是小编给大家介绍的使用vue-cli导入Element UI组件的方法,希望对大家有所帮助,如果大家有任何疑

  • vue-element-admin项目导入和导出的实现

    vue-element-admin项目导入和导出的实现

    vue-element-admin导入组件封装 模板和样式 首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可 excel导入功能需要使用npm包xlsx,所以需要安装xlsx插件 npm i xlsx 将vue-element-admin提供的导入功能新建一个组件,位置: src/components/UploadExcel import CommonTools from './CommonTools' import Uploa

  • vue + element-ui实现简洁的导入导出功能

    前言 众所周知,ElementUI,是一个比较完善的UI库,但是使用它需要有一点vue的基础.在开始本文的正文之前,我们先来看看安装的方法吧. 安装ElementUI模块 cnpm install element-ui -S 在main.js中引入 import ElementUI from 'element-ui' import 'element-ui/lib/theme-default/index.css' 全局安装 Vue.use(ElementUI) 当我们安装完记得重新运行,cnpm

  • element-plus中如何实现按需导入与全局导入

    目录 按需导入: 全局导入 按需导入: 安装插件 首先需要引入额外的插件:前**vite-plugin-components已重命名为unplugin-vue-components** npm install unplugin-vue-components 配置插件 在weapack或vite配置文件内中添加配置 // vite.config.ts import Components from 'unplugin-vue-components/vite' import { ElementPlus

  • vue2.0 + element UI 中 el-table 数据导出Excel的方法

    1.安装相关依赖 主要是两个依赖 npm install --save xlsx file-saver 如果想详细看着两个插件使用,请移步github. https://github.com/SheetJS/js-xlsx https://github.com/eligrey/FileSaver.js 2.组件里头引入 import FileSaver from 'file-saver' import XLSX from 'xlsx' 3.组件methods里写一个方法 exportExcel

  • vue element table中自定义一些input的验证操作

    官网原话 Form 组件提供了表单验证的功能,只需要通过 rules 属性传入约定的验证规则,并将 Form-Item 的 prop 属性设置为需校验的字段名即可. 表单 el-form表单必备以下三个属性: :model="ruleForm" 绑定的数据内容 :rules="rules" 动态绑定的rules,表单验证规则 ref="ruleForm" 绑定的对象 template模块 其实问题关键就在于如何给el-form-item动态绑定p

  • Element UI中v-infinite-scroll无限滚动组件使用详解

    目录 一.v-infinite-scroll无限滚动组件使用详解 二.组件无限加载原因及解决方式 三.总结 总结 一.v-infinite-scroll无限滚动组件使用详解 1.v-infinite-scroll="load" //load无限滚动加载的方法 2.infinite-scroll-disabled //是否禁用无限滚动加载 3.infinite-scroll-delay //节流时延,单位为ms 4.infinite-scroll-distance //触发加载的距离阈值

  • jsp中include指令静态导入和动态导入的区别详解

    jsp中include指令静态导入和动态导入的区别详解

    1.什么是静态导入? 静态导入指的是,将一个外部文件嵌入到当前JSP文件中,同时解析这个页面的JSP语句,它会把目标页面的其他编译指令也包含进来.include的静态导入指令使用语法: 复制代码 代码如下: <%@include file="relativeURLSpec"%> 静态导入使用范例include1.jsp: 复制代码 代码如下: <%@ page contentType="text/html; charset=utf-8" langu

  • Winform中Treeview实现按需加载的方法

    本文实例讲述了Winform中Treeview实现按需加载的方法,非常具有实用价值.分享给大家供大家参考.具体分析如下: 最近项目里用到treeview,原先设计的是一开始就把所有数据都加载到treeview里,后来发现客户的数据量实在太大,加载所有数据要2分钟,这个是客户没法接受的.后来就考虑到用户也不是一开始就要看所有的数据,用户也是一层一层地展开,所以我们就考虑是不是可以实现以当用户展开某个结点时才加载当前结点下面的数据.一番查找后,发现treeview有BeforeExpand事件可以实

  • 详解Python中的相对导入和绝对导入

    前言 Python 相对导入与绝对导入,这两个概念是相对于包内导入而言的.包内导入即是包内的模块导入包内部的模块. Python import 的搜索路径 在当前目录下搜索该模块 在环境变量 PYTHONPATH 中指定的路径列表中依次搜索 在 Python 安装路径的 lib 库中搜索 Python import 的步骤 python 所有加载的模块信息都存放在 sys.modules 结构中,当 import 一个模块时,会按如下步骤来进行 如果是 import A,检查 sys.modul

  • Spring Boot 从静态json文件中读取数据所需字段

    •在实体中,通常使用类似字典表的文件来表示属性,文件大都配置在配置文件中,也可以是静态文件,本次记录如何从静态json文件中读取所需字段. 1.文件格式以及路径 2.加载文件 import org.springframework.beans.factory.annotation.Value; import org.springframework.core.io.Resource; @Value("classpath:static/data/area.json") private Res

  • vue+element项目中过滤输入框特殊字符小结

    可以在main.js中写入方法 Vue.prototype.validSe = function (value, number = 255) { value = value.replace(/[`-*~!@#$%^&*()_\-+=<>?:"{}|,./;'\\[\]·~!@#￥%--&*()--\-+={}|<>?:""[].:'',..]/g, '').replace(/\s/g, ""); if (value.

  • Web Components实现类Element UI中的Card卡片

    Web Components实现类Element UI中的Card卡片

    目录 引言 Web Components 核心组成 1. Custom Elements 2. Shadow DOM 3. templates 和 slots 完整代码 Web Components vs Vue Components Web Components 生命周期回调函数 优点 and 缺点 七.基于web components的框架 引言 Web Components 是一个浏览器原生支持的组件化方案,允许你创建新的自定义.可封装.可重用的HTML 标记.不用加载任何外部模块,直接就

随机推荐