vue3.0、cli4项目引入element plus

element团队为新版的 vue-cli4 准备了相应的 Element Plus 插件

安装依赖

npm install element-plus --save

main.js全局引入，样式文件需要单独引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';
import 'element-plus/lib/theme-chalk/index.css';
import App from './App.vue';const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入需要借助babel-plugin-import插件，详情见官网

自定义样式变量：

如果你的项目也使用了 SCSS，那么可以直接在项目中改变 Element Plus 的样式变量，否则参考官网的其他方法。
在src中创建element-variables.scss

/* 所有变量在这里改后生效 */
/* 改变主题色变量 */
$--color-primary: teal;/* 改变 icon 字体路径变量，必需 */
$--font-path: '~element-plus/lib/theme-chalk/fonts';@import "~element-plus/packages/theme-chalk/src/index";

main.js中引入

import Vue from 'vue'
import ElementPlus from 'element-plus'
import './element-variables.scss'
import App from './App.vue';const app = createApp(App)
app.use(ElementPlus)

vue3.0、cli4项目引入element plus相关推荐

关于 vue3.0 实战项目 setup、 props、 reactive、ref
关于 vue3.0 实战项目中遇到的问题介绍vue3.0的特性: 亿点小知识 1.diff算法的优化增加了静态标记PatchFlag 2.按需编译,体积比Vue2.x更小(Tree shaking ...
vue3.0实战项目
vue3.0+typescript+vite2实战:后台管理系统一.技术栈二.功能架构三.框架搭建四.安装插件 1.路由插件vue-router4安装使用 2.vuex4的安装 3.安装sas ...
Vue3.0 + Ts 项目框架搭建二：路由 Router
前言上篇文章我们使用 vue-cli 创建了模板项目,可以看到安装的依赖只有 vue,所以要正常的驱动项目,安装必要的依赖是跑不了. 其中Router是控制整个系统的页面路由,是最重要的依赖之一.因 ...
idea2020.2.2怎么创建web项目_创建Vue3.0的项目
1. 查看Vue的环境版本 Vue -V 如果版本低于4.0,则需要升级Vue的版本 npm install -g @vue/cli 2. 创建Vue 3.0的项目 3. VS Code 的环境配置 ...
vue main.js中引入js_手把手教你深入Vue3.0(Vue-cli4)项目打包性能优化实践
记录了自己的博客在禁用缓存的情况下,从八九秒加载时间到最终985ms的优化实践,开启缓存的情况下能达到138ms的访问速度本人的个人博客采用的是Vue-cli4.1.2 + typescript构建 ...
Vue3.0 + Ts 项目框架搭建四：配置 Svg-Icon、Icon图标
1. 在src文件下,创建components/SvgIcon/index.vue组件 <template><divv-if="isExternal":style ...
Vue3.0 + Ts 项目使用element-plus 自动按需导入使用v-loading报错
问题展示: 使用v-loading报错无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法: element-plus ...
Vue3.0中如何引入jQuery并使用
1.安装jquery 终端使用 npm 命令安装 : npm install jquery --save 2.找到babel.config.js文件有的小伙伴可能项目结构不一样文件名字会有点不一样 ...
TypeScript及TypeScript在vue3.0项目中的基本使用
一. TypeScript是什么 TypeScript 是一种由微软开发的自由开源的编程语言,主要提供了类型系统和对 ES6的支持.它是JavaScript的一个超集,扩展了JavaScript的语 ...

vue3.0、cli4项目引入element plus

自定义样式变量：

vue3.0、cli4项目引入element plus相关推荐

最新文章

热门文章