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>  <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，左边是官网的，能够看到基本一致：
6 源码
- Github
- 码云
- CODECHINA