如何从 0 开始搭建 Vue 组件库

yarn create vant-cli-app

# 通过 npm
npm i @vant/cli -D

# 通过 yarn
yarn add @vant/cli -D

# 通过 pnpm
pnpm 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);