首页 > 建站教程 > 前端框架 >  vue-cli 3.x、vue-cli 4.x将项目改成插件并发布到npm正文

vue-cli 3.x、vue-cli 4.x将项目改成插件并发布到npm

工作中遇到一个需求,要将一个非常复杂的项目,改成插件并发布到npm,供其他同事使用。该组件是基于vue-cli 4.x脚手架搭建的(vue-cli 3.x同样适用)。具体方法如下:


一、调整项目结构

1、用 vue-cli 创建一个 default 项目(由于是将项目改造成插件,这一步已经在项目开始时做过了)


当前的项目目录是这样的:

vue项目改成插件


2、将 src 改为插件名称,如 yx-form-create,将里面的 App.vue 重命名,如 yx-form-create.vue,将之前的main.js中引入的插件,统统移入到这个文件内,因为main.js将用来编写插件的install方法,同时将 name 值改成插件名(很重要),类似下面的代码:

vue项目改成插件


3、修改main.js代码,导出插件:

// 导入单个组件
import yxFormCreate from "./yx-form-create.vue";
// 定义 install 方法
const install = function(Vue) {
  if (install.installed) return;
  install.installed = true;
  // 遍历并注册全局组件
  Vue.component(yxFormCreate.name, yxFormCreate);
};
if (typeof window !== "undefined" && window.Vue) {
  install(window.Vue);
}
export default {
  // 导出的对象必须具备一个 install 方法
  install,
  yxFormCreate
};


4、新建 test 文件夹,作为测试使用,在 test 下分别新建 main.js 和 App.vue

最终目录结构如下:

vue项目改成插件


test/main.js代码:

import Vue from "vue";
import App from "./App.vue";
// 引入自定义的插件
import yxFormCreate from "../yx-form-create/main";
Vue.use(yxFormCreate);
new Vue({
  render: h => h(App)
}).$mount("#app");


App.vue代码:

<template>
  <div id="app">
    <!--使用自定义的插件-->
    <yx-form-create />
  </div>
</template>
<script>
export default {
  name: "App"
};
</script>


二、修改配置

启动项目的时候,默认入口文件是 src/main.js

将 src 目录改为 test 之后,就需要重新配置入口文件

在根目录下找到 vue.config.js 文件(没有就创建它):

// vue.config.js
module.exports = {
  // 将 test 目录添加为新的页面
  pages: {
    index: {
      // page 的入口
      entry: 'test/main.js'
    }
  }
}


完成这一步之后,运行 npm run serve 启动它进行测试插件是否有问题


三、打包组件

vue-cli 3.x、4.x 提供了构建库的命令,所以这里不需要再为 yx-form-create 目录配置 webpack,主要需要四个参数:

target: 默认为构建应用,改为 lib 即可启用构建库模式

name: 输出文件名

dest: 输出目录,默认为 dist

entry: 入口文件路径,默认为 src/App.vue,这里改为 yx-form-create/main.js


基于此,在 package.json 里的 scripts 添加一个 lib 命令

// pageage.json
{
  "scripts": {
    "lib": "vue-cli-service build --target lib --name yx-form-create --dest dist yx-form-create/main.js"
  }
}


然后执行 npm run lib 命令,编译组件


四、准备发布

首先需要在 package.json 添加组件信息

name: 包名,该名不能和已有的名称冲突;

version: 版本号,不能和历史版本号相同;

description: 简介;

main: 入口文件,应指向编译后的包文件;

keyword:关键字,以空格分割;

author:作者;

private:是否私有,需要修改为 false 才能发布到 npm;

license:开源协议

vue项目改成插件


然后创建 .npmignore 文件,设置忽略文件

该文件的语法和 .gitignore 的语法一样,设置发布到 npm 时忽略哪些目录或文件

.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 的镜像地址,比如使用了淘宝镜像,就先改回来

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


如果没有 npm 账户,可以通过 npm adduser 命令创建一个账户,或者到 npm 官网注册

如果在官网注册的账户,或者以前就有账户,就使用 npm login 命令登录

在发布之前,一定要确保组件已经编译完毕,而且 package.json 中的入口文件(main)的路径正确


一切就绪,发布组件:

npm publish


上一篇: vue3 ref和reactive
下一篇: 最后一页