vite+vue3+element Plus搭建

落日映苍穹つ 2022-08-28 05:52 195阅读 0赞

## 1.安装 ##

安装命令如下：
    yarn create vite
    yarn add element-plus --dev
    cnpm install element-plus --save

## 2.在main.ts中引入 ##

import {  createApp } from 'vue'
    import App from './App.vue'
    // 引入element plus
    import ElementPlus from 'element-plus';
    // 引入css文件
    import 'element-plus/theme-chalk/index.css'
    createApp(App).use(ElementPlus).mount('#app')

## 3.在vite.config.ts 中配置 ##

import {  defineConfig } from 'vite'
    import vue from '@vitejs/plugin-vue'
    import styleImport from 'vite-plugin-style-import'
    
    // https://vitejs.dev/config/
    export default defineConfig({ 
      plugins: [vue(),
        styleImport({ 
          libs: [{ 
            libraryName: 'element-plus',
            esModule: true,
            ensureStyleFile: true,
            resolveStyle: (name) => { 
              name = name.slice(3)
              return `element-plus/packages/theme-chalk/src/${ name}.css`;
            },
            resolveComponent: (name) => { 
              return `element-plus/lib/${ name}`;
            },
          }]
        })
      ]
    })

## 配置less ##

cnpm install less less-loader --save-dev

发表评论取消回复

表情：

评论列表（有 0 条评论，195人围观）

还没有评论，来说两句吧...

相关阅读

相关 Nuxt3项目搭建（Nuxt3+element-plus+scss详细步骤）

本次记录一次使用Nuxt3搭建前端项目的过程，内容包含Nuxt3的安装，基于Vite脚手架（默认）构建的vue3项目，element-plus的安装配置（可选），scss...

傷城~/ 2024年04月24日 14:45/ 0 赞/ 78 阅读

相关 Vue3引入element-plus

配置main.js import { createApp } from 'vue' import App from './App.vue'

Bertha 。/ 2024年03月03日 06:49/ 0 赞/ 22 阅读

相关 Java框架搭建(mybatis plus)

mybatis plus 1. 添加依赖 <dependency> <groupId>com.baomidou</groupId>

深碍√TFBOYSˉ_/ 2023年10月06日 21:37/ 0 赞/ 42 阅读

相关 VUE+Element-UI环境搭建

1. 在命令行终端进入eclipse的工作目录下面，查看npm的版本，npm的版本需要大于3.0，如果版本低需要升级npm： ![adacd6aff171a457df21f7

Myth丶恋晨/ 2022年12月07日 01:16/ 0 赞/ 190 阅读

相关 vue3.0 + Element Plus整合实战

mall-vue3-manage 基于vue3.0 + Element Plus、整合最新的 Echarts5 强劲的渲染引擎、富文本编辑器 Wangeditor 的后

た入场券/ 2022年10月28日 03:46/ 0 赞/ 202 阅读

相关 MyBatis-Plus 基础环境搭建

一简介 MyBatis-Plus（简称 MP）是一个 MyBatis 的增强工具，在 MyBatis 的基础上只做增强不做改变，为简化开发、提高效率而生。润物

短命女/ 2022年09月13日 11:26/ 0 赞/ 200 阅读

相关 vite+vue3+ts+element-plus项目搭建--超详细

vite+vue3+ts+element-plus项目搭建–超详细 > vite 作用 1. 快速的冷启动：不需要等待打包操作； 2. 即时的热模块更新：替换性能和

迷南。/ 2022年09月11日 05:13/ 0 赞/ 273 阅读

相关 vite+vue3+element Plus搭建

1.安装安装命令如下： yarn create vite yarn add element-plus --dev cnpm instal

落日映苍穹つ/ 2022年08月28日 05:52/ 0 赞/ 196 阅读

相关 vue-cli3+element搭建后台管理项目

一、安装需要的插件（1）创建项目 vue create admin_project （2）安装element npm i element-ui

我就是我/ 2022年02月14日 11:21/ 0 赞/ 423 阅读

相关 vite2 + vue3 + vue-router4 + vuex4 + element-plus 实战(一)-项目搭建

关于项目的搭建[官方文档][Link 1]是这样写的: 搭建第一个 Vite 项目 > 兼容性注意 > Vite 需要 [Node.js][] 版本 >=

深碍√TFBOYSˉ_/ 2021年10月01日 08:50/ 0 赞/ 314 阅读