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

点击上方蓝字关注咱们

欢迎关注个人公众号，志学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

欢迎关注