npm发布组件(**造轮子**)
作者:互联网
一.新建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
标签:npm,index,vue,name,lib,js,组件,轮子 来源: https://www.cnblogs.com/tt-ff/p/15598664.html