1.0.5 • Published 2 years ago
lzg-pc-components v1.0.5
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 的语法一样
发布
- 如果配置了淘宝镜像,先设置回npm镜像:
npm config set registry https://registry.npmjs.org
- 登录
npm login
- 发布
npm publish
使用新发布的组件库
npm install lzg-pc-components -S
# 在 main.js 引入并注册
import elementButton from 'lzg-pc-components'
Vue.use(elementButton)
# 在组件中使用
<template>
<elementButton><elementButton/>
</template>