一,vite项目的搭建

一.兼容性注意

Vite 需要 Node.js 版本 >= 12.0.0。

二.使用npm创建vue3项目

npm init @vitejs/my-vue-app

根据步骤提示一步一步安装，选择vue+ts 项目创建完毕，并可以在浏览器显示就说明我们用vite构建的vue+ts项目完成了。

三.开始修改vite.config.ts文件

打开后的文件显示：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()]
})

修改：

1.配置文件指向，用@代替

当使用文件系统路径的别名时，请始终使用绝对路径。相对路径的别名值会原封不动地被使用，因此无法被正常解析。

import { defineConfig } from 'vite' 

import vue from '@vitejs/plugin-vue'

import path from 'path'

// https://vitejs.dev/config/ 
export default defineConfig({ 
    plugins: [
        vue(),
    ],
    resolve: {
        alias: {
          '@': path.resolve(__dirname,'src'),
        }
    },
 })

2.按需引入element-plus

首先需要安装两个插件：

npm install -D unplugin-vue-components unplugin-auto-import

然后在vite.config.ts引入：

    import { defineConfig } from 'vite' 

    import vue from '@vitejs/plugin-vue'

    import path from 'path'
    
    import AutoImport from 'unplugin-auto-import/vite'
    
    import Components from 'unplugin-vue-components/vite'
    
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

    // https://vitejs.dev/config/ 
    export default defineConfig({ 
        plugins: [
            vue(),
            AutoImport({ 
              resolvers:[ElementPlusResolver()] 
            }),
            Components({
              resolvers:[ElementPlusResolver()]
            })
        ],
        resolve: {
            alias: {
              '@': path.resolve(__dirname,'src'),
            }
        },
     })

3.配置打包文件

    import { defineConfig } from 'vite' 

    import vue from '@vitejs/plugin-vue'

    import path from 'path'
    
    import AutoImport from 'unplugin-auto-import/vite'
    
    import Components from 'unplugin-vue-components/vite'
    
    import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

    // https://vitejs.dev/config/ 
    export default defineConfig({ 
        plugins: [
            vue(),
            AutoImport({ 
              resolvers:[ElementPlusResolver()] 
            }),
            Components({
              resolvers:[ElementPlusResolver()]
            })
        ],
        resolve: {
            alias: {
              '@': path.resolve(__dirname,'src'),
            }
        },
        build: {
            target:'es2015',
            cssTarget:'chrome65',
            assetsDir:'./assets',
            rollupOptions:{
              input:{ //主要用于配置多页面
                // platForm: resolve(__dirname,'platform.html'),
                // merchant:resolve(__dirname,'merchan')
              }
            }
          }
     })
    

我们的vite.config.ts文件基础配置就算是配置好了

四,element-plus 使用

我们在vite.config.ts中已经配置好了element 现在就需要在main.ts中挂载上就好了

main.ts:

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'

//挂载element-plus和样式文件
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'

const app = createApp(App)
app.use(ElementPlus).mount('#app')

注意：页面中使用可以直接使用，但是在ts文件中使用ElMessage、ElMessageBox 等api,是需要引入一下的

    import { ElMessage, ElLoading } from 'element-plus'
    
    ElLoading.service({
        text: '加载中，请稍后...',
        background: 'rgba(0,0,0,.7)',
        spinner: 'el-icon-loading'
    })
     ElMessage.error(res.message)
     ElMessage.success({
            message: "登录成功",
            duration: 3 * 1000,
          });