Appearance
初始化项目根目录
pnpm init在package.json里加一行 "private": true 加这个为防止我们意外地将私有项目发布
json
{
"name": "monorepo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"private": true,
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"keywords": [],
"author": "",
"license": "ISC"
}按照 pnpm 官网指导在根目录创建 pnpm-workspace.yaml 文件
yaml
packages:
# 放置各种项目
- 'packages/*'
# 放置各种公用代码
- '_public_/**'初始化目录
Public > components
Public > utils
将 _public_ 文件夹下的模块初始化,添加一下 "private": true ,name 字段修改成自定义名称
同上步骤修改 utils
2.5:新建 index.js
在 components & utils 目录下新建 index.js 文件
这里要注意,如果是用 ts 请创建 index.ts 文件对应修改package.json 的mian
这时候需要思考一个问题,components 与 utils 的定位。对于组件我们需要模板,而工具库我们是不需要的。所以需要对 components 进行 git 初始化,
在该目录下新建一个组件文件夹 components
执行命令 pnpm i vue ant-design-vue loading
pnpm i vue ant-design-vue lodash-es同时新建两个组件 button.vue & switch.vue 文件
components/index.js 中导出两个组件
import Button from './components/button.vue'
import Switch from './components/switch.vue'
export {
Button,
Switch
}在 utils 里新建一个工具函数 fun.js
// 调用弹框提示
export const windowAlert = (str) => {
console.log(str)
}
export const add = (a, b) => {
console.log(`相加的结果为:${a+b}`)
}在 index.js 中引入 fun.js
export * from './fun.js'2.6:创建子项目
在 packages 里创建项目 demo1
执行 pnpm create vite 然后按照提示选择自己想要创建的项目
同理创建 demo2
2.7:安装公用组件、工具
如果要安装到根项目中(即全局项目中)那么可以在指令后面加上 -w
执行命令: pnpm i lu-components lu-utils -w
项目vite 3.0解析有问题
升级
"@vitejs/plugin-vue": "^5.0.4",
"typescript": "^5.2.2",
"vite": "^5.2.0",
"vue-tsc": "^2.0.6"
