my-component

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

项目技术栈

• Vue-cli3: 新版脚手架的库模式，可以让我们很轻松的创建打包一个库
• npm：组件库将存放在npm
• webpack：修改配置需要一点 webapck 的知识。

目录文件修改以及新增

.
...
|-- examples      // 原 src 目录，改成 examples 用作示例展示
|-- packages      // 新增 packages 用于编写存放组件
...
. 

vue.config.js 说明

• 在vue.config.js中修改入口 entry: 'examples/main.js
• packages 是新增的一个目录，默认是不被 webpack 处理的，所以需要添加配置对该目录的支持,通过chainWebpack函数

package.json 说明

新增一条编译为库的命令 "lib": "vue-cli-service build --target lib --name vcolorpicker --dest lib packages/index.js"

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

添加 .npmignore 文件，设置忽略发布文件

+ 发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以需要设置忽略目录和文件。和.gitignore 的语法一样

发布

1. 如果配置了淘宝镜像，先设置回npm镜像：npm config set registry https://registry.npmjs.org
2. 登录 npm login
3. 发布 npm publish

使用新发布的组件库

npm install lzg-pc-components -S

# 在 main.js 引入并注册
import elementButton from 'lzg-pc-components'
Vue.use(elementButton)

# 在组件中使用
<template>
  <elementButton><elementButton/>
</template>