pnpm 好处:只要用pnpm安装的依赖,他会在你电脑的全局的磁盘的某个地方打一个备份,然后将来在任意的项目里再去下载相同的依赖,就不会先去下载,而是先读取电脑本机里面有没有这个包,有的话直接用软链接链接,从而大大的减少了电脑磁盘的占用量。
首先创建一个空文件夹,用编辑器打开
第一步需要工程化项目,首先得到一个package.json文件
pnpm init
第二部手动创建pnpm-workspace.yaml文件
文件中的内容直接采用官网内容个性化修改即可,这里packages、components、api文件夹都需要手动创建
首先先api,
先工程化api项目,得到package.json文件
cd api
pnpm init
然后再这个项目中安装axios依赖
pnpm add axios
然后再api文件夹创建base.js文件
import axios from "axios";
let Axios = axios.create({
baseURL:'/'
})
export default Axios
然后再新建一个文件user.js
import Axios from "./base";
export const getUser = (data) => Axios.get(data);
接下来暴露,在api文件夹里创建index.js,为什么叫index.js呢,因为在程序执行的时候,在package文件里面一般有一个main为主入口,这两个需要相对应
之后package中需要修改内容,一般来说版本号每次修改都需要修改一下,最好加个小版本
然后name需要改一下,防止你在下载的时候,与npm包里面重名,把远程包也给下载下来,private设置为true
然后再package文件夹里面创建一个vue项目web
npm create vite
创建完项目之后,进入该文件夹,下载依赖
pnpm i
要再下载刚刚创建的api方法,需要再下载依赖
pnpm add @ytz/api
这时候web的package文件夹里面就会有下载信息
在app.vue中打印引入的函数,即可打印出结果
<script setup>
import { getUser } from "@ytz/api";
console.log(getUser);
</script>
component文件夹同理
这时候开发和最后构建的时候都没有问题,但是我构建之后打开构建的html文件报找不到文件的错误,这是因为构建的路径不对,由于我这个项目是vite,所以需要加上base属性