@varlet/cli 2.0.0-alpha.1664332224687 → 2.0.0-alpha.1665387432577

package/README.en-US.md

@@ -4,30 +4,27 @@ The out-of-the-box `Vue3 component library` rapid prototyping tool provides a se
 
 ### Feature
 
-- 1.Out-of-the-box component library development environment
-- 2.Out-of-the-box component library compilation tool, support exporting `esm` and `umd` two module codes
-- 3.Component library document site based on configuration files, support Baidu statistics and theme customization
-- 4.Supports `single file component (sfc)` and `tsx, jsx` two styles of component library writing styles
-- 5.Code inspection tool out of the box
-- 6.Unit testing tools out of the box
-- 7.Out-of-the-box code publishing tool, publish to npm and github, and automatically generate a change log
-- 8.Support `Typescript`
-- 9.Support `Dark Mode`
-- 10.Based on `pnpm`
+- 📦  Out-of-the-box component library development environment
+- 📦  An out-of-the-box component library compilation tool that supports exporting `esm`, `cjs`, `umd` module codes
+- 🛠️  Configuration file-based component library documentation site, support Baidu statistics and theme customization
+- 🛠️  Supports both `sfc` and `tsx` styles for writing component libraries
+- 📦  Out-of-the-box code inspection tool
+- 📦  Out-of-the-box unit testing tools
+- 📦  Out-of-the-box code publishing tool, publishes to both `npm` and `github`, and automatically generates changelogs
+- 💪  Support for `Typescript`
+- 💪  Support `Dark Mode`
+- 🌍  Support `Internationalization`
+- 🚀  Based on `pnpm`
 
 ### Quickstart
 
-`@varlet/cli` has built-in `single file component (sfc)` and `tsx, jsx` two styles of component library project templates, which can be directly generated by the `gen` command.
-To help users directly enter the development of the component itself, it is recommended to use `pnpm` as a package management tool. 
+`@varlet/cli` has built-in `sfc` and `tsx` style component library project templates, which can be generated directly by the `gen` command.
+It is convenient for you to directly enter the component library development.
 
 ```shell
 # Install command line tools
 pnpm add @varlet/cli -g
-# Use the gen command to generate the project
-varlet-cli gen projectName
-cd projectName
-pnpm install
-pnpm dev
+varlet-cli gen
 ```
 
 Then by simply modifying some basic information of the component library template,
@@ -37,175 +34,62 @@ you can start the development of the component library
 
 ### Configuration file
 
