其他分享
首页 > 其他分享> > npm发布组件(**造轮子**)

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"
  }

 

  主要需要四个参数:

 

  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