上传自己的组件到NPM

新建项目

用vue-cli新建项目vue init webpack-simple tagCloud,tagCloud请换成自己的项目名称,然后在src下新建lib文件夹,然后在lib文件夹index.js和tagCloud.vue文件。目录结构如下:

目录结构

编写组件代码

编写tagCloud.vue的代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<template>
<div class="tag-cloud" ref="wrapper">
<!-- HTML模板代码 -->
</div>
</template>

<script>
// 返回的vue实例
export default {

}
</script>

<style scoped>
/* css代码 */
</style>

index.js的代码

1
2
3
4
5
6
7
8
9
10
11
12
import TagCloudComponent from './tagCloud.vue'

const instance = {
install: function (Vue) {
if (typeof window !== 'undefined' && window.Vue) {
Vue = window.Vue
}
Vue.component(TagCloudComponent.name, TagCloudComponent)
}
}

export default instance

修改配置文件

修改package.json文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name": "v-tag-cloud",
"description": "Vue标签云组件",
"version": "1.0.3",
"author": "vincent <619115125@qq.com>",
"license": "MIT",
// 发布npm公库,设置为false
"private": false,
// 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径
"main": "dist/tag-cloud.js",
"scripts": {
"dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"repository": {
"type": "git",
"url": "https://gitee.com/619115125/tagCloud.git"
},
"keywords": [
"Vue",
"标签云"
]
}

修改webpack.config.js

由于不是所有使用组件的人都是通过 npm 安装使用 import 引入组件的,还有很多人是通过<script>标签的方式直接引入的,所以我们要将 libraryTarget 改为 umd 格式,同时我们要配置文件入口和出口

1
2
3
4
5
6
7
8
9
10
11
// entry: './src/main.js',
entry: './src/lib/index.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
// filename: 'build.js'
filename: 'tag-cloud.js',
library: 'TagCloud',
libraryTarget: 'umd',
umdNamedDefine: true
},

修改.gitignore 文件

因为要用dist文件夹,所以在.gitignore文件中把dist/去掉。

修改index.html(非必需)

1
2
<!-- <script src="/dist/build.js"></script> -->
<script src="/dist/tag-cloud.js"></script>

测试插件

在发正式包之前可以在本地先打一个包,然后测试下有没有问题,如果没问题再发布到npm上。
首先,打包到本地

1
2
npm run build
npm pack

npm pack 之后,就会在当前目录下生成 一个tgz 的文件。
打开一个新的vue项目,在当前路径下执行(‘路径’ 表示文件所在的位置)
npm install 路径/组件名称.tgz

然后在新项目的入口文件mian.js文件中使用:

1
2
3
import 变量名 from '组件名称'

Vue.use(变量名)

发布

  1. 在发布之前需要先注册npm账号(必须验证邮箱)。
  2. 然后在项目根目录下。执行命令:npm addUser 或者 npm login,输入的用户名、密码和邮箱即就是你注册的相关信息。
  3. 判断是否登录成功。npm who am i,正确返回信息即登录成功
  4. 发布:npm publish。如果报403(没有权限)错误,登录失败或是项目名被占用。(请配置git仓库)
  5. 在npm网站中登录你的账户,在“头像->packages”下面可查看。
    packages页面

更新与使用

更新
一定要修改version,并且大于上一次。然后重新发布即可。

使用

1
npm install v-tag-cloud -S

注意,这里安装的名称并非项目包名,二是package.json文件里面的name名称。

坚持原创技术分享,您的支持将鼓励我继续创作!