Create – ant- CLI-app is found to be a good library for building UI component library, which basically meets the needs of UI component library development. After yarn Dev is run, md files in the project are automatically generated and an embedded demo page is available for debugging. I also encountered some problems in the process of use, and I did some sorting.

vant-cli devWhere to?

This is the script.dev command in package.json.

The package.json in @vant/cli is configured with bin: {‘ ant-cli’: ‘./lib/index.js’} so that nodem_modules/.bin/ ant-cli is automatically softlinked when the module is installed.

Bin link

How and where does the page come from?

Similar to vue-CLI, vuant-CLI eventually uses the webpack-dev-server package to start the project.

Take a look at the relevant WebPack configuration:

The site directory is a display page for PC and mobile terminals written with Vue. The structure is as follows

- common
- desktop
    - components
    - App.vue
    - index.html
    - main.js
    - router.js
    - utils.js
- mobile
    - components
    - App.vue
    - index.html
    - main.js
    - router.js
Copy the code

How do MD documents automatically generate pages?

Left navigation column: Configure using ant. Config. js.

Description documents of each component: customized plug-in vant-cli-site-plugin, which generates configuration files for PC pages and mobile phone pages and introduces MD, and converts them into Vue files through Markdown-loader.

After running the command, The ant-cli-site-plugin will generate several files in node_modules/@vant/cli :site-desktop-shared.js, site-mobile-shared.js, package-entry Ge – style. Less, etc.

See what’s in it?

site-desktop-shared.js

import config from '/Users/vant-dev/vant.config';
import Changelog_en_US from '/Users/changelog.en-US.md';
import Changelog_zh_CN from '/Users/changelog.zh-CN.md';

export { config };
export const documents = { Changelog_en_US, Changelog_zh_CN }
/ /... .

Copy the code

site-mobile-shared.js

Site-mobile-shared. js is the mobile page, and the global introduction of UI library and UI style.

Look at the Loader configuration

{
test: /\.md$/,
use: [CACHE_LOADER, 'vue-loader'.'@vant/markdown-loader'],}Copy the code

Vant uses a custom loader:

  • Use Markdown-it: Convert MD to HTML
  • Add Highlight to add the upper class for HTML

Note that Highlight only adds class without the corresponding style code, so either import highlight’s CSS or add the corresponding styles manually. Vant uses the latter approach.

Output vUE files

function wrapper (content) {
    return ` 
      
}
Copy the code