hello-ylz v0.1.1

vue-plugs

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

打包

npm run lib

配置

name: 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
version: 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
description: 描述。
main: 入口文件，该字段需指向我们最终编译后的包文件。
keyword：关键字，以空格分离希望用户最终搜索的词。
author：作者
private：是否私有，需要修改为 false 才能发布到 npm
license： 开源协议


用法：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       监听文件变化

以下为参考设置

{
  "name": "hello-ylz",
  "version": "0.1.0",
  "description": "基于 Vue 的npm包制作",
  "main": "lib/hello.umd.min.js",
  "keyword": "hello welcome xiaobu",
  "private": false,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "lib": "vue-cli-service build --target lib --dest lib packages/index.js"
  },
}

登录到 npm

首先需要到 npm 上注册一个账号，注册过程略。

如果配置了淘宝镜像，先设置回npm镜像：

$ npm config set registry http://registry.npmjs.org 

然后在终端执行登录命令，输入用户名、密码、邮箱即可登录。

$ npm login

发布到 npm

执行发布命令，发布组件到 npm

$ npm publish

发布成功

发布成功后稍等几分钟，即可在 npm 官网搜索到。以下是刚提交的 hello-ylz

使用新发布的组件库

安装

$ npm install hello-ylz -S

使用

// 在 main.js 引入并注册

//全部引入
import hello-ylz from 'hello-ylz'
Vue.use(hello-ylz)