Vue基于已有的项目封装组件发布npm

一、修改项目结构

• 当前结构

  
  
• 修改后结构

将原来的 src 目录，修改成 examples
新建 packages 文件夹，用来存放后续的组件

二、修改配置

项目启动默认入口是 src/main.js，第一步已将 src 文件名改成 examples 所以需要配置入口

• 已有 vue.config.js 文件

module.exports = {
  pages: {
    index: {
      // 入口文件
      entry: 'examples/main.js',
      template: 'public/index.html',
      filename: 'index.html'
    }
  }
}

• 没有 vue.config.js 文件
  在根目录下新建此文件 配置pages

重新启动项目 查看路径是否正确并能正常启动项目

三、开发组件

之前已经创建了一个 packages 目录，用来存放组件
该目录下存放每个组件单独的开发目录，和一个 index.js 整合所有组件，并对外导出
每个组件都应该归类于单独的目录下，包含其组件源码目录 src，和 index.js 便于外部引用

以test组件为例，完整的packages如下

• packages/test/src.main.vue 是组件的代码 注意点: 一定要声明name，name就是组件的标签
• packages/test/index.js 用于导出单个组件，如果要做按需引入，也需要在这里配置

// 导入组件，组件必须声明 name
import Test from './src/main.vue'

// 为组件添加 install 方法，用于按需引入
Test.install = function (Vue) {
    Vue.component(Test.name, Test)
}

// 默认导出组件
export default Test

• packages/index.js 整合并导出组件，实现组件全局注册

// 导入单个组件
import Test from './test/index.js'

// 以数组的结构保存组件，便于遍历
const components = [
    Test
]

// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    // 判断是否安装
    if (install.installed) return
    install.installed = true
    // 遍历并注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}

export default {
    // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
    install,
    // 组件列表
    ...components
}

四、测试组件是否封装成功

在examples/main.js中引入组件

// 这里的 TagTest 就是组件内定义的name
import TagTest from 'pack/index.js'
Vue.use(TagTest)

运行项目测试组件是否有bug

五、打包组件

在 package.json 里的 scripts 添加一个 lib 命令

"build:lib": "vue-cli-service build --target lib --name 生成的库名 --dest lib packages/index.js"

运行 npm run build:lib，编译组件，成功后会在根目录生成一个lib文件

六、发布

配置package.json文件中发布到npm的字段

{
  "name": "xxx", // 包名，该名字是唯一的。可在 npm 官网搜索名字，如果存在则需换个名字。
  "version": "0.1.0", // 版本号，每次发布至 npm 需要修改版本号，不能和历史版本号相同。
  "description": "", // 描述
  "main": "lib/xxx.umd.min.js", //  入口文件，该字段需指向我们最终编译后的包文件。
  "keyword": "", // 关键字，以空格分离希望用户最终搜索的词。
  "private": false // 是否私有，需要修改为 false 才能发布到 npm
  "author": "lh"  // 作者
  "license": "MIT" // 开源协议

在根目录下新建.npmignore文件，设置忽略发布文件

.DS_Store
node_modules/
examples/
packages/
public/
vue.config.js
babel.config.js
*.map
*.html

# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw*

七、发布npm

• 切换镜像

npm config set registry http://registry.npmjs.org 

• 登陆npm

npm login

• 上传发布

 npm publish