[转]使用npm发布vue组件
生活随笔
收集整理的這篇文章主要介紹了
[转]使用npm发布vue组件
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
😶 NPM 是隨同 NodeJS 一起安裝的 javascript 包管理工具，能解決 NodeJS 代碼部署上的很多問題
發(fā)布前的準(zhǔn)備
注冊一個(gè) npm 賬號
前往 NPM 官網(wǎng)進(jìn)行注冊
初始化項(xiàng)目
這里用的是webpack-simple,可以理解為精簡版的vue-cli。
如果沒有全局安裝 vue 的話，需要先安裝
cnpm i -g @vue/cli-init然后再初始化 vue 項(xiàng)目，我們要寫的是一個(gè)簡單的 vue 組件，不需要依賴那么多而龐大的配置，所以，這里我們用簡介版本的 webapck 配置模板
vue init webpack-simple 項(xiàng)目名（最好去npm官網(wǎng)搜一下，防止重復(fù))創(chuàng)建之后的基本目錄
創(chuàng)建 vue 插件并發(fā)布
創(chuàng)建組件文件夾
舉個(gè)例子：封裝一個(gè)返回頂部的小組件
既然是封裝組件，那我們在 src 下面創(chuàng)建一個(gè) plugins 文件放我們的插件，但是考慮到萬一要寫很多個(gè)的情況，當(dāng)前組件的相關(guān)文件下創(chuàng)建一個(gè) returnTop 文件夾，下面創(chuàng)建 returnTop.vue 和 index.js 先，結(jié)構(gòu)變成下面這樣：
切換到當(dāng)前根目錄，安裝依賴，啟動(dòng)項(xiàng)目
cnpm installcnpm run dev編寫組件代碼
示例代碼
returnTop.vue
編輯 returTop／index.js 文件，目的：將該組件作為 Vue 插件
// sumFunction 插件對應(yīng)組件的名字 import returnTop from "./returnTop";// Vue.js 的插件應(yīng)當(dāng)有一個(gè)公開方法 install 。第一個(gè)參數(shù)是 Vue 構(gòu)造器，第二個(gè)參數(shù)是一個(gè)可選的選項(xiàng)對象 // 此處注意，組件需要添加name屬性，代表注冊的組件名稱，也可以修改成其他的 returnTop.install = (Vue) => Vue.component(returnTop.name, returnTop); //注冊組件// 標(biāo)簽的方式引入 //const install = function(Vue, opts = {}) { // Vue.component(sumFunction.name, sumFunction); //}/* 支持使用標(biāo)簽的方式引入 Vue是全局變量時(shí)，自動(dòng)install */ //if (typeof window !== 'undefined' && window.Vue) { // install(window.Vue); //}export default returnTop;此處需要注意的是 install。 Vue 的插件必須提供一個(gè)公開方法 install，該方法會(huì)在你使用該插件，也就是 Vue.use(yourPlugin)時(shí)被調(diào)用。這樣也就給 Vue 全局注入了你的所有的組件。
在src目錄下創(chuàng)建index.js文件,用來統(tǒng)一管理組件
import Vue from 'vue'; import ReturnTop from './plugins/returnTop/index.js';//返回頂部 // ...如果還有的話繼續(xù)添加 const components = [ReturnTop, ] //循環(huán)遍歷注冊組件，就可以向其他ui組件庫那樣，使用Vue.use()來全局使用 const install = function (Vue, opts = {}) {components.map(component => {Vue.component(component.name, component);}) }/* 支持使用標(biāo)簽的方式引入 */ if (typeof window !== 'undefined' && window.Vue) {install(window.Vue); }export default {install,ReturnTop, //在這里多寫一次可以單獨(dú)調(diào)用，例如：Vue.use(vueutils.ReturnTop) }修改 package.json
{"name": "km-vue-utils","description": "vue常用工具合集","version": "0.0.1","author": "SuperKM","license": "MIT", // 開源協(xié)議// 采用commonJs入口文件，如果不配置，我們在其他項(xiàng)目中就不用import XX from XX來引用了，只能以包名作為起點(diǎn)來指定相對的路徑"main": "dist/index.js","jsnext:main": "src/index.js", // 采用es6模塊化入口"private": false, // 因?yàn)榻M件包是公用的，所以private為false"scripts": {"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot","build": "cross-env NODE_ENV=production webpack --progress --hide-modules"}, // 指定代碼所在的倉庫地址"repository": {"type": "git","url": "https://github.com/superliebe/vueTools.git"}, // 提交bug的地址"bugs": {"url": "https://github.com/superliebe/vueTools/issues"},// 項(xiàng)目官網(wǎng)的url"homepage": "https://github.com/superliebe/vueTools","keywords": ["vue","component","tools","superkm"], // 指定關(guān)鍵字"dependencies": {"vue": "^2.5.11"},"browserslist": ["> 1%","last 2 versions","not ie <= 8"],"devDependencies": {...} }修改.gitignore
因?yàn)橐?dist 文件夾，所以在.gitignore 文件中把 dist/去掉。
修改 webpack.config.js
// 原 module.exports = {entry: './src/main.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'build.js'} ... } // 新 const NODE_ENV = process.env.NODE_ENV module.exports = {entry: NODE_ENV == 'development' ? './src/main.js' : './src/index.js',output: {path: path.resolve(__dirname, './dist'),publicPath: '/dist/',filename: 'index.js',libraryTarget: 'umd', // 指定輸出格式umdNamedDefine: true // 會(huì)對 UMD 的構(gòu)建過程中的 AMD 模塊進(jìn)行命名。否則就使用匿名的 define} ... ｝? 發(fā)布 npm 之前必須做兩件事情。
?? - 必須 npm run build 打包一下。
?? - 必須 修改 package.json 中的版本號。
發(fā)布包到 npm
- 已經(jīng)注冊過 npm 賬號，首先登陸，登陸過一次之后，就可以直接發(fā)布
輸入賬號-密碼-郵箱后，提示 Logged in as *** on http://registry.npmjs.org/. 就是登陸成功了
- 然后直接發(fā)布
發(fā)布成功后提示，前往自己的 npm 庫中就可以查看到剛剛發(fā)布的 npm 包
npm 庫中
- 如果想刪除發(fā)布的包
npm 發(fā)布中常見錯(cuò)誤
- 409 Conflict
npm login 或者 npm adduser 時(shí) 輸入完賬號密碼郵箱后 提示 E409 Conflict 報(bào)錯(cuò) 一般因?yàn)樘詫氱R像的原因
解決方案,直接 registry 鏡像源
npm login --registry http://registry.npmjs.org- npm ERR! 403
可能是包名已經(jīng)存在，或者是郵箱未認(rèn)證
使用自己發(fā)布的包
使用 cnpm 安裝依賴
cnpm i km-vue-utils -S在 main.js 文件 或者想要引入的文件導(dǎo)入
import utils from "km-vue-utils"; Vue.use(utils);在想要引用的.vue 文件中直接寫
<!-- 該名稱由封裝組件中的name屬性決定 --> <tool-return-top></tool-return-top><!-- 如果想引用組件中包含的方法，給Vue.prototype屬性Vue.prototype.$utils = utils;在需要調(diào)用的地方直接寫this.$utils.方法文件.方法名;-->😜😜😜
---------------------
作者：superKM
來源：CSDN
原文：https://blog.csdn.net/superKM/article/details/107096256
版權(quán)聲明：本文為作者原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！
內(nèi)容解析By：CSDN,CNBLOG博客文章一鍵轉(zhuǎn)載插件
總結(jié)
以上是生活随笔為你收集整理的[转]使用npm发布vue组件的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： [转]mpvue中的小程序调用系统自带查
- 下一篇： 用python来获取Github IP地