乐趣区

关于前端:ElementPlusViteStarterPnpm版本

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.jsnpm 的装置就不说了,原本笔者应用的是 cnpm,尽管速度上相比起npm 有所改进,而且 cnpm 的输入也更加敌对,然而应用了pnpm,相比起来感觉还是差了那么一点。

装置 pnpm 之前,能够先把 cnpm 卸载(当然也能够抉择不卸载):

npm uninstall -g cnpm 

再设置一下淘宝镜像:

npm config set registry https://registry.npm.taobao.org 

而后装置 pnpm(笔者零碎Manjaroaur 曾经提供了,能够间接 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 xxxxWebStorm 运行倡议先增加一个 npm 运行配置:

右边是自制的 starter,左边是官网的,能够看到基本一致:

退出移动版