1.引言

其實(shí)本來不應(yīng)該寫這種CSDN比較多的博文的，主要是因?yàn)楸容^多，然后想解決問題的時候有很多各種各樣的文章，然后這些文章有各自的解決思路，甚至拿過來又不能解決問題，本著分享和方便以后使用的目的，記錄這次使用過程。

2.為什么是Vite?

其實(shí)我最開始用的是vue-cli，但是使用的時候發(fā)現(xiàn)這個每次運(yùn)行的時候都需要打包，導(dǎo)致運(yùn)行的比較慢，得等個10幾秒。加上看到Element-plus官網(wǎng)在配置教程里面甚至都沒有放vue-cli的配置教程。在使用vue-cli引入的時候我又希望不是全部引入，因?yàn)楹芏嘟M件是沒必要的，也許正是因?yàn)檫@個Element-plus比較大，所以打包的時間平時使用的時候大更多。基于上述原因，我查了一下vite和vue-cli的區(qū)別：

（1）vite打包速度快，能夠利用瀏覽器對JavaScript 模塊的原生支持，而vue-cli在打包上更像是webpack的一個超集，本身基于webpack來打包，又在webpack的基礎(chǔ)上增加了很多腳手架，由于webpack將項(xiàng)目的各種依賴?yán)胘s串聯(lián)起來，工作量相對較大，時間慢也是正常的；

（2）由于Vite打包之后還是依賴于瀏覽器，所以對于低版本的瀏覽器支持的不是很好。

3.為什么是Element-plus?

因?yàn)橹皼]有使用過這個UI庫，自己一個個組件的寫太慢了。而且Element-plus熱度也比較高。Element-plus本質(zhì)是Element-UI對Vue3的支持更新，用來配合Vue3開發(fā)非常合適，相比之下，有很多UI框架還沒能轉(zhuǎn)到Vue3,不得不感嘆前端發(fā)展實(shí)在是太快了，各種UI組件庫，各種生態(tài)，這種來自于社區(qū)的依賴。

4.項(xiàng)目搭建

好了不多說了，直接開始吧：

npm init vite@latest <app name> -- --template vue-ts

安裝依賴、測試運(yùn)行什么的就不說了，配置vite.config.ts（含修改端口方式）：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
  plugins: [
    vue()
  ],
  server: {
    port: 8080,
  },
});

安裝element-plus依賴：npm i element-plus (使用-D主要是我們一般只是用生成的dist文件，用于生產(chǎn)環(huán)境)；安裝 sass和sass-loader，方便之后使用element中提供的顏色主題和自己寫sass一些樣式。

修改tsconfig.json，關(guān)閉打包時候的ts校驗(yàn)（否則打包的時候會因?yàn)閠s校驗(yàn)不通過而導(dǎo)致打包失?。?code>"skipLibCheck": true,為了方便編譯器提示加上："types": ["element-plus/global"],

入口文件：

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

按需引入，安裝官網(wǎng)提到的unplugin-auto-import和unplugin-vue-components依賴（-D就行），調(diào)整vite.config.ts文件：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
  ],
  server: {
    port: 8080,
  },
});

實(shí)踐測試，如果使用這種方法，那么每次會由這兩個自動導(dǎo)入的依賴為我們引入我們自己寫的components和組件：

如果全部引入那么文件大小1.4MB左右，如果按需引入只有400KB，所以還是按需引入比較香。

5.參考文獻(xiàn)

本次項(xiàng)目搭建看了很多文章，對我?guī)椭容^大的是這三篇文章：

（1）搭建vite項(xiàng)目并配置路由和element-plus

（2）Element官網(wǎng)配置教程

（3）Vite和Vue CLI的優(yōu)劣

總結(jié)

到此這篇關(guān)于vite+element-plus項(xiàng)目基礎(chǔ)搭建的文章就介紹到這了,更多相關(guān)vite+element-plus項(xiàng)目搭建內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論