Vue3 + TS 项目脚手架

一、如何引入本项目

3.1. 基本处理

例如我的应用是 mjtest-front-aitest，则在 mjtest-front-aitest 项目中，先添加 .npmrc，将本仓库 iottest/vue-core 的依赖进行指定，以便于定位内部仓库：

registry=https://registry.npmmirror.com/
@iottest:registry=http://npm.iottest.midea.com/

然后，安装本项目：

npm i -S @iottest/vue-core

3.2. public 资源的引用

注意要在主项目中，拷贝 vue-core 的 pdfjs 和 vs 目录过去，以确保能够正确使用 monaco-editor 和 pdf.js 相关的功能。

二、如何在开发环境实时联调本项目

如果在开发环境中，希望同时修改业务应用 (mjtest-front-aitest)，也希望可以直接在源码修改 vue-core 并实时调试，可以通过 npm link 的方式实现：

1. 克隆 vue-core 仓库

clone vue-core 代码到本地，并执行 npm i 安装依赖包。

2. 将 vue-core 仓库链接到全局依赖

在 vue-core 目录下，执行 npm link 将 vue-core 源码库链接到全局。

3. 在业务中链接 vue-core 引用

在业务应用目录下，引用这个库：

npm link @iottest/vue-core

注意第一节的安装必须先完成，确保业务应用的 package.json 注册了这个依赖

完成后可以发现 业务项目的 node_modules/@iottest/vue-core 变成了符号链接，即为成功。

4. 类型冲突问题解决

实际运行中，会遇到在主项目中进行类型检查 npm run type-check 的冲突：

大概会出现如下的提示：

error TS2322: Type '() => VNode' is not assignable to type '() => VNode<RendererNode, RendererElement, { [key: string]: any; }>'.
  Call signature return types 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' and 'VNode<RendererNode, RendererElement, { [key: string]: any; }>' are incompatible.
    The types of 'type' are incompatible between these types.
      Type 'import("/home/huangwc21/app/mjtest-front-aitest/node_modules/@vue/runtime-core/dist/runtime-core").VNodeTypes' is not assignable to type 'import("/home/huangwc21/app/vue-core/node_modules/@vue/runtime-core/dist/runtime-core").VNodeTypes'.
      ....

产生这个错误的原因在与 vue-core 项目中的 node_modules/@vue 定义与父项目的同一个依赖是不同的副本，导致类型认为不匹配。

为了解决这个问题，需要将 vue-core 里面的 node_modules/@vue 目录删除，并且软链接到父项目的同一个依赖中，即可解决。

在父项目中运行：

rm -rf node_modules/@iottest/vue-core/node_modules/@vue
ln -s $PWD/node_modules/@vue node_modules/@iottest/vue-core/node_modules/

三、如何发布

在 vue-core 项目中，直接 npm publish 即可，注意本项目仅发布源码，无需编译过程。

npm login --registry http://npm.iottest.midea.com
npm publish

GitLab CI 自动发布：（调整中，略）

四、如何实装构建业务项目

（略）先参考 mjtest-front-aitest 项目，更多指引及 Demo 项目后续更新。