vite+vue3+element Plus搭建

落日映苍穹つ 2022-08-28 05:52 176阅读 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 条评论，176人围观）

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

相关阅读

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

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

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

相关 Vue3引入element-plus

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

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

相关 element-plus Vue 3.0 Beta来了

[GitHub地址][GitHub] [ElementUi Beta版本文档][ElementUi Beta] 又要秃头一波了！！！ [GitHub]: https:/

ゝ一世哀愁。/ 2022年12月28日 04:16/ 0 赞/ 133 阅读

相关 VUE+Element-UI环境搭建

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

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

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

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

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

相关 MyBatis-Plus 基础环境搭建

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

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

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

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

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

相关 vite+vue3+element Plus搭建

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

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

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

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

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

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

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

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