vue-cli v3.10建立項目、發佈npm包並踩坑解決

安裝vue-cli

請先確保安裝了nodejs,vue

全局安裝npm install -g @vue/cli

Vue CLI 的包名稱由 vue-cli 改爲了 @vue/cli。 若是你已經全局安裝了舊版本的 vue-cli (1.x 或 2.x)，你須要先經過 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。

vue -V 查看是否安裝成功

若報錯：bash: vue: command not found ；是由於沒找到按照的vue，到安裝目錄下運行vue -V，查看是否安裝成功，若成功，可是其餘目錄還報錯，請查找一下環境變量是否配置正確；若仍是沒法解決請卸載node,vue,vue-cli從新安裝

• 用戶變量

  

• 系統變量

  

建立項目

• 建立名稱爲vue-short-cut的項目： vue create vue-short-cut
• 選擇設置：能夠選擇默認的default(babel,eslint),也能夠選擇Maually select features 選擇須要的vuex,typescript等其餘配置。
• 安裝完成運行查看是否成功：

建立npm包的內容

一、工程目錄（開發功能，並測試沒問題，如有依賴包正常安裝）

二、package.json中的配置

• 查詢包是否存在：www.npmjs.com/

• 添加組件信息

{ 
    "name": "vue-short-cut",//包名，該名不能和已有的名稱衝突；
    "version":"0.1.0", //版本號，不能和歷史版本號相同；
    "description":"使用vue的directive來快捷獲取焦點，支持回車、方向鍵、回車+方向鍵",// 簡介；
    "main":"lib/vue-short-cut.umd.min.js", //入口文件，應指向編譯後的包文件；
    "keyword":"vue directive short cut focus",//關鍵字，以空格分割；
    "author":"logmei",//做者；
    "private":false,//是否私有，須要修改成 false 才能發佈到 npm；
    "license":"MIT",//開源協議。
    ...
    }
複製代碼

• 添加scripts中的打包命令（cli3+ 不須要單獨配置webpack.config.js）

構建目標官方文檔

1. target: 默認爲構建應用，改成 lib 便可啓用構建庫模式
2. name: 輸出文件名
3. dest: 輸出目錄，默認爲 dist，這裏咱們改成 lib
4. entry: 入口文件路徑，默認爲 src/App.vue，這裏改成 packages/index.js

{
     "scripts":{
         "lib": "vue-cli-service build --target lib --name vue-short-cut --dest lib packages/index.js"
     }
 }
複製代碼

• (可選)git的地址,package.json中添加

"repository": {
    "type": "git",
    "url": "https://github.com/axios/axios.git"
  }
複製代碼

三、vue模板組件（只是爲了演示）

若組件有依賴，則正常安裝npm i element-ui -D，保存到開發依賴就能夠了（.vue文件中必須添加name）

建立插件文件index.js

import SearchComponent from './src'
    SearchComponent.install = Vue => Vue.component(SearchComponent.name,SearchComponent)
    export default SearchComponent
複製代碼

若是有更多的插件，能夠繼續添加，文件目錄爲

建立完成以後，須要建立構建時的入口文件packages/index.js,實現組件全局註冊

import CommonDialog from './CommonDialog/src'
    import Search from './Search/src'
    
    const components = [
      CommonDialog,
      Search
    ]
    
    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,
      ...components
    }
複製代碼

四、自定義指令(回到正軌)

import KeyDownKey from './common/keydown.js'
    const shortCut = {
      inserted: function(el, binding, vnode) {
        switch (binding.arg) {
          case 'keydown' :
            setTimeout(function() {
              if (binding.modifiers.enter) (KeyDownKey.enter)(el, binding, vnode)
              if (binding.modifiers.arrow) (KeyDownKey.arrow)(el, binding, vnode)
              if (binding.modifiers.keyDown) (KeyDownKey.keyDown)(el, binding, vnode)
            }, 0)
    
            break
        }
      },
      componentUpdated: function(el, binding, vnode) {
        switch (binding.arg) {
          case 'keydown' :
            setTimeout(function() {
              if (binding.modifiers.enter) (KeyDownKey.enter)(el, binding, vnode)
              if (binding.modifiers.arrow) (KeyDownKey.arrow)(el, binding, vnode)
              if (binding.modifiers.keyDown) (KeyDownKey.keyDown)(el, binding, vnode)
            }, 0)
            break
        }
      }
    
    }
    const install = function(Vue) {
      Vue.directive('shortCut', shortCut)
    }
    shortCut.install = install
    export default shortCut
複製代碼

五、在package.json中添加編譯命令

cli3提供了build指令

"lib": "vue-cli-service build --target lib --name vue-short-cut --dest lib packages/directives/index.js"
複製代碼

六、設置.gitignore的忽略文件(沒有忽略的文件將會發包到npm中，安裝後的文件目錄仍是原來的，至關於解壓本身的文件，只是被安裝到node_modules下)

/dist
    /lib
    /src
    /packages
    /public
    vue.config.js
    babel.config.js
    *.map
    *.html
複製代碼

發佈npm包

一、到官網註冊用戶 www.npmjs.com

二、本地發包

登陸：npm login

發佈：npm publish

發佈時會遇到的問題

• 一、須要修改地址，通常爲了下載速度快會改成npm config set registry https://registry.npm.taobao.org，但發佈npm包時必須爲npm的地址：npm config set registry http://registry.npmjs.org/

npm ERR! code E403
npm ERR! 403 Forbidden - PUT https://registry.npm.taobao.org/vue-short-cut - [no_perms] Private mode enable, only admin can publish this module
複製代碼

• 二、包重名，修改package.json中的name

npm ERR! publish Failed PUT 403
npm ERR! code E403
npm ERR! You do not have permission to publish "vue-short-cut". Are you logged in as the correct user?
複製代碼

• 三、若包名與現有的包很類似，會提示修改包名，修改package.json中的name,並運行npm publish --access=public

npm ERR! code E403
npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/vue-short-cut - Package name too similar to existing packages; try renaming your package to '@logmei/vue-short-cut' and publishing with 'npm publish --access=public' instead
複製代碼

• 四、版本不容許重複，須要修改package.json中的version

npm ERR! code E403
npm ERR! 403 Forbidden - PUT http://registry.npmjs.org/@logmei%2fvue-short-cut - You cannot publish over the previously published versions: 0.1.2.
複製代碼

• 五、若是想撤銷發佈的npm包（注意不要隨意撤銷包） npm unpublish @logmei/vue-short-cut --force

根據規範，只有在發包的24小時內才容許撤銷發佈的包（ unpublish is only allowed with versions published in the last 24 hours）； 即便你撤銷了發佈的包，發包的時候也不能再和被撤銷的包的名稱和版本重複了（即不能名稱相同，版本相同，由於這二者構成的惟一標識已經被「佔用」了）

發佈成功後查看包

使用發佈的npm包

安裝 npm i @logmei/vue-short-cut -D

查看安裝的包，發現已經安裝成功

main.js中引用也能夠單獨頁面引用

import VueShortCut from '@logmei/vue-short-cut'
Vue.use(VueShortCut)
複製代碼

查看源碼：github.com/logmei/vue-…