最近公司项目比较多,不同的项目中公用的组件,如何避免因为一个需求的变动,造成所有项目都要拿过来修改,我们想到把公共的部分抽取出来做为一个组件,常见的组件模式有:
- 直接存放到项目中(需要在不同的项目中拷贝)
- 发布到
npm
上公用的模块,
本文章介绍登录组件如何从0开始创建一个
vue
组件发布到npm
上本项目案例
一、依赖环境
- 1、
node
环境 - 2、
vue-cli
的脚手架
二、使用vue-cli
构建一个项目及基本配置
-
1、创建一个基本的项目
vue init webpack-simple maucash(项目名)
-
2、项目的基本结构
-
3、本项目是基于
iview
的基础上,需要根据官网的方式安装与配置iview
连接地址
三、本地调试
-
1、在
App.vue
中直接引入本地的组件import maucashLogin from "./packages/maucash-login/maucash-login";
-
2、
maucash-login
组件和我们本地写一般的vue
组件一样的,附加组件之间的通讯
四、本地组件测试没问题,改造成vue
插件类型的
-
1、在组件的文件夹下创建一个
index.js
文件// 引入组件 import MaucashLogin from './maucash-login' MaucashLogin.install = Vue => Vue.component(MaucashLogin.name, MaucashLogin); if (typeof window !== 'undefined' && window.Vue) { window.Vue.use(MaucashLogin); } export default MaucashLogin
-
2、在与
packages
同级下创建一个index.js
的文件(一个包下可能有多个组件)import Maucash from './packages/maucash-login/index.js'; const components = [ Maucash, ] const install = function(Vue, opts = {}) { components.map(component => { Vue.component(component.name, component); }) } /* 支持使用标签的方式引入 */ if (typeof window !== 'undefined' && window.Vue) { install(window.Vue); } export default { install, Maucash, }
五、修改配置文件
-
1、修改
package.json
文件{ "name": "maucash", "description": "maucash中常用组件抽取", "version": "1.0.2", "author": "kuangshp <kuangshp@126.com>", // 开源协议 "license": "MIT", // 因为组件包是公用的,所以private为false "private": false, // 配置main结点,如果不配置,我们在其他项目中就不用import XX from '包名'来引用了,只能以包名作为起点来指定相对的路径 "main": "dist/maucash.js", "scripts": { "dev": "cross-env NODE_ENV=development webpack-dev-server --open --hot", "build": "cross-env NODE_ENV=production webpack --progress --hide-modules" }, "dependencies": { "axios": "^0.18.0", "iview": "^2.14.1", "style-loader": "^0.23.1", "url-loader": "^1.1.2", "vue": "^2.5.11" }, // 指定代码所在的仓库地址 "repository": { "type": "git", "url": "git+git@git.xxxx.com:maucash/maucash.git" }, // 指定打包后,包中存在的文件夹 "files": [ "dist", "src" ], // 指定关键词 "keywords": [ "vue", "maucash", "code", "maucash code" ], // 项目官网的地址 "homepage": "https://github.com/kuangshp/maucash", "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ], "devDependencies": { "babel-core": "^6.26.0", "babel-loader": "^7.1.2", "babel-plugin-transform-runtime": "^6.23.0", "babel-preset-env": "^1.6.0", "babel-preset-stage-3": "^6.24.1", "cross-env": "^5.0.5", "css-loader": "^0.28.7", "file-loader": "^1.1.4", "node-sass": "^4.5.3", "sass-loader": "^6.0.6", "vue-loader": "^13.0.5", "vue-template-compiler": "^2.4.4", "webpack": "^3.6.0", "webpack-dev-server": "^2.9.1" } }
-
2、修改
.gitignore
文件因为要用
dist
文件夹,所以在.gitignore
文件中把dist/
去掉。 -
3、修改
webpack.config.js
文件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/index.js', output: { path: path.resolve(__dirname, './dist'), publicPath: '/dist/', filename: 'maucash.js', library: 'maucash', libraryTarget: 'umd', umdNamedDefine: true }, ... }
六、本地测试自己的包文件
-
1、本地打包
npm run build # 本地生成一个maucash-1.0.1.tgz的包 npm pack
-
2、本地测试(在别的项目中)
npm install 路径/maucash-1.0.1.tgz
-
3、在本地项目的
main.js
中import Maucash from 'maucash'; Vue.use(Maucash);
-
4、在需要使用的地方
<maucash-login :baseUrl="baseUrl" :headers="headers" @loginHandle="loginHandle"/>
-
5、本地测试没问题就可以发布到
npm
上
七、发布到npm
上(注意镜像地址要指向npm的地址)
-
1、到npm上注册一个账号
-
2、登录
npm login
-
3、添加用户信息
npm adduser
-
4、发布到远程仓库(
npm
)上npm publish
-
5、删除远程仓库的包
npx force-unpublish package-name '原因描述'