封装vue组件上传到npm库

89 阅读 0 评论 59 点赞

我是靠谱客的博主感动草莓，这篇文章主要介绍封装vue组件上传到npm库，现在分享给大家，希望可以做个参考。

先去npm官网注册一个账号，因为上传的时候需要账号、密码、邮箱。网址：https://www.npmjs.com/package/npm
自己封装一个组件

需要安装 node.js -v8+和vue-cli@2.0版本
先创建一个项目
在你想要存放的文件夹，打开cmd窗口，输入下面命令

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
vue init webpack-simple <project-name>//这个是项目文件名，可用不写，然后敲回车

`Project name (project-name)`//项目名称括号里的是你的项目文件名,直接回车

` Project description( A Vue.js project)` //回车

`Author (wuguoxing <www.961369201@qq.com>)`//作者默认括号里的

` License MIT`//验证单位回车就好了

`Use sass? (y/N)`//y就好了, sass样式预处理

创建完之后，根据提示，输入一下命令
cd “刚刚的项目文件名”
npm install //下载依赖
npm run dev //启动项目

成功之后呢，就来编写组件了

src 里面创建一个文件夹，随便命令，我就命名为base
"base"下创建一个index.js文件作为入口文件
"base"下创建一个文件夹，放你写好的基础组件

组件就不讲怎么写了，现在来讲index.js文件的配置

先引入你写好的基础组件
import loading from “./loading/loading.vue”

.vue文件的名字要对应你组件里的name属性

然后安装组件
const components = {
install(Vue){
Vue.component( “loading”, “loading”)
}
}
if(typeof window !=== “undefined” && window.Vue){
window.Vue.use(components)
}

//暴露接口
export default components

接下来是webpack.config.js文件的配置

//入口，改成你的入口文件
entry:"./src/base/index.js",
//出口
output:{
path:path.resolve(__dirname, “./dist”),
publicPath:"/dist",
filename:“loading.min.js”, //你打包出来的名称，文件夹的名称
library:“loading”，
libraryTarget:“umd”
}

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
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
```json
{
  "name": "loading",
  "description": "A Vue.js project",
  "version": "1.1.0",
  "license": "MIT",
#组件包是否是私有组件  
  "private": false,
  "scripts": {
    "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot",
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },

  "main": "dist/loading.min.js",
  "dependencies": {
    "vue": "^2.5.11"
  },
  "files": [
    "dist",
    "src/lib"
  ],
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ],
  "devDependencies": {
    "babel-core": "^6.26.0",
    "babel-loader": "^7.1.2",
    "babel-preset-env": "^1.6.0",
    "babel-preset-stage-3": "^6.24.1",
    "cross-env": "^5.0.5",
    "css-loader": "^0.28.7",
    "element-ui": "^2.8.2",
    "file-loader": "^1.1.4",
    "vue-loader": "^13.0.5",
    "vue-template-compiler": "^2.4.4",
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.9.1"
  }
}

、

上传到npm库

上传到npm库之前，先本地测试一下能不能用
先打包 npm run build ,会生成一个dist的文件夹
npm pack 会生成.tgz文件

在一个vue项目中下载
终端上–npm install D:Projectloadingloading-1.2.0.tgz
#绝对路径

然后在项目中引用，在main.js文件
#跟Elementui一样
import 名称 from ‘组件库名’
#如果有样式文件也是一样
import ‘组件库名/lib/css/…css’
Vue.use(名称)；

如果可以用就直接上传到npm库了
如果你是上传到私有库，就要转换仓库，因为默认是npm官网的库
npm config set registry
如果没有私有库，可以忽略

先登录npm，
npm login
需要填写账号、密码、邮箱
Username:
Password:
Email:
登录成功后，会返回
Logged in as [用户名] on [npm库地址]

上传npm包
npm publish

ps:每次更新之前要更改package.json文件里的版本号，或者npm version patch 这是把版本迭代一级。如果改了组件的逻辑，要重新打包,npm run build，在上传

测试是否可用
上传到npm库之后，你可以登录到官网你看你上传得package
可以自己在项目中测试能不能用，
先下载 npm install loading
下载成功后再main.js中引入
#跟Elementui一样
import 名称 from ‘组件库名’
#如果有样式文件也是一样
import ‘组件库名/lib/css/…css’
Vue.use(名称)；
#然后在任何组件都可以用了

上传npm库中可能会遇到的问题：
1.npm publish报错403：you must verify your email before publishing a new package:
这是因为你注册账号的时候，没用邮箱激活，打开有点，点击链接激活就可以了。或者上官网，登录一些，会提示你没有进行邮箱激活，是否需要发送邮件激活的。

2.npm publish报错403：You do not have permission to publish “vue-drag-infinite”. Are you logged in as the correct user?
这是因为你要发布的package的包名在npm库已经有人用过了，需要你换一个没有被注册过的名字。在package.json文件，把name属性的值换掉就行。