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>
<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,左边是官网的,能够看到基本一致:
在这里插入图片形容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,左边是官网的,能够看到基本一致: