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

歡迎關注