前言

虽然说不要重复造轮子,但是知道轮子是怎么造出来的还是非常有必要的。本人也比较喜欢折腾,闲暇之余就写了个cq-vui的组件库。当然,我是个弱鸡,大佬们感觉有哪里需要改进优化的,还请留言告知。万分感谢!

这篇文章记录我在开发UI组件库的过程,也希望能够帮助看着这篇文章的你。

1、创建项目

创建项目这点想必大家都会,如果不会的话,那就官网学习下喽!使用下面命令创建项目,然后根据需求进行选择,下图是本人进行选择的一些参数,仅供参考!

1
vue create cq-vui

image-20210413110826209

2、初始化项目

项目创建完成后是一个默认的项目,里面有一些文件我们是不许要的,在开始工作之前先将无用的文件进行删除,重置项目。

处理后的项目目录

image-20210413111246879

启动项目

1
yarn serve

打开页面可以发现是一个空的页面

image-20210413111553827

创建组件

components下创建一个button.vue文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<template>
<button class="cq-button">我是按钮</button>
</template>
<script>
export default {
name:'CqButton'
}
</script>
<style>
.cq-button{
border: none;
outline: none;
background-color: coral;
color: aliceblue;
height: 30px;
width: auto;
padding: 0 10px;
}
</style>

components下创建一个index.js文件,用于注册组件

1
2
3
4
5
6
7
8
9
10
11
12
13
import button from "@/components/button.vue";

const components = {
button
};

const install = function(Vue) {
Object.keys(components).forEach(key => {
Vue.component(components[key].name, components[key]);
});
};

export default install;

在main.js下引入导出的组件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
+ import CqUi from './components/index'
+ Vue.use(CqUi)

Vue.config.productionTip = false

new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')

在view文件夹下创建一个index.vue页面

1
2
3
4
5
6
7
8
9
10
11
12
13
<template>
<cq-button />
</template>

<script>
export default {
name:'indexPage'
}
</script>

<style>

</style>

在router下的index.js中设置路由

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import Vue from "vue";
import VueRouter from "vue-router";
import Index from "../views/index.vue";

Vue.use(VueRouter);

const routes = [
{
path: "/",
name: "Index",
component: Index
}
];

const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes
});

export default router;

此时打开页面就可以看到我们的按钮了

image-20210413113212118

调整项目

要做成一个库进行发布,我们仅仅这样是不行的!还需要对项目进行调整(参考的是ElementUI组件库进行配置的)

将src文件夹改为examples

创建一个 packages文件夹,将资源文件复制一份到此文件夹中

配置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
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
{
"name": "cq-vui",
"version": "0.1.0",
"license": "ISC",
"main": "lib/cq-ui.umd.min.js",
"description": "一个UI组件库",
"author": {
"name": "长情"
},
"keywords": [
"vue",
"UI"
],
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"lib": "vue-cli-service build --target lib --dest lib packages/index.js"
},
"dependencies": {
"core-js": "^3.6.5",
"cq-vui": "^0.1.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuex": "^3.4.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-plugin-vuex": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.3.1",
"eslint-plugin-vue": "^6.2.2",
"lint-staged": "^9.5.0",
"prettier": "^2.2.1",
"sass": "^1.26.5",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"@vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
],
"gitHooks": {},
"lint-staged": {
"*.{js,jsx,vue}": [
"vue-cli-service lint",
"git add"
]
}
}

注意这句话**”lib”: “vue-cli-service build –target lib –dest lib packages/index.js”**

是为了构建npm包的,可以看到vue-cli官方文档中有这段介绍

image-20210413113958461

调整**.gitignore**文件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.DS_Store
node_modules
/dist
.npmignore


# local env files
.env.local
.env.*.local

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*

# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

创建vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
const path = require("path");
module.exports = {
pages: {
index: {
// 修改项目入口文件
entry: "examples/main.js",
template: "public/index.html",
filename: "index.html",
},
},
// 扩展webpack配置,使webpages加入编译
chainWebpack: (config) => {
config.module
.rule("js")
.include.add(path.resolve(__dirname, "packages"))
.end()
.use("babel")
.loader("babel-loader")
.tap((options) => {
return options;
});
},
};

创建**.npmignore文件,上传到npm时要忽略上传的文件,由于后面上传npm**要用到,就在这说了!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
node_modules/
src/
rollup.config.js
app.vue
.gitignore

# 忽略目录
examples/
packages/
public/

# 忽略指定文件
vue.config.js
babel.config.js
*.map

上传到github仓库

登录github

点击创建仓库

给仓库起个名字(cq-vui)

在项目中执行

1
2
3
4
yarn add .
yarn commit -m 'init'
yarn remote xxx(你的仓库地址)
yarn push origin master

执行完这些命令之后就已经将本UI库上传到github上了

上传到npm仓库

首先,你要有一个npm账号,没有的话自行注册。

在命令行执行,保证上传是正确的

1
2
3
yarn add nrm -g
nrm ls
nrm use npm

在命令行执行yarn lib进行打包生成要上传到npm上的文件

1
yarn lib // 打包生产文件

在命令行执行 ** npm login** 进行登录

1
npm login // 用户名、密码、邮箱

在命令行执行npm publish

1
2
3
npm publish  // 上传到npm
// 注意:如果npm上已经有和你库的名字相同的库,则会上传失败,报错->没有权限
// 此时你需要重新起一个npm上没有的名字进行提交上传

验证UI组件库是否成功

在项目中执行

1
yarn add cq-vui // 下载UI组件库

在main.js中全局使用

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
+ import CqVui from 'cq-vui/lib/cq-vui.umd'
+ import 'cq-vui/lib/cq-vui.css'

+ Vue.use(CqVui)

Vue.config.productionTip = false;

new Vue({
router,
store,
render: (h) => h(App),
}).$mount("#app");

在页面上使用

1
2
3
4
5
6
7
8
9
10
<template>
<cq-button>我是按钮</cq-button>
</template>

<script>
export default {};
</script>

<style></style>

页面上显示的效果

image-20210413115738837

到此UI组件库基础搭建已经全部完成

项目结构

image-20210413115846398

组件开发

将会慢慢完善,敬请期待

注意:部分文章可能会在不就的将来更新

如果能够帮助到你,是小编最大的荣幸

当然 有 不好的地方 请大家帮忙指出 学习永无止境

小编一直认为 人外有人 天外有天 一起学习 共同进步

让我们共同加油吧!!!