乐趣区

关于前端:ElementPlusViteStarterPnpm版本

jiezi

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

退出移动版