1 起因
由於最近Vite升級了2.x版本，項目中需要改動的東西有點多，本來想基於官方給出的starter重做，但是又看到了一個叫pnpm的倉庫，構建速度會比原生npm/yarn快兩倍以上：
因此模仿官方starter做了一個pnpm版本的starter，希望能幫助到需要的同學。
2 環境準備
Node.jsnpmpnpm
Node.js與npm的安裝就不說了，本來筆者使用的是cnpm，雖然速度上相比起npm有所改進，而且cnpm的輸出也更加友好，但是使用了pnpm，相比起來感覺還是差了那麼一點。
安裝pnpm之前，可以先把cnpm卸載（當然也可以選擇不卸載）：
npm uninstall -g cnpm
再設置一下淘寶鏡像：
npm config set registry https://registry.npm.taobao.org
然後安裝pnpm（筆者系統Manjaro，aur已經提供了，可以直接yay安裝）：
yay -S pnpm
# 也可以使用npm安裝
npm install -g pnpm
測試：
pnpm -v
使用pnpm命令時，只需替換原生的npm命令即可，比如使用
pnpm install
去代替
npm install
同理npx的代替品是pnpx。
3 初始化
基於Vite Getting Started文檔，輸入
pnpm init @vitejs/app
接着輸入項目名字，並選擇模板：
默認提供的模板如圖所示，選擇完成後即可。
也可以一步創建完成：
pnpm init @vitejs/app my-vue-app --template vue
接着安裝依賴：
pnpm install
pnpm install --save element-plus
這樣就完成了初始化工作，項目結構如下：
4 引入ElementPlus
按照ElementPlus文檔引入，修改main.js如下：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/lib/theme-chalk/index.css'
createApp(App).use(ElementPlus).mount('#app')
將以下圖片覆蓋logo.png：
下一步就是修改HelloWorld.vue中的button，並把<h1>下面的<p>註釋掉：
最後修改App.vue，改動其中的<image>大小，以及<HelloWorld>中的標題文字：
<template>
<img alt="Vue logo" src="./assets/logo.png" id="img"/>
<HelloWorld msg="Hello Vue 3.0 + Element Plus + Vite + pnpm" />
</template>
<script setup>
import HelloWorld from './components/HelloWorld.vue'
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
#img{
width: 50%;
}
</style>
5 運行
終端運行可以直接輸入vite即可，需要制定端口可以修改爲vite --port xxxx，WebStorm運行建議先添加一個npm運行配置：
左邊是自制的starter，右邊是官方的，可以看到基本一致：
