标签：npm index vue name lib js 组件 轮子
一.新建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
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。