-The `varlet.config.js` in the project root directory is used to manage the specific details of the entire component library project
+The `varlet.config.js` in the project root directory is used to manage the specific details of the entire component library project.
+The default configuration can be viewed [varlet.default.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-cli/varlet.default.config.js)。
+Also refer to `@varlet/ui` [varlet.config.js](https://github.com/varletjs/varlet/blob/dev/packages/varlet-ui/varlet.config.js)
 
 | Parameter | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
+| -- | -------------- | -------- | ---------- |
+| `name` | The full name of the component library, which will be used as the package name | _string_ | `Varlet` |
+| `namespace` | Component library namespace, which will be used as a component prefix | _string_ | `var` |
 | `host` | Development server host | _number_ | `localhost` |
 | `port` | Development server port | _number_ | `8080` |
-| `name` | Full name of the component library	| _string_ | `Varlet` |
-| `namespace` | Component library namespace, Will be used as a component prefix | _string_ | `var` |
-| `title` | The title of the component library in the document | _string_ | `VARLET` |
-| `logo` | The logo of the component library in the document | _string_ | `-` |
-| `defaultLanguage` | Document default language | _string_ | `zh-CN` |
-| `useMobile` | Whether to display the right mobile phone preview | _boolean_ | `false` |
-| `themes` | Document themes | _SiteThemes_ | `-` |
-| `darkThemes` | Document dark mode themes | _SiteThemes_ | `-` |
-| `highlight` | Document code snippet style related | _SiteHighlight_ | `-` |
-| `analysis` | Document statistics related | _SiteAnalysis_ | `-` |
-| `pc` | PC-side document structure configuration | _SitePC_ | `-` |
-| `mobile` | Mobile document structure configuration | _SiteMobile_ | `-` |
-| `moduleCompatible` | Module compatible config | _Record<string, string>_ | `-` |
-
-#### Module Compatible
-
-Some external dependencies may need to be compatible with module syntax to achieve the purpose of compiling correctly to `commonjs` and `esmodule`. For example, the wording of `esmodule` of `dayjs` is
-
-```js
-import dayjs from 'dayjs/esm'
-```
-
-In order to build `commonjs`, the writing method is
+| `title` | The title of the component library in the documentation | _string_ | `VARLET` |
+| `logo` | The logo of the component library in the documentation | _string_ | `-` |
+| `defaultLanguage` | Documentation default language | _string_ | `zh-CN` |
+| `useMobile` | Whether to show the preview of the right mobile phone | _boolean_ | `false` |
+| `lightTheme` | Light Mode Documentation Theme | _Record<string, any>_ | `-` |
+| `darkTheme` | Dark Mode Documentation Theme | _Record<string, any>_ | `-` |
+| `highlight` | Documentation snippet style related | _{ style: string }_ | `-` |
+| `analysis` | Document statistics related | _{ baidu: string }_ | `-` |
+| `pc` | PC-side document structure configuration | _Record<string, any>_ | `-` |
+| `mobile` | Mobile side document structure configuration | _Record<string, any>_ | `-` |
+| `moduleCompatible` | Module Compatible Configurations | _Record<string, string>_ | `-` |
+
+### Custom pages
+
+If you want to insert other pages into the component library, you can create a `pages` folder in the project root directory to write a vue component to generate other pages.
+The directory structure is as follows:
 
 ```js
-import * as dayjs from 'dayjs'
-```
-
-In the project, we embrace the first way of writing the `esmodule` module, and make the following configuration for adaptation
-
-```js
-// varlet.config.js
-module.exports = {
-  moduleCompatible: {
-    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
-  }
-}
-```
-
-#### SiteThemes
-
-Theme variables are related, 
-because the default theme variables may be modified from time to time,
-subject to the theme of the `varlet` official document
-
-| Variable |
-| ----- |
-| `color-body` |
-| `color-bar` |
-| `color-sub-bar` |
-| `color-text` |
-| `color-sub-text` |
-| `color-border` |
-| `color-shadow` |
-| `color-introduce-border` |
-| `color-primary` |
-| `color-link` |
-| `color-type` |
-| `color-progress` |
-| `color-progress-track` |
-| `color-side-bar` |
-| `color-side-bar-active-background` |
-| `color-app-bar` |
-| `color-nav-button-hover-background` |
-| `color-mobile-cell-hover` |
-| `color-pc-language-active` |
-| `color-pc-language-active-background` |
-| `color-mobile-language-active` |
-| `color-mobile-language-active-background` |
-| `color-hl-background` |
-| `color-hl-code` |
-| `color-hl-border` |
-| `color-hl-group-a` |
-| `color-hl-group-b` |
-| `color-hl-group-c` |
-| `color-hl-group-d` |
-| `color-hl-group-e` |
-| `color-hl-group-f` |
-| `color-hl-group-g` |
-| `color-hl-group-h` |
-| `color-hl-group-i` |
-
-#### SiteHighlight
-
-Code snippets are highlighted, based on [highlight.js](https://highlightjs.org/)
-
-| Parameter | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
-| `style` | highlight css link | _string_ | `-` |
+|-- varlet-ui
+  |-- src
+  |-- docs
+  |-- pages
+    |-- sponsor
+      |-- index.vue
+    |-- contributor
+      |-- locale
+        |-- en-US.ts
+      |-- index.vue
+    |-- changelog
+      |-- locale
+        |-- zh-CN.ts
+        |-- en-US.ts
+      |-- index.vue
+      
+```
+
+The resulting route is as follows:
 
-#### SiteAnalysis
-
-Statistics related to buried points
-
-| Parameter | Description | Type | Default |
-| ----- | -------------- | -------- | ---------- |
-| `baidu` | Baidu statistics script address | _string_ | `-` |
-
-#### SitePC, SiteMobile
-
-The document structure is partly related, and the example configuration is as follows
-
-```js
-module.exports = {
-  defaultLanguage: 'en-US',
-  pc: {
-    redirect: '/home',
-    title: {
-      'en-US': 'A components library',
-    },
-    header: {
-      darkMode: null,
-      i18n: null,
-      github: 'https://github.com/varletjs/varlet',
-    },
-    menu: [
-      {
-        text: {
-          'en-US': 'Develop Guide',
-        },
-        // Sidebar menu directory
-        type: 1,
-      },
-      {
-        text: {
-          'en-US': 'Basic Intro',
-        },
-        doc: 'home',
-        // Index the md document in the root directory of the project
-        type: 3,
-      },
-      {
-        text: {
-          'en-US': 'Basic Component',
-        },
-        type: 1,
-      },
-      {
-        text: {
-          'en-US': 'Button',
-        },
-        doc: 'button',
-        // Md document in the root directory of the index component
-        type: 2,
-      },
-    ],
-  },
-  mobile: {
-    redirect: '/home',
-    title: {
-      'en-US': 'A components library',
-    },
-    header: {
-      darkMode: null,
-      i18n: null,
-      playground: null,
-      github: 'https://github.com/varletjs/varlet',
-    },
-  },
-}
+```text
+/zh-CN/sponsor
+/en-US/contributor
+/zh-CN/changelog
+/en-US/changelog
 ```
 
-### Commands Intro
+### Commands related
 
 #### Start the development server
 
@@ -270,133 +154,71 @@ varlet-cli release
 ```
 
 #### Generate a project template
+
 ```shell
-varlet-cli gen <projectName>
+varlet-cli gen
+
+# Options
+-n
+--name
+  project name
+-s
+--sfc
+  Generate sfc-style project templates
+-t
+--tsx
+  Generate tsx-style project templates
+-l
+--locale
+  Need to support internationalization
 ```
 
-### babel
+#### Create a component template file
 
-To configure `babel`, first specify the target browser in `package.json`
+```shell
+varlet-cli create
 
-```json
-{
-  "browserslist": [
-    "Chrome >= 54",
-    "iOS >= 10"
-  ]
-}
+# Options
+-n
+--name
+  project name
+-s
+--sfc
+  Generate sfc-style component
+-t
+--tsx
+  Generate tsx-style component
+-l
+--locale
+  Need to support internationalization
 ```
 
-create `babel.config,js`
+### Note before release
 
-```js
-// babel.config.js
-module.exports = {
-  presets: [
-    [
-      '@varlet/cli/preset',
-      {
-        loose: process.env.NODE_ENV === 'compile',
-      },
-    ],
-  ],
-}
-```
+- 1.`npm` repository registry must set to `npm` official mirror
+- 2.Execute `npm login` to log in
 
-### git and npm
-
-#### git-hook
-
-`simple-git-hooks`, `lint-staged` cooperate with `eslint`, `stylelint`, `varlet-cli commit-lint` to check before commit, 
-`package.json` configuration is as follows
-
-```json
-{
-  "simple-git-hooks": {
-    "pre-commit": "pnpm exec lint-staged --allow-empty --concurrent false",
-    "commit-msg": "npx --no-install varlet-cli commit-lint $1"
-  },
-  "lint-staged": {
-    "*.{ts,tsx,js,vue,less}": "prettier --write",
-    "*.{ts,tsx,js,vue}": "eslint --fix",
-    "*.{vue,css,less}": "stylelint --fix"
-  },
-  "eslintConfig": {
-    "root": true,
-    "ignorePatterns": [
-      "es/**",
-      "umd/**",
-      "site/**",
-      "public/**",
-      "src/*/__tests__/**",
-      ".varlet/**"
-    ],
-    "extends": [
-      "@varlet"
-    ]
-  },
-  "stylelint": {
-    "extends": [
-      "@varlet/stylelint-config"
-    ],
-    "ignoreFiles": [
-      "es/**",
-      "umd/**",
-      "site/**",
-      "coverage/**",
-      "public/**",
-      "highlight/**"
-    ]
-  }
-}
-```
+### Module Compatible
 
-Mount Git Hooks
+Some external dependencies may need to be compatible with module syntax to achieve the purpose of compiling correctly to `commonjs` and `esmodule`. For example, the wording of `esmodule` of `dayjs` is
 
-```shell
-npx simple-git-hooks
+```js
+import dayjs from 'dayjs/esm'
 ```
 
-create `.prettierignore`
+In order to build `commonjs`, the writing method is
 
-```text
-// .prettierignore
-coverage/**
-es/**
-umd/**
-site/**
-public/**
-src/*/__tests__/**
-*.md
+```js
+import * as dayjs from 'dayjs'
 ```
 
-### typescript
-
-create `tsconfig.json`
-
-```json
-{
-  "compilerOptions": {
-    "strict": true,
-    "downlevelIteration": true,
-    "declaration": true,
-    "skipLibCheck": true,
-    "esModuleInterop": true,
-    "allowJs": true,
-    "lib": ["esnext", "dom"],
-    "allowSyntheticDefaultImports": true,
-    "jsx": "preserve"
+In the project, we embrace the first way of writing the `esmodule` module, and make the following configuration for adaptation
+
+```js
+// varlet.config.js
+module.exports = {
+  moduleCompatible: {
+    "import dayjs from 'dayjs/esm'\n": "import * as dayjs from 'dayjs'\n"
   }
 }
 ```
-
-#### Note before release
-
-- 1.The registry of npm must set to the official npm mirror
-- 2.The npm must execute the login command for user login
-
-### Contributors
-
-<a href="https://github.com/varletjs/varlet/graphs/contributors">
-  <img src="https://contrib.rocks/image?repo=haoziqaq/varlet" />
-</a>