npm发布Vue-CLI3插件
一.新建vue项目
目录结构:
二.修改项目文件夹
1.创建一个packages文件夹(用于存放编写的组件)
2.把src修改为examples
3.新建一个vue.config.js文件,并修改
由于修改了src文件夹,启动vue项目后,找不到入口(main.js)会报错,所以需要重新指定启动入口
module.exports = {
// 将 examples 目录添加为新的页面
pages: {
index: {
// page 的入口
entry: 'examples/main.js',
// 模板来源
template: 'public/index.html',
// 输出文件名
filename: 'index.html'
}
}
}
4.目录结构
三.编写组件
1.目录(我写了2个组件)
2.结构和代码分析
A. YoungForm***是一个文件夹,下面有***dynamicForm.vue***和***index
B. ***dynamicForm.vue***是组件
export default {
name:"yForm", //注意:组件必须声明 name,这个 name 就是引用组件时的标签
.....
C. ***index.js***是组件导出文件
import yForm from './dynamicForm.vue'
// 为组件添加 install 方法,用于按需引入
yForm.install = function (Vue) {
Vue.component(yForm.name, yForm)
}
export default yForm
3.整合所有组件,修改packages下的index.js
// 导入各个组件
import yForm from './YoungForm/index'
import yTable from './YoungTable/index'
// 把组件保存到一个数组中
const components = [
yForm,
yTable
]
// 定义 install 方法
const install = function (Vue) {
if (install.installed) return
install.installed = true
// 遍历组件列表并注册全局组件
components.map(component => {
Vue.component(component.name, component) //component.name 此处使用到组件vue文件中的 name 属性
})
}
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具备一个 install 方法
install,
// 组件列表
...components
}
四.测试组件是否正常
1.在main.js引入组件
import yForm from '../packages/index'
Vue.use(yForm)
2.在页面上使用组件(标签名就是之前定义的组件的name)
3.运行项目,如果没有bug就可以打包发布了.有bug,自己写的组件自己解决!
五.打包组件
1.修改package.json文件
在script中加上一句话, “lib”: “vue-cli-service build --target lib --name young-form --dest lib packages/index.js”
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --name young-form --dest lib packages/index.js"
}
主要需要四个参数:
-
target: 默认为构建应用,改为 lib 即可启用构建库模式
-
name: 输出文件名
-
dest: 输出目录,默认为 dist,这里我们改为 lib
-
entry: 入口文件路径,默认为 src/App.vue,这里改为 packages/index.js
2.执行命令,编译组件 npm run lib会生成一个 lib文件夹
六.修改一系列配置
1.修改 package.json
"name": "young-form",
"version": "1.0.8",
"description": "这是一个动态组件",
"main": "lib/young-form.umd.min.js",
"keyword":"",
"private": false,
"license": "MIT",
"author": "yuanxiaotian",
......
name: 包名,该名不能和已有的名称冲突
version: 版本号,不能和历史版本号相同
description: 简介
main: 入口文件,应指向编译后的包文件
**keyword:**关键字,以空格分割
**author:**作者
**private:**是否私有,需要修改为 false 才能发布到 npm
**license:**开源协议
2.创建发布忽略文件**.npmignore**
.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html
# 本地开发文件
.env.local
.env.*.local
# 日志文件
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# 编辑器文件
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*
七.发布组件到npm
1.执行命令修改npm源
npm config set registry http://registry.npmjs.org
2.npm login登录你的npm账号(如果没有,请去npm官网注册一个)
3.发布组件
npm publish