参考文档:

blog.csdn.net/weixin_4582…

下面将记录在学习该文档功能的过程中自己学习的到的一下经验,非常感谢作者的分享

1. 安装功能管理器pnpm

前提:node 版本必须大于16.14版本 This version of pnpm requires at least Node.js v16.14

2.初始化项目

创建项目文件夹 mkdir vue3-cli

初始化项目信息 pnpm init

{
  "name": "vue3-cli",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

3.包管理

新建一个 packages 文件夹用于后续来存放我们的各种包。假如我们有了 a 包和 b 包,在 packages 下新建 a 和 b(这里用于测试 pnpm 的本地引用),然后分别在 a 和 b 目录下执行pnpm init初始化这里需要改一下包名，我这里将 name 改成@january/a 表示这个 a 包是属于 january 这个组织下的。所以记住发布之前要登录 npm 新建一个组织；例如 january。比如此时 a 的 package.json

4.在项目中添加ts配置

1、添加ts依赖 pnpm add typescript less -D -w // 添加了ts less两个依赖

2、创建ts配置信息 npx tsc --init

5.创建vue3.0项目

参考之前的文档 juejin.cn/post/725697…

问题一:创建项目的是*.vue需要进行配置才可以消除ts报警此时我们需要新建一个声明文件vue-shim.d.ts,让 ts 认识*.vue的文件文件内容:

declare module '*.vue' {
    import type { DefineComponent } from 'vue'
    const component: DefineComponent<{}, {}, any>
    export default component
}
declare module 'url'

创建一个完整的Vue3组件库