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

本文章由javascript技术分享原创和收集