walm-alpha-1 v0.0.51

Vue 3 + TypeScript + Vite

This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 <script setup> SFCs, check out the script setup docs to learn more.

Recommended IDE Setup

• VS Code + Volar

Type Support For .vue Imports in TS

Since TypeScript cannot handle type information for .vue imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in .vue imports (for example to get props validation when using manual h(...) calls), you can enable Volar's Take Over mode by following these steps:

1. Run Extensions: Show Built-in Extensions from VS Code's command palette, look for TypeScript and JavaScript Language Features, then right click and select Disable (Workspace). By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
2. Reload the VS Code window by running Developer: Reload Window from the command palette.

You can learn more about Take Over mode here.

背景

Monorepo 是管理项目代码的一种方式，主要手段是通过在一个项目仓库中管理多个模块/仓库包。而 Multirepo 是传统的仓库管理方法，所有的项目包都是独立仓库部署和管理。两种方式对比如下

前者允许多元化发展（各项目可以有自己的构建工具、依赖管理策略、单元测试方法），后者希望集中管理，减少项目间的差异带来的沟通成本。虽然拆分子仓库、拆分子 npm 包是进行项目隔离的天然方案，但当仓库内容出现关联时，没有任何一种调试方式比源码放在一起更高效

Lerna 是业界知名度最高的 Monorepo 管理工具，功能完整。而且目前很多大型开源项目都采用了这种方式，比如 Babel、React、Meteor、Ember、Jest、Vue 等等

Lerna 实现的 Monorepo 多包管理方式优势

• 扁平：同一仓库（项目）下，统一管理维护多个 package

• 集中：在根目录的 node_modules/ 文件夹下维护所有 package 的三方依赖

• 简化：根据文件变动统一执行命令，按需发包，自动升级版本并回写仓库、打 tag

• 高效：有互相依赖的项目直接可直接关联，避免开发人员在多仓库之间切换

安装

全局安装 Lerna

npm install lerna -g

clone 项目，进入项目根目录

lerna init

安装依赖

npm install

执行 lerna bootstrap

开发组件

• 生成组件模板(子组件名称不要用驼峰写法)

  npm run initPackage

  执行本命令会同步在 packages 和 src 的 components 下面同步建立子组件。packages 下面编译打包，src 的 src 的 components 下面用于本地调试

• 本地调试开发

  引入 src 目录下 components 进行本地开发调试，实现热更新 例子

  import walmTable from './components/walm-table/src/walmTable.vue'

• 代码拷贝

  本地开发完成执行

  npm run cpSrc

  将本地组件 src 文件拷贝到 packages 下(注意：组件名一定要保持一致)

  执行 查看本地编译效果

  npm run dev

• 子包编译

  npm run build --workspace=packages/包名

• 总包编译

  npm run buildAll

发布（发布前要先 git 提交代码到库里）

• 子包发布

    #### 全部子包都会发布
  
        npm run publish
  
    #### 发布某个具体子包
  
    npm run publish

• 总包发布 (需要手动更改根目录 package.json 总包版本号)

  npm run publishAll

注：为了保证子组件和全局总包的版本一致性，子组件单独编译，子包编译会同步把总包一起编译, 执行完 npm run publish 发布完子组件后，手动 修改下 package.json 总包版本号 提交后执行 npm run publishAll,发布下总包

使用引用

组件库支持多种引入方式

• 全局引入

import walm from 'walm-alpha-1'

import {WalmButton, walmcardalpha2} from 'walm-alpha-1'

• 独立组件引入

import WalmButton from 'walmbutton2'

• 使用

createApp(App).use(walm).mount('#app')

注意事项

1.切换公网

 发布上传至npm,一定要切公网

2.发布时候会提示选择版本号

SemVer 规范的标准版本号采用 X.Y.Z 的格式，其中 X、Y 和 Z 为非负的整数，且禁止在数字前方补零。X 是主版本号、Y 是次版本号、而 Z 为修订号。

主版本号(major)：当你做了不兼容的 API 修改

次版本号(minor)：当你做了向下兼容的功能性新增

修订号(patch)：当你做了向下兼容的问题修正。

3.发布登录问题

发布前先登录 npm, 执行 npm login

输入用户名，密码，邮箱，邮箱验证码

有时候会出现发布失败

需要切换 npm 源

安装 nrm,切换 npm 源

执行 nrm use npm

4. 没有 git commit 提交直接发布错误

使用命令行 git comimit 或者版本可视化管理工具 sourceTree 提交代码

5.没有修改总包的版本号发布造成错误

导致重复版本发布