关于前端: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,左边是官网的,能够看到基本一致:

【腾讯云】轻量 2核2G4M,首年65元

阿里云限时活动-云数据库 RDS MySQL  1核2G配置 1.88/月 速抢

本文由乐趣区整理发布,转载请注明出处,谢谢。

您可能还喜欢...

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据