vue-elementPlus自动按需导入和主题定制

这篇具有很好参考价值的文章主要介绍了vue-elementPlus自动按需导入和主题定制。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

elementPlus自动按需导入

装包 -> 配置

1. 装包(主包和两个插件包)

$ npm install element-plus --save
npm install -D unplugin-vue-components unplugin-auto-import

 2. 配置

vite.config.js文件中配置,配置完重启(npm run dev

vue-elementPlus自动按需导入和主题定制,vue学习,vue项目,vue.js,javascript,ecmascript

// elementPlus按需导入
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'
    //...elementPlus按需导入
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [
        ElementPlusResolver(),
      ],
    })

主题定制

装包sass -> 主题样式定制文件 -> 配置

1. 装包sass

npm i sass -D

(注:-D表示仅在开发环境中依赖)

2. 准备主题定制文件

置于 styles/element/index.scss 中(elementPlus要求的文件命名写法,文件通常由UI提供),定制不同的样式颜色

// 例如:
/* 只需要重写你需要的即可 */
@forward 'element-plus/theme-chalk/src/common/var.scss' with (
  $colors: (
    'primary': (
      // 主色
      'base': #27ba9b,
    ),
    'success': (
      // 成功色
      'base': #1dc779,
    ),
    'warning': (
      // 警告色
      'base': #ffb302,
    ),
    'danger': (
      // 危险色
      'base': #e26237,
    ),
    'error': (
      // 错误色
      'base': #cf4444,
    ),
  )
)

3. 配置-对原样式进行覆盖,代码在最后

vue-elementPlus自动按需导入和主题定制,vue学习,vue项目,vue.js,javascript,ecmascript

vue-elementPlus自动按需导入和主题定制,vue学习,vue项目,vue.js,javascript,ecmascript

  // 2. 自动导入定制化样式文件进行样式覆盖
  css:{
    preprocessorOptions: {
      scss: {
        additionalData: `
          @use "@/styles/element/index.scss" as *;
        `,
      }
    }
  },
    Components({
      resolvers: [
        // elementPlus主题定制:装包sass(开发环境-D) -> 配置
        // 1. 配置elementPlus采用sass样式配色系统
        ElementPlusResolver({importStyle: "sass"}),
      ],
    })

进行测试,验证成功与否。

参考:一个 Vue 3 UI 框架 | Element Plus (element-plus.org)文章来源地址https://www.toymoban.com/news/detail-707435.html

到了这里,关于vue-elementPlus自动按需导入和主题定制的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【VUE】ElementPlus之动态主题色调切换(Vue3 + Element Plus+Scss + Pinia)

    关于ElementPlus的基础主题色自定义可以参阅《【VUE】ElementPlus之自定义主题样式和命名空间》 有了上面基础的了解,我们知道 ElementPlus 的主题色调是基于 CSS3变量 特性进行全局控制的, 那么接下来我们也基于 CSS3变量 来实现主题色调的 动态切换 效果; 主要控制的色调类型有

    2024年02月08日
    浏览(42)
  • vue3 集成 Element-Plus之全局导入/按需导入

    element-plus集成 Element Plus,一套为开发者、设计师和产品经理准备的基于 Vue 3.0 的桌面端组件库: 在Vue2中使用element-ui,而element-plus是element-ui针对于vue3开发的一个UI组件库; 它的使用方式和很多其他的组件库是一样的,所以学会element-plus,其他类似于ant-design-vue、NaiveUI、Van

    2024年02月09日
    浏览(71)
  • vue3使用view-ui定制主题

    安装view-ui-plus、less、less-loader、style-resources-loader 在main.js(mian.ts)中引入viewUI主键和样式 在vite.config.js中配置css的loaderOptions 首先在项目中先建一个目录,比如  styles ,然后在 styles 下建立一个 less 文件  index.less ,并写入下面内容: 在main.js(mian.ts)中引入 ./styles/ index.le

    2023年04月09日
    浏览(45)
  • Vant4在Vue3.3中如何按需导入组件和样式

    最近我在Vue 3.3的项目中对Vant4做按需导入时,尽管按照Vant4的官方指南进行操作,但样式仍然无法正确加载。经过深入研究和多篇文章的比较,我终于找到了在Vue3中如何正确的按需导入Vant 4组件和样式的方法。由于Vue3.3和Vant4相对较新,相关资料可能还不够完善,因此我认为

    2024年01月21日
    浏览(55)
  • Webpack项目学习:Vue-cli(脚手架)-优化配置 -ui库element-plus+减小打包体积 -按需加载+自定义主题+优化

    安装 全部引入,在入口文件main.js  启动:npm start  按需引入 需要插件快速开始 | Element Plus (gitee.io)     更改默认配置 主题 | Element Plus (gitee.io)    如果有模块没有安装 ,安装一下即可 优化 关闭性能分析 文件单独打包 做缓存-

    2024年02月08日
    浏览(72)
  • 设置elementplus主题色(全局设置)

    首先先在src文件夹下建一个style文件夹,再在style文件夹下面建一个element文件夹 再建一个scss文件 文件目录如下 如果我们要给elementplus设置主题色 在style.scss文件里 首先使用 @forward 导入 Element Plus 的变量,再设置elementplus的主题色 这样我们就完成了组件库主题色的设置,如果

    2024年02月11日
    浏览(34)
  • vue3 vue.config.js配置Element-plus组件和Icon图标实现按需自动引入

    打包时,报警告,提示包太大会影响性能 在页面直接使用,直接使用 SVG 图标,当做一般的 svg 使用 icon使用时需要用以下两种方式方式: 如果用在el-button里面的icon属性上使用,用SVG方式无效,还是需要引入再使用(不知道有没有其他方式) 注意: 使用 :icon=\\\"Edit\\\" 则icon的大

    2024年02月06日
    浏览(70)
  • vue3按需导入element-plus报错Module not found: Error: Can‘t resolve ‘element-plus/es/components/button/

    由于element-plus版本更新迭代较快,直接安装 npm install element-plus -D 会默认安装最新版本,使用时可能会报错: 可以安装这个稳定的版本: 就可以直接在vue文件中调用了:

    2024年02月12日
    浏览(44)
  • React UI组件库——如何快速实现antd的按需引入和自定义主题

    大家上午好呀~ 今天来学习一下React的UI组件库以及antd的使用相关的知识点。 感兴趣的小伙伴可以给个三连哦~ material-ui(国外) ant-design(国内蚂蚁金服) antd 是基于 Ant Design 设计体系的 React UI 组件库,主要用于研发企业级中后台产品。 安装antd组件库: 默认按需引入antd组件

    2024年02月02日
    浏览(38)
  • ES6模块化(默认导入导出、按需导入导出、直接导入)

    一、介绍ES6模块化     ES6 模块化规范是浏览器端与服务器端通用的模块化规范,ES6模块化的出现前端开发者不再需要额外的学习其他的模块化规范。  二、ES6 模块化规范中定义: 1.每个 js 文件都是一个独立的模块 2.导入其它模块成员使用 import 3.向外共享模块成员使

    2024年02月09日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包