使用npm发布vue组件初始化项目执行命令结构说明代码块组件demo抛出组件测试组件(自信的人忽略本步骤)配置项.git

本示例使用简易版的webpack配置模板
工具版本说明: webpack: ^3.6.0 vue: ^2.5.11 node: >= 6.0.0 npm: >= 3.0.0
结尾处有发现的各种报错处理

初始化项目

执行命令

vue init webpack-simple my-project
npm i
npm run dev

结构说明

// 仅需要配置 !!! 标注的文件及可
|— node_modules             项目依赖模块
|— src                      项目源码目录
    |— assets               资源目录(本例未使用)
    |— components           公共组件目录
        |— demo123456789.vue    !!!演示组件
        |— index.js             !!!将该组件作为 Vue 插件
	|— App.vue				根组件
	|— main.js				入口js文件
|— .babelrc					babel的配置文件(本例未使用)
|— .editorconfig		    编辑器的配置文件(本例未使用)
|— .gitignore				git的忽略配置文件
|— index.html				html模板，入口页面(本例未使用)
|— package.json             !!!npm包配置文件,依赖包信息
|— package-lock.json        (本例未使用)
|— README.md				!!!项目介绍
|— webpack.config.js		!!!配置文件

代码块

组件demo

<!-- src/components/demo123456789.vue -->
<template>
  <div>
    <button @click="clickBtn()">{{ text }}</button>
  </div>
</template>

<script>
  export default({
      name:'demo123456789',
      props:['text'],
      methods:{
        clickBtn() {
          alert(this.text)
        }
      }
  })
</script>

<style>
  button{color: #fff; background: #4977fc; border: 1px solid #2C3E50; outline:none; cursor: pointer;}
</style>

抛出组件

/** src/components/index.js */

import demo123456789 from './demo123456789'

demo123456789.install = Vue => Vue.component(demo123456789.name, demo123456789)

export default demo123456789

测试组件(自信的人忽略本步骤)

<!-- src/App.vue -->
<template>
  <div id="app">
    <demo123456789 :text="msg"></demo123456789>
  </div>
</template>
<script>
import demo123456789 from './components/demo123456789'
export default {
  name: 'app',
  components: {
    demo123456789
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App'
    }
  }
}
</script>

配置项

.gitignore, 无用文件不用发布

.DS_Store
node_modules/
src/
.babelrc
.editorconfig
.gitignore
index.html
package.json
package-lock.json
webpack.config.js
npm-debug.log
yarn-error.log

# Editor directories and files
.idea
*.suo
*.ntvs*
*.njsproj
*.sln

package.json

// 直接粘贴本代码者, 需要删除备注!!!
{
  "name": "demo123456789", // 将来要npm i demo123456789
  "description": "A Vue.js project",
  "version": "1.0.0",
  "author": "keywin",
  "license": "MIT",
  "private": false, // 必须设置为false, 非私有
  "main": "dist/demo123456789.js", // 主文件
  ...... // 以下未作修改不做说明
}

webpack.config.js

/** dist是打包以后生成的, 如果你按顺序执行本示例, 暂时还看不到dist文件夹, 可在打包后查看dist及详细 */
var path = require('path')
var webpack = require('webpack')

const NODE_ENV = process.env.NODE_ENV

module.exports = {
  entry: NODE_ENV == 'development' ? './src/main.js' : './src/components/index.js',
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: 'demo123456789.js',
    library: 'demo123456789', // 指定的就是你使用require时的模块名
    libraryTarget: 'umd', // 指定输出格式
    umdNamedDefine: true
  },
  ...... // 下面的没做修改, 不做粘贴
}

打包

npm run build

本地测试

新起项目, 将dist文件引入, 看是否能调用组件, 不作详细阐述

npm上传代码

在 npm官网注册账号,并验证邮箱,没有验证是不能发布代码的
执行命令

npm login

// 输入账号-Username, 回车
// 输入密码-Password, 回车, 密码没有显示区,
// 输入邮箱-Email: (this IS public), 回车

提示: Logged in as ***** on https://registry.npmjs.org/. 即正确

上传

npm publish

使用

命令

npm i demo123456789

页面

// main.js
import demo123456789 from 'demo123456789'
Vue.use(demo123456789)

// App.vue(任意组件都可使用)
<template>
    <demo123456789 :text="msg"></demo123456789>
</template>
<script>
export default {
  data () {
    return {
      msg: 'asdsad'
    }
  }
}
</script>

遇到的报错及原因

no_perms Private mode enable, only admin can publish this module
// 镜像设置成淘宝镜像了，设置回来即可
npm config set registry http://registry.npmjs.org

npm publish failed put 500 unexpected status code 401
// 一般是没有登录，重新登录一下 npm login 即可

npm ERR! you do not have permission to publish “your module name”. Are you logged in as the correct user?
// 包名被占用，改个包名即可。最好在官网查一下是否有包名被占用，之后再重命名

you must verify your email before publishing a new package
// 邮箱未验证，去官网验证邮箱

每次上到npm上需要更改版本号，package.json 里的 version 字段

报错截图

版本号有问题,可能版本号已经存在了

账号密码问题

邮箱未验证, 复制粘贴验证后重新发布