快捷導航

vite+element-plus項目基礎(chǔ)搭建的全過程

更新時間：2022年07月19日 10:13:42 作者：凌空暗羽

最近看完Vue3和Vite文檔之后,就寫了個小demo,整體感覺下來還是很絲滑的,下面這篇文章主要給大家介紹了關(guān)于vite+element-plus項目基礎(chǔ)搭建的全過程,需要的朋友可以參考下

1.引言

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

2.為什么是Vite?

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

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

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

3.為什么是Element-plus?

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

4.項目搭建

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

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

安裝依賴、測試運行什么的就不說了，配置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校驗（否則打包的時候會因為ts校驗不通過而導致打包失?。?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,
  },
});

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