[JavaScript知识库]vite+vue3+element Plus搭建

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