乐趣区

kui-组件化库思路来啦老弟持续更新哦部署gitpages添加issue

jiezi

点击上方蓝字关注我们

欢迎关注我的公众号，志学 Python

01

一些想法

今天暂时不更新 flask 教程了，今天专门写一篇文章来介绍一下今天搞了一天的 kui 组件化学习库的思路，其实隐隐约约都有一种感觉，想拥有自己的一个组件化学习库，不会发布到 npm 上，主要是记录自己的学习组件，以及工作中编写的组件，整理形成属于自己的 一个 ui 组件库。

02

gitpages 页面

我已经把这个项目，这个组件化学习库，部署到码云的 gitee.com 的 gitpages 页面上了，如果感兴趣的伙伴可以给个 star，不要吝啬自己的手指，点赞亮起来，一起来学习吧，如下图所示 https://kennana.gitee.io/kui/

03

issue 地址

如果你有任何疑问，你可以随时提交 issue，我会抽空解答小伙伴的 issue，当然如果你有什么想法也可以提出来，可以写成组件，让我们这个组件学习库，更加强大起来，issue 地址在此，欢迎访问 https://gitee.com/kennana/KUI…

04

项目起源

引发我突然向创建一个属于自己的组件库原因是今天来公司学习的时候看到一篇文章触动到我了，有了想法就必须要行动，不然以后都不会再去行动了，有了想法就要做出来，只有做出来才能判断自己到底行不行，大家可以看看下面这篇文章，文章有点老，但是可以学到很多东西

https://juejin.im/entry/58f48…

实话说的好，要想功夫深，铁杵磨成针，需要对 vue 的基础知识比较扎实，还有就是不管框架这么变化，怎么进步，核心的 javascript，HTML，CSS 永远都是核心，只要把核心给打扎实了，不管怎么变化，以核心应万变

05

vue 组件化库创建

保持学习能力吧，在未来你会发现自己将会超越 80% 的人，首先得有一个目录吧，我的英文名字叫做 Ken，人称 啊‘K’，因为比较喜欢这就是街舞里面的阿 K，这个人物，所以就索性叫做这个名字好了。故 ui 库的 名字叫做 KUI

06

你是喜欢喜宝还是坏报

值得关注的是 vue-cli4 出来了，跟 vue-cli3 好像没什么区别，这算是一个喜宝吧，值得我们去关注，前端一直在前进，我们要保持学习能力，学习能力越强，在未来更具有优势

https://www.cnblogs.com/zhoul…

但是有一个注意点就是 在 vue create 一个项目的时候，项目名称 必须是小写字母，否则会报错

07

码云 gitee 地址

我的 gitee.com 地址如下，这个是会持续更新的，主要是工作中自己写的一些组件，还有同事写的一些组件，整理成自己的一个组件库吧，不会发布到 npm 主要是 组件库可能没有普遍性需求，怕误人子弟，所以只是当作学习吧，当然你可以拿去改成自己需要的样子，就这样

https://gitee.com/kennana/KUI

08

浏览目录

在 src 下有个 components 目录，主要用来放置前端组件的主要目录

public 主要放置一些公共的文件，类似 img，html，css

node_modules 是一些 npm 依赖包放置的地方

docs 是组件一些说明文档

router 路由配置文件

09

配置 vue.config.js

const path = require('path')
const vuxLoader = require('vux-loader')

function resolve(dir) {return path.join(__dirname, dir)
}

module.exports = {
  publicPath: '/kui/',
  productionSourceMap: false,
  /**
   * Type: Object
   * 所有 webpack-dev-server 的选项都支持
   * 有些值像 host、port 和 https 可能会被命令行参数覆写
   * 有些像 publicPath 和 historyApiFallback 不应该被修改，因为它们需要和开发服务器的 baseUrl 同步以保障正常工作
   */
  devServer: {
    port: 8080, // 项目端口
    disableHostCheck: true, // 关闭 host 检测 (配置了这个才可以通过域名访问)
    compress: true, // 代码压缩
  },

  configureWebpack: config => {
    vuxLoader.merge(config, {options: {},
      plugins: ['vux-ui']
    })
  },

  chainWebpack: config => {
    // 路径别名
    config.resolve.alias
      .set('@', resolve('src'))
      .set('@css', resolve('src/assets/css'))
      .set('@img', resolve('src/assets/image'))
      .set('@cps', resolve('src/components'))
      .set('@view', resolve('src/views'))
  },
  css: {
    loaderOptions: {
      scss: {
        prependData: `
          @import "@css/public/reset.scss";
          @import "@css/globalCite/defaultVariable.scss";
          @import "@css/globalCite/defaultThemeVariable.scss";
          @import "@css/globalCite/themeMixin.scss";
          @import "@css/globalCite/bgImageMixin.scss";
        `
      }
    },
  },

}

