1 起因
由於最近Vite
升級了2.x版本,項目中需要改動的東西有點多,本來想基於官方給出的starter重做,但是又看到了一個叫pnpm
的倉庫,構建速度會比原生npm/yarn
快兩倍以上:
因此模仿官方starter做了一個pnpm
版本的starter,希望能幫助到需要的同學。
2 環境準備
Node.js
npm
pnpm
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,右邊是官方的,可以看到基本一致: