0.1.7 • Published 1 year ago
zfj-all v0.1.7
vue2-zf-allModule
下载依赖包
npm install运行项目
npm run serve项目打包
npm run build检查和修复文件
npm run lint创建npm 依赖教程
1.开发vue组件首先要做的事就是先创建一个vue项目，通过vue-cli命令创建vue项目。
npm install -g @vue/cli
vue create vm-mint-ui2.下面我们修改一下配置文件，根据个人习惯修改。
package.json（初始配置）
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib src/components/index.js --dest lib"
},
将“private”:true修改为false，即由私有的改为公共的才能上传到npm上，否则的话会上传失败。3.更改目录
我们可以把components目录当作我们要封装的组件目录，把views目录当作我们本地项目测试的目录。
4.在这里我们可以在components目录下创建几个我们想要封装的组件，这里我就以封装button按钮为例。
components/button/index.vue
<template>
<span class="zf-button" :class="htButtonClass">
<slot name="prepend" />
<el-popconfirm
v-if="title"
:title="title"
:disabled="disabled || loading"
@confirm="confirm"
@cancel="cancel"
>
<el-badge slot="reference" :value="badge" class="item" :hidden="disabled">
<el-button
:disabled="disabled"
:type="type"
:icon="icon"
:circle="circle"
:size="size"
:loading="loading"
>
<slot />
</el-button>
</el-badge>
</el-popconfirm>
<el-badge
v-else
slot="reference"
:value="badge"
class="item"
:hidden="disabled"
>
<el-button
:disabled="disabled"
:type="type"
:icon="icon"
:circle="circle"
@click="click"
:size="size"
:loading="loading"
>
<slot />
</el-button>
</el-badge>
<slot name="append" />
</span>
</template>
<script>
export default {
name: "ZfButton",
props: {
title: {
type: String,
},
disabled: {
type: Boolean,
},
badge: {
type: [String, Number],
},
type: {
type: String,
},
icon: {
type: String,
},
circle: {
type: Boolean,
},
size: {
type: String,
},
loading: {
type: Boolean,
},
},
data() {
return {};
},
methods: {
confirm() {
this.$emit("confirm");
},
cancel() {
this.$emit("cancel");
},
click() {
this.$emit("click");
},
},
computed: {
htButtonClass() {
let result = {};
if (this.badge) {
let length = this.badge.toString().length;
result[`badge-length-${length}`] = true;
}
return result;
},
},
};
</script>我们把想要封装的button按钮相关代码写完之后，下面我们就去注册我们的这个组件，我们在components目录下新建一个index.js文件来进行注册并暴露出方法。
components/index.js
import ZfButton from './button/index.vue';
import ZfDatePicker from './date-picker/index.vue';
import ZfInput from './input/index.vue';
import ZfPromise from './promise/index.vue';
import ZfTable from './table/index.vue';
import ZfFormItem from './form-item/index.vue';
import ZfContain from './contain/index.vue';
import ZfUpload from './upload/index.vue';
import ZfUploadButton from './upload-button/index.vue';
const components = [
ZfButton,
ZfDatePicker,
ZfInput,
ZfPromise,
ZfTable,
ZfFormItem,
ZfContain,
ZfUpload,
ZfUploadButton
]
const install = function(Vue) {
components.forEach(component => {
Vue.component(component.name, component)
})
if (typeof window !== 'undefined' && window.Vue) {
install(window.Vue)
}
}
export default install;这里我们只看button按钮，至于其他封装的组件像VmEditIcon、VmTree可以忽略，其实都一样，哪个都行，这里我只需简单介绍一个就行。
5.注册也注册好了，下面我们改怎么测试一下效果如何，具体怎么使用，这里我们需要在全局配置文件main.js文件中配置一下。
import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import ZfUI from '@/components/index.js'
Vue.use(ZfUI)
Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
render: h => h(App),
}).$mount('#app')从这里我们可以看出，其实很简单，我这里是全局配置，局部配置也行，具体看个人习惯，其实跟其他组件库用法一样，下面我们测试一下效果吧。
views/packages/button.vue
<div><zf-button type="primary">新增</zf-button></div>
<div><zf-input type="upper" v-model="input">新增</zf-input></div>
<div>
<zf-contain>
<template slot="menu">
<el-menu :default-openeds="['1', '3']">
<el-submenu index="1">
<template slot="title"><i class="el-icon-message"></i>导 航一</template>
<el-menu-item-group>
<template slot="title">分组一</template>
<el-menu-item index="1-1">选项1</el-menu-item>
<el-menu-item index="1-2">选项2</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="分组2">
<el-menu-item index="1-3">选项3</el-menu-item>
</el-menu-item-group>
<el-submenu index="1-4">
<template slot="title">选项4</template>
<el-menu-item index="1-4-1">选项4-1</el-menu-item>
</el-submenu>
</el-submenu>
</el-menu>
</template>
</zf-contain>6.当我们有了npm账号，下面修改package.json配置文件
"name": "zfj-all", npm包名称且唯一
"version": "0.1.5", npm 版本号且每次发布都要改变
"description": "A Commponent Library for Vue.js", npm包信息描述
"main": "lib/zfj-all.common.js", 打包后的主体文件入口
"private": false,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lib": "vue-cli-service build --target lib src/components/index.js --dest lib" 打包npm包命令
},- --dest : 输出目录，默认 dist 。这里我们改成 lib 打包后的文件夹的名称 - `--target：lib` 关键字 指定打包的目录 - `--name：`打包后的文件名字 添加.npmignore 文件，设置忽略发布文件 我们发布到 npm 中，只有编译后的 lib 目录、package.json、README.md才是需要被发布的。所以我们需要设置忽略目录和文件。 和 .gitignore 的语法一样，具体需要提交什么文件，看各自的实际情况。 在这里我，没有创建.npmignore文件来忽略所不需要的文件，我在package.json文件中设置了files也是一样的，配置files的意思就是表示要显示的文件，其他的文件就相当于忽略了，和创建.npmignore文件进行忽略，效果是一样的。 "browserslist": [ "> 1%", "last 2 versions", "not dead" ], "files": [ "lib", "dist" ]
7.在该项目中添加npm账号：
npm addUser
这个过程中会让你输入账号、密码、邮箱以及发送该邮箱中的一次性动态密码，输完之后，然后回车。接着执行命令登录npm账号：
npm login同样输入账号、密码、邮箱以及发送该邮箱中的一次性动态密码，输完之后，然后回车。
下面，我们再继续执行命令进行打npm包：
npm run lib8.在这里我要重点讲一下几个点：
1.如果我们有额外的样式,如像css、scss、less等文件，一定要引入到之前我们注册组件配置的文件中，像我这里要引入到components/index.js文件中，
import "./xxx/xxx/xx/xx.css"2.把相关的样式文件引入好之后，我们打包完之后，才会在lib文件夹中看到生成的css样式文件，这样我们就可以像element-ui一样单独引入样式，否则的话，我们在别的项目中使用时，你会发现我们引入的组件没有样式，非常的难看，很丑。
9.打包好之后，我们如何上传呢，下面我们继续执行命令：
npm publish上传成功，到这里基本完事了，我们可以登录npm账号，去官网上查看一下，看看有没有我们上传的npm包。