使用vuecli3發布npm包

一.使用vuecli3建立專案

vue create svgicon

把src目錄改為examples作為檢視元件的演示目錄，新建packages目錄作為元件編寫的目錄。

在packages下新建index.js作為匯出元件入口，作為整個元件庫的匯出，新建元件資料夾作為元件原始碼的放置，比如我的元件目錄叫做 svg-icon ，在svg-icon資料夾下新建index.js檔案對外提供對檔案的引用，新建src資料夾並建立svg-icon.vue作為元件檔案。整個packages資料夾下是如下的樣子：

在專案根目錄下新建vue.config.js並新增如下修改 src 目錄 為 examples 目錄

module.exports = 

}}

乙個新的svg-icon元件

// 匯入元件，元件必須宣告 name

import svgicon from './src/svg-icon.vue'
// 為元件提供 install 安裝方法，供按需引入
svgicon.install = function (vue) 
// 預設匯出元件
export default svgicon

// 匯入顏色選擇器元件

import svgicon from './svg-icon'
// 儲存元件列表
const components = [
svgicon
]// 定義 install 方法，接收 vue 作為引數。如果使用 use 註冊外掛程式，則所有的元件都將被註冊
const install = function (vue) 
// 判斷是否是直接引入檔案
if (typeof window !== 'undefined' && window.vue) 
export default 

在 examples/main.js中引入寫好的元件

import vue from 'vue'

// 匯入元件庫
import svgicon from './../packages/index'
// 註冊元件庫
vue.use(svgicon)
vue.config.productiontip = false
new vue(,
...

"name": "vue-svgicon-coms",

"version": "1.0.1",
"author": "jason",
"description": "vue-svg-components",
"main": "lib/vue-svgicon-coms.umd.min.js",
"keyword": "vue svg icon",
"license": "mit",
"private": false

npm run lib

專案的根目錄也多了乙個lib資料夾

六.註冊npm賬號

如果之前修改過npm源為**映象，先改回為npm映象

npm config set registry

npm login

使用  npm adduser 命令建立 npm 賬號，會提示輸入使用者名稱/密碼/郵箱

然後在瀏覽器註冊時使用的郵箱，點選註冊鏈結完成郵箱認證。

執行發布命令，發布元件到 npm

npm publish

發布成功後稍等幾分鐘，即可在 npm 官網搜尋到。以下是剛提交的 vue-svgicon-coms

八.更新npm包

每次修改完元件後，我們需要修改 package.json 的version版本

規則：對於"version":"x.y.z"

1.修復bug,小改動，增加z

2.增加了新特性，但仍能向後相容，增加y

3.有很大的改動，無法向後相容,增加x

然後重新打包並上傳npm

npm run lib

npm public

使用命令：npm version 進行修改，update_type 有三個引數，

第乙個是patch, 第二個是minor,第三個是 major，

patch：這個是補丁的意思；

minor：這個是小修小改；

major：這個是大改動；

具體咋用：

比如我想來個1.0.1版本，注意，是最後一位修改了增1，那麼命令：npm version patch 回車就可以了；

比如我想來個1.1.0版本，注意，是第二位修改了增1，那麼命令： npm version minor 回車就可以了；

比如我想來個2.0.0版本，注意，是第一位修改了增1，那麼命令： npm version major 回車就可以了；

然後 使用 npm publish 發布即可

npm發布Vue CLI3外掛程式

目錄結構 由於修改了src資料夾,啟動vue專案後,找不到入口 main.js 會報錯,所以需要重新指定啟動入口 a.youngform 是乙個資料夾,下面有 dynamicform.vue 和 index b.dynamicform.vue 是元件 export default export de...

vue cli3打包專案

vue cli3打包專案 使用vue cli3開發好專案後，就可以將它打包，這樣就可以通過輸出檔案中的index.html來訪問該專案了。在打包專案之前需要先修改兩個檔案，分別是vue.config.js,router index.js。如果沒有vue.config.js檔案的話就需要手動建立此檔案...

vue cli3的安裝使用

1 全域性安裝vue cli 使用命令 cnpm install g vue cli npm install g vue cli yarn global add vue cli 注意 nodejs版本應該大於8，否則安裝有問題 2 檢測安裝 使用vue v檢視 1 建立專案 根據自身需求選擇配置，最...