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-…