10

配置 package.json

{
  "name": "kui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve --hot",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "keywords": [
    "kui",
    "vue",
    "ui"
  ],
  "author": "Ken UI",
  "license": "MIT",
  "repository": {
    "type": "git",
    "url": "https://gitee.com/kennana/KUI.git",
    "issue": "https://gitee.com/kennana/KUI/issues"
  },
  "dependencies": {
    "better-scroll": "^1.15.2",
    "core-js": "^3.3.2",
    "vue": "^2.6.10",
    "vue-router": "^3.1.3",
    "vuex": "^3.0.1",
    "vux": "^2.9.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-eslint": "^4.0.0",
    "@vue/cli-plugin-router": "^4.0.0",
    "@vue/cli-plugin-vuex": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "css-loader": "^1.0.1",
    "eslint": "^5.16.0",
    "eslint-plugin-vue": "^5.0.0",
    "less": "^3.10.3",
    "less-loader": "^5.0.0",
    "node-sass": "^4.12.0",
    "sass-loader": "^8.0.0",
    "vue-loader": "^14.2.2",
    "vue-template-compiler": "^2.6.10",
    "vux-loader": "^1.2.9"
  }
}

11

mian.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

import fyChatContent from '@cps/chatContent/'
import fyHeadTitle from '@cps/headTitle/'
import {fyButton,fyNegativeButton} from '@cps/button/'
import toast from '@cps/toast/index'
import fyChatTimeLine from '@cps/chatTimeLine/'
import fyMessageNotify from '@cps/messageNotify'


Vue.use(toast)

// 自定义组件
Vue.component('fy-chat-content', fyChatContent)
Vue.component('fy-head-title', fyHeadTitle)
Vue.component('fy-button', fyButton)
Vue.component('fy-negative-button', fyNegativeButton)
Vue.component('fy-chat-time-line', fyChatTimeLine)
Vue.component('fy-message-notify', fyMessageNotify)

import {XSwitch} from 'vux'
import fyChatXSwitch from '@cps/chatXSwitch'
import fyChatCheckbox from '@cps/chatCheckbox'
// import Actionsheet  from 'vux/src/components/actionsheet'
/**
 * 官网有一些 bug
 * 按照官方文档提示在项目入口文件中 全局注册 并不成功
 * import Vue from 'vue'
 * import {Actionsheet} from 'vux'
 * Vue.component('actionsheet', Actionsheet)
 *
 * 把 import {Actionsheet} from 'vux' 改成
 * import Actionsheet from 'vux/src/components/actionsheet' 即可
 *
 * 但是局部注册却有效
 * import {Actionsheet} from 'vux'
 * export default {
 *  components: {
 *    Actionsheet
 *  }
 * }
 *
 * actionsheet 用法有些问题
 * <group>
 *  <x-switch title="demo" v-model="show1"></x-switch>
 * </group>
 *
 * <load-more :show-loading="true" tip='加载中...'></load-more>
 * */ 
Vue.component('x-switch', XSwitch)
// 二次封装组件
Vue.component('fy-chat-x-switch', fyChatXSwitch)
Vue.component('fy-chat-checkbox', fyChatCheckbox)

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

12

components 组件介绍

button 按钮组件

chatCheckbox 多选框组件

chatContent 聊天信息组件

chatTimeLine 时间轴组件

chatXSwitch 依赖于 vux-ui 的切换组件

headTitle 头部组件

messageNotify 消息打扰提示组件

toast 弹出层提示组件

13

主页 home 效果

14

组件页 about 效果

15

三大主题色系随意切换

1 渐变色系

2 黄色色系

3 默认色系

16

欢迎关注

退出移动版