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>
  ![](./assets/logo.png)
  <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