@varlet/cli 1.24.5-alpha.1640960824176 → 1.24.6-alpha.1641735742059

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.en-US.md CHANGED
@@ -144,7 +144,7 @@ module.exports = {
144
144
  header: {
145
145
  darkMode: null,
146
146
  i18n: null,
147
- github: 'https://github.com/haoziqaq/varlet',
147
+ github: 'https://github.com/varletjs/varlet',
148
148
  },
149
149
  menu: [
150
150
  {
@@ -186,7 +186,7 @@ module.exports = {
186
186
  header: {
187
187
  darkMode: null,
188
188
  i18n: null,
189
- github: 'https://github.com/haoziqaq/varlet',
189
+ github: 'https://github.com/varletjs/varlet',
190
190
  },
191
191
  },
192
192
  }
@@ -256,12 +256,6 @@ varlet-cli changelog
256
256
  varlet-cli release
257
257
  ```
258
258
 
259
- #### Quickly create a component folder
260
-
261
- ```shell
262
- varlet-cli create <componentName>
263
- ```
264
-
265
259
  #### Generate a project template
266
260
  ```shell
267
261
  varlet-cli gen <projectName>
@@ -383,6 +377,6 @@ create `tsconfig.json`
383
377
 
384
378
  ### Contributors
385
379
 
386
- <a href="https://github.com/haoziqaq/varlet/graphs/contributors">
380
+ <a href="https://github.com/varletjs/varlet/graphs/contributors">
387
381
  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
388
382
  </a>
package/README.md CHANGED
@@ -140,7 +140,7 @@ module.exports = {
140
140
  header: {
141
141
  darkMode: null,
142
142
  i18n: null,
143
- github: 'https://github.com/haoziqaq/varlet',
143
+ github: 'https://github.com/varletjs/varlet',
144
144
  },
145
145
  menu: [
146
146
  {
@@ -182,7 +182,7 @@ module.exports = {
182
182
  header: {
183
183
  darkMode: null,
184
184
  i18n: null,
185
- github: 'https://github.com/haoziqaq/varlet',
185
+ github: 'https://github.com/varletjs/varlet',
186
186
  },
187
187
  },
188
188
  }
@@ -252,12 +252,6 @@ varlet-cli changelog
252
252
  varlet-cli release
253
253
  ```
254
254
 
255
- #### 快速创建一个组件文件夹
256
-
257
- ```shell
258
- varlet-cli create <componentName>
259
- ```
260
-
261
255
  #### 生成一个项目模板
262
256
  ```shell
263
257
  varlet-cli gen <projectName>
@@ -378,6 +372,6 @@ src/*/__tests__/**
378
372
 
379
373
  ### Contributors
380
374
 
381
- <a href="https://github.com/haoziqaq/varlet/graphs/contributors">
375
+ <a href="https://github.com/varletjs/varlet/graphs/contributors">
382
376
  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
383
377
  </a>
@@ -2,8 +2,8 @@
2
2
 
3
3
  ### Reference
4
4
 
5
- [@varlet/cli 中文文档](https://github.com/haoziqaq/varlet/blob/dev/packages/varlet-cli/README.md)
6
- [@varlet/cli documentation](https://github.com/haoziqaq/varlet/blob/dev/packages/varlet-cli/README.en-US.md)
5
+ [@varlet/cli 中文文档](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.md)
6
+ [@varlet/cli documentation](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/README.en-US.md)
7
7
 
8
8
  ### Quickstart
9
9
 
@@ -52,12 +52,6 @@ or
52
52
  pnpm test:watchAll
53
53
  ```
54
54
 
55
- #### Quickly create a component folder
56
-
57
- ```shell
58
- pnpm run create <componentName>
59
- ```
60
-
61
55
  #### Mount git hook
62
56
 
63
57
  ```shell
@@ -22,7 +22,6 @@
22
22
  "build": "varlet-cli build",
23
23
  "preview": "varlet-cli preview",
24
24
  "compile": "varlet-cli compile",
25
- "create": "varlet-cli create",
26
25
  "lint": "varlet-cli lint",
27
26
  "changelog": "varlet-cli changelog",
28
27
  "release": "pnpm compile && varlet-cli release",
@@ -62,7 +62,7 @@ module.exports = {
62
62
  },
63
63
  header: {
64
64
  i18n: null,
65
- github: 'https://github.com/haoziqaq/varlet',
65
+ github: 'https://github.com/varletjs/varlet',
66
66
  },
67
67
  menu: [
68
68
  {
@@ -100,7 +100,7 @@ module.exports = {
100
100
  },
101
101
  header: {
102
102
  i18n: null,
103
- github: 'https://github.com/haoziqaq/varlet',
103
+ github: 'https://github.com/varletjs/varlet',
104
104
  },
105
105
  },
106
106
  }
@@ -96,7 +96,6 @@ function lint() {
96
96
  './packages/varlet-cli/src',
97
97
  './packages/varlet-ui/src',
98
98
  './packages/varlet-icons/lib',
99
- './packages/varlet-markdown-loader',
100
99
  './packages/varlet-markdown-vite-plugin',
101
100
  './packages/varlet-touch-emulator',
102
101
  './packages/varlet-vscode-extension/src',
@@ -1 +1,3 @@
1
- export declare function release(): Promise<void>;
1
+ export declare function release(cmd: {
2
+ remote?: string;
3
+ }): Promise<void>;
@@ -88,7 +88,8 @@ function publish(preRelease) {
88
88
  });
89
89
  });
90
90
  }
91
- function pushGit(version) {
91
+ function pushGit(version, remote) {
92
+ if (remote === void 0) { remote = 'origin'; }
92
93
  return __awaiter(this, void 0, void 0, function () {
93
94
  var s, ret;
94
95
  return __generator(this, function (_a) {
@@ -104,7 +105,7 @@ function pushGit(version) {
104
105
  return [4 /*yield*/, (0, execa_1.default)('git', ['tag', "v".concat(version)])];
105
106
  case 3:
106
107
  _a.sent();
107
- return [4 /*yield*/, (0, execa_1.default)('git', ['push', 'origin', "v".concat(version)])];
108
+ return [4 /*yield*/, (0, execa_1.default)('git', ['push', remote, "v".concat(version)])];
108
109
  case 4:
109
110
  _a.sent();
110
111
  return [4 /*yield*/, (0, execa_1.default)('git', ['push'])];
@@ -127,13 +128,13 @@ function updateVersion(version) {
127
128
  (0, fs_extra_1.writeFileSync)(file, JSON.stringify(config, null, 2));
128
129
  });
129
130
  }
130
- function release() {
131
+ function release(cmd) {
131
132
  return __awaiter(this, void 0, void 0, function () {
132
- var currentVersion, name_1, ret, type, isPreRelease, expectVersion, confirm_1, e_1, error_1;
133
- return __generator(this, function (_a) {
134
- switch (_a.label) {
133
+ var currentVersion, name_1, ret, type, isPreRelease, expectVersion, confirm_1, _a, error_1;
134
+ return __generator(this, function (_b) {
135
+ switch (_b.label) {
135
136
  case 0:
136
- _a.trys.push([0, 13, , 14]);
137
+ _b.trys.push([0, 13, , 14]);
137
138
  currentVersion = require((0, path_1.resolve)(constant_1.CWD, 'package.json')).version;
138
139
  if (!currentVersion) {
139
140
  logger_1.default.error('Your package is missing the version field');
@@ -141,7 +142,7 @@ function release() {
141
142
  }
142
143
  return [4 /*yield*/, isWorktreeEmpty()];
143
144
  case 1:
144
- if (!(_a.sent())) {
145
+ if (!(_b.sent())) {
145
146
  logger_1.default.error('Git worktree is not empty, please commit changed');
146
147
  return [2 /*return*/];
147
148
  }
@@ -154,7 +155,7 @@ function release() {
154
155
  },
155
156
  ])];
156
157
  case 2:
157
- ret = _a.sent();
158
+ ret = _b.sent();
158
159
  type = ret[name_1];
159
160
  isPreRelease = type.startsWith('pre');
160
161
  expectVersion = semver_1.default.inc(currentVersion, type, "alpha.".concat(Date.now()));
@@ -168,7 +169,7 @@ function release() {
168
169
  },
169
170
  ])];
170
171
  case 3:
171
- confirm_1 = _a.sent();
172
+ confirm_1 = _b.sent();
172
173
  if (!confirm_1[name_1]) {
173
174
  return [2 /*return*/];
174
175
  }
@@ -176,35 +177,33 @@ function release() {
176
177
  if (!!isPreRelease) return [3 /*break*/, 6];
177
178
  return [4 /*yield*/, (0, changelog_1.changelog)()];
178
179
  case 4:
179
- _a.sent();
180
- return [4 /*yield*/, pushGit(expectVersion)];
180
+ _b.sent();
181
+ return [4 /*yield*/, pushGit(expectVersion, cmd.remote)];
181
182
  case 5:
182
- _a.sent();
183
- _a.label = 6;
183
+ _b.sent();
184
+ _b.label = 6;
184
185
  case 6: return [4 /*yield*/, publish(isPreRelease)];
185
186
  case 7:
186
- _a.sent();
187
+ _b.sent();
188
+ logger_1.default.success("Release version ".concat(expectVersion, " successfully!"));
187
189
  if (!isPreRelease) return [3 /*break*/, 12];
188
- _a.label = 8;
190
+ _b.label = 8;
189
191
  case 8:
190
- _a.trys.push([8, 11, , 12]);
192
+ _b.trys.push([8, 11, , 12]);
191
193
  return [4 /*yield*/, (0, execa_1.default)('git', ['restore', '**/package.json'])];
192
194
  case 9:
193
- _a.sent();
194
- return [4 /*yield*/, (0, execa_1.default)('git', ['restore', 'package.json'])
195
- // eslint-disable-next-line no-empty
196
- ];
195
+ _b.sent();
196
+ return [4 /*yield*/, (0, execa_1.default)('git', ['restore', 'package.json'])];
197
197
  case 10:
198
- _a.sent();
198
+ _b.sent();
199
199
  return [3 /*break*/, 12];
200
200
  case 11:
201
- e_1 = _a.sent();
201
+ _a = _b.sent();
202
+ logger_1.default.error('Restore package.json has failed, please restore manually');
202
203
  return [3 /*break*/, 12];
203
- case 12:
204
- logger_1.default.success("Release version ".concat(expectVersion, " successfully!"));
205
- return [3 /*break*/, 14];
204
+ case 12: return [3 /*break*/, 14];
206
205
  case 13:
207
- error_1 = _a.sent();
206
+ error_1 = _b.sent();
208
207
  logger_1.default.error(error_1.toString());
209
208
  process.exit(1);
210
209
  return [3 /*break*/, 14];
package/lib/index.js CHANGED
@@ -64,7 +64,11 @@ program
64
64
  .option('-f --file <file>', 'Changelog filename')
65
65
  .description('Generate changelog')
66
66
  .action(changelog_1.changelog);
67
- program.command('release').description('Release all packages and generate changelogs').action(release_1.release);
67
+ program
68
+ .command('release')
69
+ .option('-r --remote <remote>', 'Remote name')
70
+ .description('Release all packages and generate changelogs')
71
+ .action(release_1.release);
68
72
  program.command('commit-lint <gitParams>').description('Lint commit message').action(commitLint_1.commitLint);
69
73
  program.on('command:*', function (_a) {
70
74
  var _b = __read(_a, 1), cmd = _b[0];
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@varlet/cli",
3
- "version": "1.24.5-alpha.1640960824176",
3
+ "version": "1.24.6-alpha.1641735742059",
4
4
  "description": "cli of varlet",
5
5
  "bin": {
6
6
  "varlet-cli": "./lib/index.js"
@@ -22,16 +22,16 @@
22
22
  ],
23
23
  "repository": {
24
24
  "type": "git",
25
- "url": "https://github.com/haoziqaq/varlet.git"
25
+ "url": "https://github.com/varletjs/varlet.git"
26
26
  },
27
27
  "bugs": {
28
- "url": "https://github.com/haoziqaq/varlet/issues"
28
+ "url": "https://github.com/varletjs/varlet/issues"
29
29
  },
30
30
  "gitHead": "ee9c3866bedad96c86365b0f9888a3a6bb781b1f",
31
31
  "dependencies": {
32
- "@varlet/icons": "1.24.5-alpha.1640960824176",
33
- "@varlet/markdown-vite-plugin": "1.24.5-alpha.1640960824176",
34
- "@varlet/touch-emulator": "1.24.5-alpha.1640960824176",
32
+ "@varlet/icons": "1.24.6-alpha.1641735742059",
33
+ "@varlet/markdown-vite-plugin": "1.24.6-alpha.1641735742059",
34
+ "@varlet/touch-emulator": "1.24.6-alpha.1641735742059",
35
35
  "@babel/core": "^7.14.8",
36
36
  "@babel/preset-env": "^7.14.8",
37
37
  "@babel/preset-typescript": "^7.14.5",
@@ -73,7 +73,7 @@
73
73
  "@types/lodash-es": "^4.17.5"
74
74
  },
75
75
  "peerDependencies": {
76
- "@varlet/touch-emulator": "1.24.5-alpha.1640960824176",
76
+ "@varlet/touch-emulator": "1.24.6-alpha.1641735742059",
77
77
  "@vue/test-utils": "^2.0.0-rc.6",
78
78
  "vue": "3.2.16",
79
79
  "vue-router": "4.0.12",
@@ -85,5 +85,5 @@
85
85
  "dev": "tsc --watch",
86
86
  "build": "tsc"
87
87
  },
88
- "readme": "# @varlet/cli\n\n开箱即用的 `Vue3组件库` 快速成型工具,提供了一系列命令和工具去解决组件库开发上的问题\n\n### 特性\n\n- 1.开箱即用的组件库开发环境\n- 2.开箱即用的组件库编译工具,支持导出 `esm` 和 `umd` 两种模块代码\n- 3.基于配置文件的组件库文档站点,支持百度统计和主题定制\n- 4.支持 `单文件组件(sfc)` 和 `tsx,jsx` 两种风格的组件库编写风格\n- 5.开箱即用的代码检查工具\n- 6.开箱即用的单元测试工具\n- 7.开箱即用的代码发布工具,发布到 npm 和 github, 并自动生成更新日志\n- 8.支持 `Typescript`\n- 9.支持 `暗黑模式`\n- 10.基于 `pnpm`\n\n### 快速开始\n\n`@varlet/cli` 内置了 `单文件组件(sfc)` 和 `tsx, jsx` 两种风格的组件库项目模板,可以通过 `gen` 命令直接生成。\n帮助用户直接进入组件本身的开发,推荐使用 `pnpm` 作为包管理工具。\n\n```shell\n# 安装命令行工具\npnpm add @varlet/cli -g\n# 使用 gen 命令生成项目\nvarlet-cli gen 项目名\ncd 项目名\npnpm install\npnpm dev\n```\n\n然后通过简单修改一些组件库模板的基础信息,就可以开始组件库的开发了\n\n## 高级定制\n\n### 配置文件\n\n项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `host` | 开发服务器主机 | _number_ | `localhost` |\n| `port` | 开发服务器端口 | _number_ | `8080` |\n| `name` | 组件库全名\t| _string_ | `Varlet` |\n| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |\n| `title` | 文档中组件库的标题 | _string_ | `VARLET` |\n| `logo` | 文档中组件库的logo | _string_ | `-` |\n| `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |\n| `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |\n| `themes` | 文档主题 | _SiteThemes_ | `-` |\n| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |\n| `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |\n| `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |\n| `pc` | pc端文档结构配置 | _SitePC_ | `-` |\n| `mobile` | mobile端文档结构配置 | _SiteMobile_ | `-` |\n| `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |\n\n#### 模块适配对象\n\n一些外部依赖可能需要进行模块语法的适配,以达到可以正确编译到 `commonjs` 和 `esmodule` 的目的,例如 `dayjs` 的 `esmodule` 写法是\n\n```js\nimport dayjs from 'dayjs/esm'\n```\n\n而为了构建 `commonjs` 时的写法是\n\n```js\nimport * as dayjs from 'dayjs'\n```\n\n在项目中我们拥抱 `esmodule` 模块使用第一种写法,并做如下配置进行适配\n\n```js\n// varlet.config.js\nmodule.exports = {\n moduleCompatible: {\n \"import dayjs from 'dayjs/esm'\\n\": \"import * as dayjs from 'dayjs'\\n\"\n }\n}\n```\n\n#### SiteThemes\n\n主题变量相关,由于默认的主题变量可能时常修改,以 `varlet` 官方文档的主题为准\n\n| 参数 |\n| ----- |\n| `color-body` |\n| `color-bar` |\n| `color-sub-bar` |\n| `color-text` |\n| `color-sub-text` |\n| `color-border` |\n| `color-shadow` |\n| `color-introduce-border` |\n| `color-primary` |\n| `color-link` |\n| `color-type` |\n| `color-progress` |\n| `color-progress-track` |\n| `color-side-bar` |\n| `color-side-bar-active-background` |\n| `color-app-bar` |\n| `color-nav-button-hover-background` |\n| `color-pc-language-active` |\n| `color-pc-language-active-background` |\n| `color-mobile-cell-hover` |\n| `color-mobile-language-active` |\n| `color-mobile-language-active-background` |\n\n#### SiteHighlight\n\n代码片段高亮,基于[highlight.js](https://highlightjs.org/)\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `style` | highlight的css地址 | _string_ | `-` |\n\n#### SiteAnalysis\n\n统计埋点相关\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `baidu` | 百度统计脚本地址 | _string_ | `-` |\n\n#### SitePC, SiteMobile\n\n文档结构部分相关,示例配置如下\n\n```js\nmodule.exports = {\n pc: {\n redirect: '/home',\n title: {\n 'zh-CN': '一个组件库',\n },\n header: {\n darkMode: null,\n i18n: null,\n github: 'https://github.com/haoziqaq/varlet',\n },\n menu: [\n {\n text: {\n 'zh-CN': '开发指南',\n },\n // 侧边栏菜单目录\n type: 1,\n },\n {\n text: {\n 'zh-CN': '基本介绍',\n },\n doc: 'home',\n // 索引项目根目录下的md文档\n type: 3,\n },\n {\n text: {\n 'zh-CN': '基础组件',\n },\n type: 1,\n },\n {\n text: {\n 'zh-CN': 'Button 按钮',\n },\n doc: 'button',\n // 索引组件根目录下的md文档\n type: 2,\n },\n ],\n },\n mobile: {\n redirect: '/home',\n title: {\n 'zh-CN': '一个组件库',\n },\n header: {\n darkMode: null,\n i18n: null,\n github: 'https://github.com/haoziqaq/varlet',\n },\n },\n}\n```\n\n### 命令相关\n\n#### 启动开发服务器\n\n```shell\nvarlet-cli dev\n```\n\n#### 构建文档站点\n\n```shell\nvarlet-cli build\n```\n\n#### 预览文档站点\n\n```shell\nvarlet-cli preview\n```\n\n#### 构建组件库代码\n\n```shell\nvarlet-cli compile\n```\n\n#### 执行所有的单元测试\n\n```shell\nvarlet-cli test\n```\n\n#### 以 watch 模式执行单元测试\n\n```shell\nvarlet-cli test -w\nor\nvarlet-cli test -wa\n```\n\n#### 检查代码\n\n```shell\nvarlet-cli lint\n```\n\n#### 校验提交信息\n\n```shell\nvarlet-cli commit-lint\n```\n\n#### 生成更新日志\n\n```shell\nvarlet-cli changelog\n```\n\n#### 发布组件库\n\n```shell\nvarlet-cli release\n```\n\n#### 快速创建一个组件文件夹\n\n```shell\nvarlet-cli create <componentName>\n```\n\n#### 生成一个项目模板\n```shell\nvarlet-cli gen <projectName>\n```\n\n### babel\n\n对 `babel` 进行配置,首先在 `package.json` 中指定目标浏览器\n\n```json\n{\n \"browserslist\": [\n \"Chrome >= 51\",\n \"iOS >= 10\"\n ]\n}\n```\n\n创建 `babel.config,js`\n\n```js\n// babel.config.js\nmodule.exports = {\n presets: [\n [\n '@varlet/cli/preset',\n {\n loose: process.env.NODE_ENV === 'compile',\n },\n ],\n ],\n}\n```\n\n### git 和 npm\n\n#### git-hook\n\n`husky`,`lint-staged` 配合 `eslint`,`stylelint`,`varlet-cli commit-lint` 做commit前的检查,`package.json` 配置如下\n\n```json\n{\n \"scripts\": {\n \"prepare\": \"husky install\"\n },\n \"lint-staged\": {\n \"*.{ts,tsx,js,vue,less}\": \"prettier --write\",\n \"*.{ts,tsx,js,vue}\": \"eslint --fix\",\n \"*.{vue,css,less}\": \"stylelint --fix\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"ignorePatterns\": [\n \"es/**\",\n \"umd/**\",\n \"site/**\",\n \"public/**\",\n \"src/*/__tests__/**\",\n \".varlet/**\"\n ],\n \"extends\": [\n \"@varlet\"\n ]\n },\n \"stylelint\": {\n \"extends\": [\n \"@varlet/stylelint-config\"\n ],\n \"ignoreFiles\": [\n \"es/**\",\n \"umd/**\",\n \"site/**\",\n \"coverage/**\",\n \"public/**\",\n \"highlight/**\"\n ]\n }\n}\n```\n\n创建 `.prettierignore`\n\n```text\n// .prettierignore\ncoverage/**\nes/**\numd/**\nsite/**\npublic/**\nsrc/*/__tests__/**\n*.md\n```\n\n### typescript\n\n创建 `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"strict\": true,\n \"downlevelIteration\": true,\n \"declaration\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowJs\": true,\n \"lib\": [\"esnext\", \"dom\"],\n \"allowSyntheticDefaultImports\": true,\n \"jsx\": \"preserve\"\n }\n}\n```\n\n#### 发布前注意\n\n1. `npm` 的仓库源必须指向 `npm` 官方镜像\n2. 执行 `npm login` 进行登录\n\n### Contributors\n\n<a href=\"https://github.com/haoziqaq/varlet/graphs/contributors\">\n <img src=\"https://contrib.rocks/image?repo=haoziqaq/varlet\" />\n</a>"
88
+ "readme": "# @varlet/cli\n\n开箱即用的 `Vue3组件库` 快速成型工具,提供了一系列命令和工具去解决组件库开发上的问题\n\n### 特性\n\n- 1.开箱即用的组件库开发环境\n- 2.开箱即用的组件库编译工具,支持导出 `esm` 和 `umd` 两种模块代码\n- 3.基于配置文件的组件库文档站点,支持百度统计和主题定制\n- 4.支持 `单文件组件(sfc)` 和 `tsx,jsx` 两种风格的组件库编写风格\n- 5.开箱即用的代码检查工具\n- 6.开箱即用的单元测试工具\n- 7.开箱即用的代码发布工具,发布到 npm 和 github, 并自动生成更新日志\n- 8.支持 `Typescript`\n- 9.支持 `暗黑模式`\n- 10.基于 `pnpm`\n\n### 快速开始\n\n`@varlet/cli` 内置了 `单文件组件(sfc)` 和 `tsx, jsx` 两种风格的组件库项目模板,可以通过 `gen` 命令直接生成。\n帮助用户直接进入组件本身的开发,推荐使用 `pnpm` 作为包管理工具。\n\n```shell\n# 安装命令行工具\npnpm add @varlet/cli -g\n# 使用 gen 命令生成项目\nvarlet-cli gen 项目名\ncd 项目名\npnpm install\npnpm dev\n```\n\n然后通过简单修改一些组件库模板的基础信息,就可以开始组件库的开发了\n\n## 高级定制\n\n### 配置文件\n\n项目根目录下的 `varlet.config.js` 用来管理整个组件库项目的具体细节\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `host` | 开发服务器主机 | _number_ | `localhost` |\n| `port` | 开发服务器端口 | _number_ | `8080` |\n| `name` | 组件库全名\t| _string_ | `Varlet` |\n| `namespace` | 组件库命名空间, 会作为组件前缀 | _string_ | `var` |\n| `title` | 文档中组件库的标题 | _string_ | `VARLET` |\n| `logo` | 文档中组件库的logo | _string_ | `-` |\n| `defaultLanguage` | 文档默认语言 | _string_ | `zh-CN` |\n| `useMobile` | 是否显示右侧手机预览 | _boolean_ | `false` |\n| `themes` | 文档主题 | _SiteThemes_ | `-` |\n| `darkThemes` | 暗黑模式文档主题 | _SiteThemes_ | `-` |\n| `highlight` | 文档代码片段样式相关 | _SiteHighlight_ | `-` |\n| `analysis` | 文档统计相关 | _SiteAnalysis_ | `-` |\n| `pc` | pc端文档结构配置 | _SitePC_ | `-` |\n| `mobile` | mobile端文档结构配置 | _SiteMobile_ | `-` |\n| `moduleCompatible` | 模块兼容配置 | _Record<string, string>_ | `-` |\n\n#### 模块适配对象\n\n一些外部依赖可能需要进行模块语法的适配,以达到可以正确编译到 `commonjs` 和 `esmodule` 的目的,例如 `dayjs` 的 `esmodule` 写法是\n\n```js\nimport dayjs from 'dayjs/esm'\n```\n\n而为了构建 `commonjs` 时的写法是\n\n```js\nimport * as dayjs from 'dayjs'\n```\n\n在项目中我们拥抱 `esmodule` 模块使用第一种写法,并做如下配置进行适配\n\n```js\n// varlet.config.js\nmodule.exports = {\n moduleCompatible: {\n \"import dayjs from 'dayjs/esm'\\n\": \"import * as dayjs from 'dayjs'\\n\"\n }\n}\n```\n\n#### SiteThemes\n\n主题变量相关,由于默认的主题变量可能时常修改,以 `varlet` 官方文档的主题为准\n\n| 参数 |\n| ----- |\n| `color-body` |\n| `color-bar` |\n| `color-sub-bar` |\n| `color-text` |\n| `color-sub-text` |\n| `color-border` |\n| `color-shadow` |\n| `color-introduce-border` |\n| `color-primary` |\n| `color-link` |\n| `color-type` |\n| `color-progress` |\n| `color-progress-track` |\n| `color-side-bar` |\n| `color-side-bar-active-background` |\n| `color-app-bar` |\n| `color-nav-button-hover-background` |\n| `color-pc-language-active` |\n| `color-pc-language-active-background` |\n| `color-mobile-cell-hover` |\n| `color-mobile-language-active` |\n| `color-mobile-language-active-background` |\n\n#### SiteHighlight\n\n代码片段高亮,基于[highlight.js](https://highlightjs.org/)\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `style` | highlight的css地址 | _string_ | `-` |\n\n#### SiteAnalysis\n\n统计埋点相关\n\n| 参数 | 说明 | 类型 | 默认值 |\n| ----- | -------------- | -------- | ---------- |\n| `baidu` | 百度统计脚本地址 | _string_ | `-` |\n\n#### SitePC, SiteMobile\n\n文档结构部分相关,示例配置如下\n\n```js\nmodule.exports = {\n pc: {\n redirect: '/home',\n title: {\n 'zh-CN': '一个组件库',\n },\n header: {\n darkMode: null,\n i18n: null,\n github: 'https://github.com/varletjs/varlet',\n },\n menu: [\n {\n text: {\n 'zh-CN': '开发指南',\n },\n // 侧边栏菜单目录\n type: 1,\n },\n {\n text: {\n 'zh-CN': '基本介绍',\n },\n doc: 'home',\n // 索引项目根目录下的md文档\n type: 3,\n },\n {\n text: {\n 'zh-CN': '基础组件',\n },\n type: 1,\n },\n {\n text: {\n 'zh-CN': 'Button 按钮',\n },\n doc: 'button',\n // 索引组件根目录下的md文档\n type: 2,\n },\n ],\n },\n mobile: {\n redirect: '/home',\n title: {\n 'zh-CN': '一个组件库',\n },\n header: {\n darkMode: null,\n i18n: null,\n github: 'https://github.com/varletjs/varlet',\n },\n },\n}\n```\n\n### 命令相关\n\n#### 启动开发服务器\n\n```shell\nvarlet-cli dev\n```\n\n#### 构建文档站点\n\n```shell\nvarlet-cli build\n```\n\n#### 预览文档站点\n\n```shell\nvarlet-cli preview\n```\n\n#### 构建组件库代码\n\n```shell\nvarlet-cli compile\n```\n\n#### 执行所有的单元测试\n\n```shell\nvarlet-cli test\n```\n\n#### 以 watch 模式执行单元测试\n\n```shell\nvarlet-cli test -w\nor\nvarlet-cli test -wa\n```\n\n#### 检查代码\n\n```shell\nvarlet-cli lint\n```\n\n#### 校验提交信息\n\n```shell\nvarlet-cli commit-lint\n```\n\n#### 生成更新日志\n\n```shell\nvarlet-cli changelog\n```\n\n#### 发布组件库\n\n```shell\nvarlet-cli release\n```\n\n#### 生成一个项目模板\n```shell\nvarlet-cli gen <projectName>\n```\n\n### babel\n\n对 `babel` 进行配置,首先在 `package.json` 中指定目标浏览器\n\n```json\n{\n \"browserslist\": [\n \"Chrome >= 51\",\n \"iOS >= 10\"\n ]\n}\n```\n\n创建 `babel.config,js`\n\n```js\n// babel.config.js\nmodule.exports = {\n presets: [\n [\n '@varlet/cli/preset',\n {\n loose: process.env.NODE_ENV === 'compile',\n },\n ],\n ],\n}\n```\n\n### git 和 npm\n\n#### git-hook\n\n`husky`,`lint-staged` 配合 `eslint`,`stylelint`,`varlet-cli commit-lint` 做commit前的检查,`package.json` 配置如下\n\n```json\n{\n \"scripts\": {\n \"prepare\": \"husky install\"\n },\n \"lint-staged\": {\n \"*.{ts,tsx,js,vue,less}\": \"prettier --write\",\n \"*.{ts,tsx,js,vue}\": \"eslint --fix\",\n \"*.{vue,css,less}\": \"stylelint --fix\"\n },\n \"eslintConfig\": {\n \"root\": true,\n \"ignorePatterns\": [\n \"es/**\",\n \"umd/**\",\n \"site/**\",\n \"public/**\",\n \"src/*/__tests__/**\",\n \".varlet/**\"\n ],\n \"extends\": [\n \"@varlet\"\n ]\n },\n \"stylelint\": {\n \"extends\": [\n \"@varlet/stylelint-config\"\n ],\n \"ignoreFiles\": [\n \"es/**\",\n \"umd/**\",\n \"site/**\",\n \"coverage/**\",\n \"public/**\",\n \"highlight/**\"\n ]\n }\n}\n```\n\n创建 `.prettierignore`\n\n```text\n// .prettierignore\ncoverage/**\nes/**\numd/**\nsite/**\npublic/**\nsrc/*/__tests__/**\n*.md\n```\n\n### typescript\n\n创建 `tsconfig.json`\n\n```json\n{\n \"compilerOptions\": {\n \"strict\": true,\n \"downlevelIteration\": true,\n \"declaration\": true,\n \"skipLibCheck\": true,\n \"esModuleInterop\": true,\n \"allowJs\": true,\n \"lib\": [\"esnext\", \"dom\"],\n \"allowSyntheticDefaultImports\": true,\n \"jsx\": \"preserve\"\n }\n}\n```\n\n#### 发布前注意\n\n1. `npm` 的仓库源必须指向 `npm` 官方镜像\n2. 执行 `npm login` 进行登录\n\n### Contributors\n\n<a href=\"https://github.com/varletjs/varlet/graphs/contributors\">\n <img src=\"https://contrib.rocks/image?repo=haoziqaq/varlet\" />\n</a>"
89
89
  }
@@ -21,7 +21,7 @@ module.exports = {
21
21
  menu: [],
22
22
  redirect: '/home',
23
23
  title: {
24
- 'zh-CN': 'Varlet 面向Vue3的Material风格移动端组件库',
24
+ 'zh-CN': 'Varlet 面向 Vue3 Material 风格移动端组件库',
25
25
  'en-US': 'Material design mobile components built for Vue3',
26
26
  },
27
27
  header: {
@@ -29,7 +29,7 @@ module.exports = {
29
29
  'zh-CN': '中文',
30
30
  'en-US': 'English',
31
31
  },
32
- github: 'https://github.com/haoziqaq/varlet',
32
+ github: 'https://github.com/varletjs/varlet',
33
33
  darkMode: true,
34
34
  },
35
35
  clipboard: {
@@ -48,7 +48,7 @@ module.exports = {
48
48
  mobile: {
49
49
  redirect: '/home',
50
50
  title: {
51
- 'zh-CN': 'Varlet 面向Vue3的Material风格移动端组件库',
51
+ 'zh-CN': 'Varlet 面向 Vue3 Material 风格移动端组件库',
52
52
  'en-US': 'Material design mobile components built for Vue3',
53
53
  },
54
54
  header: {
@@ -56,7 +56,7 @@ module.exports = {
56
56
  'zh-CN': '中文',
57
57
  'en-US': 'English',
58
58
  },
59
- github: 'https://github.com/haoziqaq/varlet',
59
+ github: 'https://github.com/varletjs/varlet',
60
60
  darkMode: true,
61
61
  },
62
62
  },