ve-plus

Project setup

yarn install

Compiles and hot-reloads for development

yarn serve

Compiles and minifies for production

yarn build

Lints and fixes files

yarn lint

Customize configuration

See Configuration Reference.

发布到 npm

package.json 中新增一条编译为库的命令

"lib": "vue-cli-service build --target lib packages/index.js"

vue-cli-service serve

用法：vue-cli-service serve [options] [entry]
选项：

  --open    在服务器启动时打开浏览器
  --copy    在服务器启动时将 URL 复制到剪切版
  --mode    指定环境模式 (默认值：development)
  --host    指定 host (默认值：0.0.0.0)
  --port    指定 port (默认值：8080)
  --https   使用 https (默认值：false)

vue-cli-service build

用法：vue-cli-service build [options] [entry|pattern]
选项：

  --mode        指定环境模式 (默认值：production)
  --dest        指定输出目录 (默认值：dist)
  --modern      面向现代浏览器带自动回退地构建应用
  --target      app | lib | wc | wc-async (默认值：app)
  --name        库或 Web Components 模式下的名字 (默认值：package.json 中的 "name" 字段或入口文件名)
  --no-clean    在构建项目之前不清除目标目录的内容
  --report      生成 report.html 以帮助分析包内容
  --report-json 生成 report.json 以帮助分析包内容
  --watch       监听文件变化

执行编译打包命令

npm run lib

配置package.json，添加main主入口。

{
  "name": "ve-plus",
  "version": "0.1.0",
  "private": false, // 必须设置false
  "description": "Vue3.js Component Library",
  "author": "Andy",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build", // 打包
    "build:dev": "vue-cli-service build --mode development", // mode配置有3个参数production,development,none,默认为production
    "lib": "vue-cli-service build --target lib packages/index.js", // 打包构建库
    "build:lib": "vue-cli-service build --target lib --name ve-plus --dest dist packages/index.js", // 打包构建单独库(自定义库名及打包目录)
    "lint": "vue-cli-service lint"
  },
  "main": "dist/ve-plus.common.js", // 设置入口文件
  "files": [
    "dist",
    "lib"
  ],
  "keywords": [
    "vue3",
    "vue3-ui",
    "veui",
    "VEUI"
  ],
  // 设置发布镜像源
  "publishConfig": {
    "registry": "https://registry.npmjs.org/"
  },
  ...
}

登录npm

npm login

发布组件

npm publish

踩坑

npm publish发布之前调整NPM源

• 命令行

npm config set registry https://registry.npmjs.org/

• 发布之后还原淘宝镜像源

npm config set registry https://registry.npm.taobao.org/

更新版本号

• 手动修改package.json

"version": "0.1.0"

• 通过命令更新版本

npm version 0.1.0

删除已经发布的版本

npm unpublish ve-plus@0.1.0