kui 組件化庫思路(來啦，老弟，持續更新哦，部署gitpages，添加issue)

2019 年 11 月 27 日
筆記

一些想法

今天暫時不更新 flask 教程了，今天專門寫一篇文章來介紹一下今天搞了一天的 kui 組件化學習庫的思路，其實隱隱約約都有一種感覺，想擁有自己的一個組件化學習庫，不會發布到 npm 上，主要是記錄自己的學習組件，以及工作中編寫的組件，整理形成屬於自己的一個 ui 組件庫。

gitpages頁面

我已經把這個項目，這個組件化學習庫，部署到碼雲的 gitee.com 的 gitpages 頁面上了，如果感興趣的夥伴可以給個 star ，不要吝嗇自己的手指，點贊亮起來，一起來學習吧，如下圖所示 https://kennana.gitee.io/kui/

issue 地址

如果你有任何疑問，你可以隨時提交 issue，我會抽空解答小夥伴的 issue，當然如果你有什麼想法也可以提出來，可以寫成組件，讓我們這個組件學習庫，更加強大起來，issue 地址在此，歡迎訪問 https://gitee.com/kennana/KUI/issues

項目起源

引發我突然向創建一個屬於自己的組件庫原因是今天來公司學習的時候看到一篇文章觸動到我了，有了想法就必須要行動，不然以後都不會再去行動了，有了想法就要做出來，只有做出來才能判斷自己到底行不行，大家可以看看下面這篇文章，文章有點老，但是可以學到很多東西

https://juejin.im/entry/58f48484da2f60005d3cb46c

實話說的好，要想功夫深，鐵杵磨成針，需要對 vue 的基礎知識比較紮實，還有就是不管框架這麼變化，怎麼進步，核心的 javascript，HTML， CSS 永遠都是核心，只要把核心給打紮實了，不管怎麼變化，以核心應萬變

vue 組件化庫創建

保持學習能力吧，在未來你會發現自己將會超越 80% 的人，首先得有一個目錄吧，我的英文名字叫做 Ken，人稱啊『K』，因為比較喜歡這就是街舞裡面的阿K，這個人物，所以就索性叫做這個名字好了。故 ui 庫的名字叫做 KUI

你是喜歡喜寶還是壞報

值得關注的是 vue-cli4 出來了，跟 vue-cli3 好像沒什麼區別，這算是一個喜寶吧，值得我們去關注，前端一直在前進，我們要保持學習能力，學習能力越強，在未來更具有優勢

https://www.cnblogs.com/zhoulifeng/p/11690799.html

但是有一個注意點就是在 vue create 一個項目的時候，項目名稱必須是小寫字母，否則會報錯

碼雲 gitee 地址

我的 gitee.com 地址如下，這個是會持續更新的，主要是工作中自己寫的一些組件，還有同事寫的一些組件，整理成自己的一個組件庫吧，不會發布到 npm 主要是組件庫可能沒有普遍性需求，怕誤人子弟，所以只是當作學習吧，當然你可以拿去改成自己需要的樣子，就這樣

https://gitee.com/kennana/KUI

瀏覽目錄

在 src 下有個 components 目錄，主要用來放置前端組件的主要目錄

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

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

docs 是組件一些說明文檔

router 路由配置文件

配置 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";          `        }      },    },    }

配置 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"    }  }

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')

components 組件介紹

button 按鈕組件

chatCheckbox 多選框組件

chatContent 聊天資訊組件

chatTimeLine 時間軸組件

chatXSwitch 依賴於 vux-ui 的切換組件

headTitle 頭部組件

messageNotify 消息打擾提示組件

toast 彈出層提示組件