vue封装自定义组件并上传到npm
使用vue-cli3搭建团队的组件库并发布到npm1.安装vue-cli3并创建一个项目首先我们先安装开发必要的工具集,并创建一个项目:npm发包的常用基础知识
相关资料
-
使用vue-cli3搭建团队的组件库并发布到npm
1.安装vue-cli3并创建一个项目
首先我们先安装开发必要的工具集,并创建一个项目:
yarn global add @vue/cli
// 创建项目
vue create vui
初始化成功后的项目目录如下:
我们将src重命名为examples, 并添加packages目录,用来存放我们的自定义组件. 但是cli默认会启动src下的服务,如果目录名变了,我们需要手动修改配置,vue-cli3中提供自定义打包配置项目的文件,我们只需要手动创建vue.config.js即可.我们具体修改如下:
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
// 扩展 webpack 配置,使 packages 加入编译
chainWebpack: config => {
config.module
.rule('js')
.include
.add('/packages')
.end()
.use('babel')
.loader('babel-loader')
}
}
修改入口文件地址为examples下的main.js,其次将packages加入打包编译任务中.
2.编写组件代码
首先我们拿一个Button组件来示范,这里只实现一个比较简单的组件,如果大家想了解更加详细的组件设计方法和思路,可以参考笔者的组件设计相关的文章。首先我们先在packages目录下新建一个Button目录,Button目录下新建src目录,再在src目录下新建index.vue文件,然后src文件夹下index.vue里存放组件的源代码如下:
<template>
<div class="l-button">
<slot></slot>
</div>
</template>
<script>
export default {
name: 'l-button',
props: {
type: String
}
}
</script>
<style scoped>
.l-button {
display: block;
width: 100%;
height: 50px;
line-height: 50px;
font-size: 18px;
margin: 16px 0;
padding: 3px 6px;
background: green;
color: #fff;
box-sizing: border-box;
border-radius: 4px;
}
</style>
我们在Button目录下新建index.js,在index.js里编写如下代码来作为vue的组件安装:
// 导入组件,组件必须声明 name
import LButton from './src'
// 为组件提供 install 安装方法,供按需引入
LButton.install = function (Vue) {
Vue.component(LButton.name, LButton)
}
// 导出组件
export default LButton
Button的组件结构如下:
接下来我们新建src目录,在src目录下新建index.js的入口文件,导入组件并安装导出:
// 导入button组件
import LButton from './Button'
// 组件列表
const components = [
LButton
]
// 定义 install 方法,接收 Vue 作为参数。如果使用 use 注册插件,那么所有的组件都会被注册
const install = function (Vue) {
// 判断是否安装
if (install.installed) return
// 遍历注册全局组件
components.map(component => Vue.component(component.name, component))
}
// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
export default {
// 导出的对象必须具有 install,才能被 Vue.use() 方法安装
install,
// 以下是具体的组件列表
LButton
}
3.测试代码
我们要想看到自己写的组件效果,可以将组件导入到examples目录下的main.js中,其本质就是一个项目的开发目录,我们只需要按照如下方式导入即可:
import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 导入组件库
import ljtui from '../src'
// 注册组件库
Vue.use(ljtui)
Vue.config.productionTip = false
new Vue({
router,
render: h => h(App)
}).$mount('#app')
这种方式是全局导入,至于按需导入,完全可以采用element的方式来配置,对于业务组件来说,一般项目中都是使用的到,所以全局导入比较合适,作为UI库来说,按需导入可能更适合。
接下来我们就可以在项目的Home.vue中使用我们的组件了:
<template>
<div class="main">
<img alt="Vue logo" src="../assets/logo.png">
<l-button type="primary">立即购买</l-button>
</div>
</template>
<script>
export default {
name: 'App',
components: {
}
}
</script>
<style>
.main {
}
</style>
效果如下:
4.配置package.json文件
作为一个组件库,我们必须按照npm的发包规则来编写我们的package.json, 我们先来解决组件库打包的问题,首先我们需要让脚手架编译我们的组件代码,并输出到指定目录下,我们按照发包规范一般会输出到lib目录下,代码如下:
{
"name": "ljtui",
"version": "0.1.2",
"main": "src/index.js",
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint --fix",
"lib": "vue-cli-service build --target lib --name ljtui --dest lib src/index.js"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11",
"vue-router": "^3.2.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^6.2.2",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
}
}
我们的lib脚本就是用来打包packages的组件代码到lib目录下,文件名为以--name指定的名称前缀开头,我们执行脚本会输出类似如下代码:
其次我们需要编写package文件的description,keywords等,具体介绍如下:
-
description 组件库的描述文本
-
keywords 组件库的关键词
-
license 许可协议
-
repository 组件库关联的git仓库地址
-
homepage 组件库展示的首页地址
-
main 组件库的主入口地址(在使用组件时引入的地址)
-
private 声明组件库的私有性,如果要发布到npm公网上,需删除该属性或者设置为false
-
publishConfig 用来设置npm发布的地址,这个配置作为团队内部的npm服务器来说非常关键,可以设置为私有的npm仓库
还有很多配置具体要看团队的要求和规范,这里就不一一举例了
-
npm发包的常用基础知识
发布到npm的方法也很简单, 首先我们需要先注册去npm官网注册一个账号, 然后控制台登录即可,最后我们执行npm publish即可.具体流程如下:
// 本地编译组件库代码
yarn lib
// 登录
npm login
// 发布
npm publish
// 如果发布失败提示权限问题,请执行以下命令
npm publish --access public
执行npm login之后会让你输入账号、密码、账号绑定邮箱这些,依次填写就好;
需要查看是否已经登录,执行npm who am i就好
接着执行npm publish时,可能会报如下错误:
82506@DESKTOP-DBUOBEC MINGW64 /d/work/test/ljtui (master)
$ npm publish
npm notice
npm notice package: ljtui@0.1.0
npm notice === Tarball Contents ===
npm notice 30B .browserslistrc
npm notice 194B lib/ljtui.css
npm notice 172B lib/demo.html
npm notice 613B public/index.html
npm notice 4.3kB public/favicon.ico
npm notice 351B .eslintrc.js
npm notice 73B babel.config.js
npm notice 262B examples/router/index.js
npm notice 249B packages/Button/index.js
npm notice 710B packages/index.js
npm notice 15.4kB lib/ljtui.common.js
npm notice 15.8kB lib/ljtui.umd.js
npm notice 3.8kB lib/ljtui.umd.min.js
npm notice 278B examples/main.js
npm notice 403B vue.config.js
npm notice 752B package.json
npm notice 16.1kB lib/ljtui.common.js.map
npm notice 16.6kB lib/ljtui.umd.js.map
npm notice 19.6kB lib/ljtui.umd.min.js.map
npm notice 317B README.md
npm notice 6.8kB examples/assets/logo.png
npm notice 420B examples/App.vue
npm notice 261B examples/views/Home.vue
npm notice 492B packages/Button/src/index.vue
npm notice === Tarball Details ===
npm notice name: ljtui
npm notice version: 0.1.0
npm notice package size: 23.0 kB
npm notice unpacked size: 104.1 kB
npm notice shasum: bfb1eb26bfadaa1f72285268d71f3dd36976397c
npm notice integrity: sha512-F3pSDogGLJ4BL[...]inwVWwLOWvz2Q==
npm notice total files: 24
npm notice
npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\82506\AppData\Roaming\npm-cache\_logs\2020-12-22T02_58_13_575Z-debug.log
我刚遇到时查了好久,结果发现是我为了安装npm包更快速,将npm镜像地址设置为了淘宝镜像地址,但是发布npm包需要修改为npm地址,执行如下指令
npm config set registry https://registry.npmjs.org
设置成功后,重新执行npm install安装依赖,再执行上面的发布流程
结果发现还是报错
$ npm publish --access public
npm notice
npm notice package: ljtui@0.1.0
npm notice === Tarball Contents ===
npm notice 30B .browserslistrc
npm notice 194B lib/ljtui.css
npm notice 172B lib/demo.html
npm notice 613B public/index.html
npm notice 4.3kB public/favicon.ico
npm notice 351B .eslintrc.js
npm notice 73B babel.config.js
npm notice 262B examples/router/index.js
npm notice 249B packages/Button/index.js
npm notice 710B packages/index.js
npm notice 15.4kB lib/ljtui.common.js
npm notice 15.8kB lib/ljtui.umd.js
npm notice 3.8kB lib/ljtui.umd.min.js
npm notice 278B examples/main.js
npm notice 403B vue.config.js
npm notice 752B package.json
npm notice 16.1kB lib/ljtui.common.js.map
npm notice 16.6kB lib/ljtui.umd.js.map
$ npm publish --access public
npm notice
npm notice package: ljtui@0.1.0
npm notice === Tarball Contents ===
npm notice 30B .browserslistrc
npm notice 194B lib/ljtui.css
npm notice 172B lib/demo.html
npm notice 613B public/index.html
npm notice 4.3kB public/favicon.ico
npm notice 351B .eslintrc.js
npm notice 73B babel.config.js
npm notice 262B examples/router/index.js
npm notice 249B packages/Button/index.js
npm notice 710B packages/index.js
npm notice 15.4kB lib/ljtui.common.js
npm notice 15.8kB lib/ljtui.umd.js
npm notice 3.8kB lib/ljtui.umd.min.js
npm notice 278B examples/main.js
npm notice 403B vue.config.js
npm notice 752B package.json
npm notice 16.1kB lib/ljtui.common.js.map
npm notice 16.6kB lib/ljtui.umd.js.map
npm notice 19.6kB lib/ljtui.umd.min.js.map
npm notice 317B README.md
npm notice 6.8kB examples/assets/logo.png
npm notice 420B examples/App.vue
npm notice 261B examples/views/Home.vue
npm notice 492B packages/Button/src/index.vue
npm notice === Tarball Details ===
npm notice name: ljtui
npm notice version: 0.1.0
npm notice package size: 23.0 kB
npm notice unpacked size: 104.1 kB
npm notice shasum: 41cdf9c4909116dc327c2ed2e7520b731e618b7d
npm notice integrity: sha512-qLMwviAdXXa0+[...]OTHh0DFz0DKXw==
npm notice total files: 24
npm notice
npm ERR! code EPRIVATE
npm ERR! This package has been marked as private
npm ERR! Remove the 'private' field from the package.json to publish it.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\82506\AppData\Roaming\npm-cache\_logs\2020-12-22T03_07_35_597Z-debug.log
按照错误的大概意思,找到了package.json里面的"private": true,把这一属性删除或者改为false即可
再执行发布命令,就搞定了
之后我们就可以通过如下方式使用了:
import ljtui from 'ljtui';
import 'ljtui/lib/ljtui.css';
Vue.use(ljtui);
关于npm相关的知识笔者在这里简单提一下,大家可以参考学习.
1. .npmignore 配置文件
.npmignore配置文件类似于 .gitignore 文件,如果没有 .npmignore,会使用.gitignore来取代他的功能。
2. npm发包的版本管理
npm的发包遵循语义化版本,一个版本号格式如下:Major.Minor.Patch,每一部分具体介绍如下:
-
Major 表示主版本号,做了不兼容的API修改时需要更新
-
Minor 表示次版本号,做了向下兼容的功能性需求时需要更新
-
Patch 表示修订号, 做了向下兼容的问题修正时需要更新
对应的npm也提供了脚本帮我们实现自动更新版本号,如下:
npm version patch
npm version minor
npm version major
更多推荐
所有评论(0)