--- theme: channing-cyan --- ### 一、项目包文件的创建和初始化。 #### 1. 新建项目包。 ```js vue create //用于发布npm包的项目文件名 ``` ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a70aeeef078f4d9d8a8de0b22c43509c~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=673&h=300&s=107826&e=png&b=0d0d0d) ps:一般选择自定义，然后不需要Vuex和Router，其他选项按自己实际情况选择安装即可。 #### 2.修改原始src文件名、新增组件项目存放文件和修改基础配置。 - 将 **src** 文件夹名称更改为 **examples** （ examples 用作示例展示）。 - **根目录**下（src同级目录）新增 **packages** 文件夹，用于编写我们所要发布的组件。 - 修改 **vue.config.js**（没有的话也是在**根目录**下新建）文件配置。 ```js //由于修改了src文件夹名称，所以启动vue项目后，会因找不到入口（main.js）而会报错，所以需要重新指定启动入口 module.exports = { // 将 examples 目录添加为新的页面 pages: { index: { // page 的入口 entry: 'examples/main.js', // 模板来源 template: 'public/index.html', // 输出文件名 filename: 'index.html' } } } ``` 如图： ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3b20b51fc1514c9aad3d09ef1f232d1d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=551&h=337&s=34826&e=png&b=fffefe) ### 二、编写组件。 #### 1. 在 **packages** 文件内新建一个文件夹，然后在其内新建一个 **xx.vue 文件**用于封装所要发布的组件；再新建一个 **index.js** 用于导入该组件并将其导出（**本文以简易button组件为例**）。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f89f3de8d454b8980ec8e48be103137~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=587&h=457&s=48526&e=png&b=242520) - packages/btn/warnSunBtn.vue代码： ```js ``` - packages/btn/index.js代码： ```js import warnSunBtn from './warnSunBtn.vue' // 为组件添加 install 方法，用于按需引入 warnSunBtn.install = function (Vue) { Vue.component(warnSunBtn.name, warnSunBtn) } export default warnSunBtn; ``` #### 2. 在 **packages** 文件内新建 index.js 文件作为入口文件用于组件的导入导出并安装。 ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bd261372372b4fdcad2f0f42248f02a2~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=753&h=444&s=57425&e=png&b=262722) - packages/index.js代码： ```js // 导入组件,可有多个 import warnSunBtn from './btn/index' // 把组件保存到一个数组中,可有多个 const components = [ warnSunBtn ] // 定义 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 } ``` ### 三、测试组件是否正常。 #### 1. 在 examples 文件夹内的入口文件 **main.js** 中导入并使用我们在第三步中定义的组件。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/8d8b974386174746a1777e604afbc398~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=681&h=434&s=45070&e=png&b=252621) #### 2. 在 examples 文件夹内的具体vue文件中使用并测试。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0f7a00b6a29d442d8cb184a635a16942~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=838&h=693&s=84796&e=png&b=252621) #### 3. 验证（验证我们组件是否正常，有bug及时修改，直至验证时我们的组件功能全部正常）。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0d29f311474e4258b77c1b19d5e1bd92~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=585&h=847&s=55325&e=png&b=ffffff) ### 四、修改package.json配置并打包构建。 #### 1. 修改 **package.json** 文件配置。在 **scripts** 中加上一句话, **"lib": "vue-cli-service build --target lib --name warn-sun-btn --dest lib packages/index.js"** 名词解释： - target: 默认为构建应用，改为 lib 即可启用构建库模式 - name: 输出文件名 - dest: 输出目录，默认为 dist，这里我们改为 lib - entry: 入口文件路径，默认为 src/App.vue，这里改为 packages/index.js ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/032a2175fe864ee3a5f2fef0a35f9327~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1075&h=370&s=47280&e=png&b=252621) #### 2. 执行 npm run lib 打包构建命令。执行 npm run lib 命令编译组件后，根目录中会生成一个 lib 文件夹即可。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/74783fccd1af435ea7479aaf5714732f~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1262&h=973&s=122389&e=png&b=262721) ### 五、修改其他配置。 #### 1. 修改 **package.json** 文件的包名、版本号等信息。名词解释： - name：包名，该名不能和npm上已有的名称冲突（必须） - version：版本号，不能和历史版本号相同（必须） - main： **入口文件，应指向编译后的包文件**（必须） - private：是否私有，**需要修改为 false 才能发布到 npm**（必须） - license： "MIT" 开源协议（必须） - description：简介 - author：作者 - keyword：关键字，以空格分割 - typings： ts入口文件 - repository：指定仓库核心代码： ```js "name": "warn-sun-btn", "version": "1.0.0", "description": "这是一个简易button按钮组件", "private": false, "author": "498433041@qq.com", "license": "MIT", "main": "lib/warn-sun-btn.umd.min.js", "keywords": [ "vue", "button" ], ``` ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/34bf7a7926ff45568fd7ce5e60e8d51e~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=1082&h=556&s=78116&e=png&b=262722) #### 2. **根目录**下创建发布忽略文件 **.npmignore** 。核心代码： ```js .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* ``` ![image.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/c6460d08bb95442eb7ee212fbd109468~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=623&h=576&s=48579&e=png&b=252621) #### 3. 修改README.md文件（这里以最简单的为例）。根据自身第二步中封装的组件在该md文件中声明参数、使用方法等（可以借助第三方工具生成）。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/bf00f56e94f1439cbfaeeec075e1ea75~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=927&h=433&s=54183&e=png&b=262721) ### 六、发布至npm（需事先有自己的npm账号）。 *友情提示*：没有npm账号的童靴请自行前往npm官网注册。（[npm官网](https://www.npmjs.com/)） #### 1. **npm login** 登录（需输入npm账号、密码、邮箱、验证码）。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/3c4973e8e6464c08ab45820663449e08~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=516&h=216&s=15895&e=png&b=282923) #### 2. **npm publish** 发布。 ![image.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/e0a6eaf92210462fbcbb6c0fff42a828~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=433&h=118&s=10110&e=png&b=282923) #### 3. 查看发布结果。发布成功后会绑定的邮箱会收到一条发布成功的邮件，并且自己的npm项目里面可以看到我们的组件包。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/f6b559cbe89f4605a20343cac9472971~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=494&h=115&s=12115&e=png&b=ffffff) **至此，我们创建npm公共组件包就完成了。** ### 七、在实际项目中安装我们的组件包并使用。 #### 1. 安装包。 ![image.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/68c1a39865c64f6a8facad299b5dd3a3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=704&h=145&s=28976&e=png&b=272822) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/782e9165fd3c4a4fa94c1d6d25fa441d~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=738&h=501&s=67553&e=png&b=252621) #### 2. 入口文件main.js中导入并使用。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/fbe3a170d72c4b2fb5c0569daccaa533~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=796&h=594&s=70568&e=png&b=252621) #### 3. 具体使用。 ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/2a75730022244d439ba406addc8283a3~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=570&h=430&s=36128&e=png&b=282923) ![image.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/9bfab34db6b04bc78cf92d5e12261610~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=476&h=353&s=25782&e=png&b=ffffff) ### 八、完结撒花。至此，我们的从零到有的**npm公共组件封装--发布--使用**就完成了，当然这是最简单的组件案例封装，具体想要封装什么功能的组件，可以自己在**第二步**中结合实际需求来开发组件，其余步骤都可以按部就班。码字不易，大佬勿喷，欢迎三连。