ElementPlusViteStarterPnpm版本
2024-09-06 04:27:46
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,右边是官方的,可以看到基本一致:
6 源码
最新文章
- hihoCoder 1425 : What a Beautiful Lake(美丽滴湖)
- Guava学习笔记:Immutable(不可变)集合
- Ubuntu 14.04 下 Chromium 出现 未安装Adobe Flash Player 问题解决
- C# 操作Word知识汇总
- leetcode算法
- D3.js 插入元素,删除元素
- 161018--NOIP模拟
- cocos2d-x 3.2 它 三消游戏——万圣节大作战
- JEMETER 录制
- iOS 自定义导航栏笔记
- [SinGuLaRiTy] 字节大小
- LinkCode 第k个排列
- HDU 6200 2017沈阳网络赛 树上区间更新,求和
- Spring Security Oauth2 permitAll()方法小记
- Postman-----设置环境变量
- springmvc读取服务器磁盘图片,显示于前台页面
- 2.1《想成为黑客,不知道这些命令行可不行》(Learn Enough Command Line to Be Dangerous)——重定向文件和添加文件
- AutoMapper在MVC中的运用06-一次性定义映射、复杂类型属性映射
- C#常用特性
- 2、一、Introduction(入门):1、Application Fundamentals(应用程序基础)
热门文章
- kubernetes和docker----2.学习Pod资源
- Django Admin 配置和定制基本功能(基本二次开发配置)
- ”capslock+“ 一款超级文本编辑外挂
- pytorch(02)tensor的概念以及创建
- GNS3通过“云”连接到虚拟机实验
- Java I/O流 05
- Java 多线程 02
- 2020年12月-第01阶段-前端基础-表格 table
- C# 基础 - 文件对话框
- 【python+selenium的web自动化】- 元素的常用操作详解(一)