如何从0开始搭建组件库

yarn create vant-cli-app

# 通过 npmnpm i @vant/cli -D
# 通过 yarnyarn add @vant/cli -D
# 通过 pnpmpnpm add @vant/cli -D

{  "scripts": {    "dev": "vant-cli dev",    "test": "vant-cli test",    "lint": "vant-cli lint",    "build": "vant-cli build",    "prepare": "husky install",    "release": "vant-cli release",    "build-site": "vant-cli build-site"  },  "nano-staged": {    "*.md": "prettier --write",    "*.{ts,tsx,js,vue,less,scss}": "prettier --write",    "*.{ts,tsx,js,vue}": "eslint --fix"  },  "eslintConfig": {    "root": true,    "extends": ["@vant"]  },  "prettier": {    "singleQuote": true  },  "browserslist": ["Chrome >= 51", "iOS >= 10"]}

m-tetris├─ build     # 构建├─ docs      # 文档├─ es        # 打包├─ lib       # 打包├─ site      # 静态站点资源├─ src       # 组件├─ test      # 单测└─ static    # 图片等资源

src└─ button   ├─ demo             # 示例代码   ├─ test             # 单元测试   ├─ index.vue        # 组件入口   ├─ index.less       # 组件样式   └─ README.md        # 组件文档说明

# 打包,生成lib es文件夹npm run build
# 生成压缩包npm pack
# 在项目中安装测试包npm install 压缩包的绝对路径（例如：/Users/用户名/work/XXX/XXX.0.tgz）

# 拉取最新的master# 构建npm包npm run build
# 登录（如已登录，请忽略）npm login
# 发布# 如果是公司私服、请保证源是公司源npm publish

# 安装插件npm i babel-plugin-import -D

// 在.babelrc 中添加配置// 注意：webpack 1 无需设置 libraryDirectory{  "plugins": [    ["import", {      "libraryName": "xxx-vant",      "libraryDirectory": "es",      "style": true    }]  ]}
// 对于使用 babel7 的用户，可以在 babel.config.js 中配置module.exports = {  plugins: [    ['import', {      libraryName: 'xxx-vant',      libraryDirectory: 'es',      style: true    }, 'xxx-vant']  ]};

// 接着你可以在代码中直接引入 xxx-vant 组件// 插件会自动将代码转化为方式二中的按需引入形式import { IndexBar } from 'xxx-vant';

import Button from 'xxx-vant/lib/index-bar';import 'xxx-vant/lib/index-bar/style';

import Vue from 'vue';import Jdxxx from 'xxx-vant';import 'xxx-vant/lib/index.css';
Vue.use(Jdxxx);