vue-cli v3.10创建项目、发布npm包并踩坑解决

4,275 阅读4分钟

安装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包的内容

1、工程目录(开发功能,并测试没问题,若有依赖包正常安装)

2、package.json中的配置

  • 添加组件信息
   { 
    "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"
  }

3、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
    }

4、自定义指令(回到正轨)

    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

5、在package.json中添加编译命令

cli3提供了build指令

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

6、设置.gitignore的忽略文件(没有忽略的文件将会发包到npm中,安装后的文件目录还是原来的,相当于解压自己的文件,只是被安装到node_modules下)

    /dist
    /lib
    /src
    /packages
    /public
    vue.config.js
    babel.config.js
    *.map
    *.html

发布npm包

1、到官网注册用户 www.npmjs.com

2、本地发包

登录:npm login
发布:npm publish

发布时会遇到的问题

  • 1、需要修改地址,一般为了下载速度快会改为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
  • 2、包重名,修改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?
  • 3、若包名与现有的包很相似,会提示修改包名,修改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
  • 4、版本不允许重复,需要修改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.
  • 5、如果想撤销发布的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-…