专栏首页志学Pythonkui 组件化库思路(来啦,老弟,持续更新哦,部署gitpages,添加issue)

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

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/issues

04

项目起源

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

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

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

05

vue 组件化库创建

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

06

你是喜欢喜宝还是坏报

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

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

但是有一个注意点就是 在 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 默认色系

本文分享自微信公众号 - 志学Python(gh_755651538c61),作者:志学Python

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-11-16

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个可以套路别人的python小程序~

    程序是使用pycharm工具,python语言所写。程序包括客户端 client.py 和服务器端 server.py 两部分,利用了python中的socke...

    公众号---志学Python
  • 图解算法系列(五): 堆栈

    下压栈(或简称栈)是一种基于后进后出的(LIFO)策咯的集合类型. 其中添加移除新项总发生在同一端。这一端通常称为“顶部”。与顶部对应的端称为“底部”。栈的例子...

    公众号---志学Python
  • 图解算法系列(三):数组

    "数组"结构其实就是一排紧密相邻的可数内存,并提供了一个能够直接访问单一的数据内容的计算方法.我们其实可以想象一下自家的信箱,每一个信箱都有住址,其中路名就是名...

    公众号---志学Python
  • JS框架设计之命名空间设计一种子模块

    命名空间 1、种子模块作为一个框架的最开始,除了负责初始化框架的最基础部分。 2、种子模块作为框架的最开始,那么什么是种子框架的最开始呢?答案是IIFE(立即调...

    郑小超.
  • Oracle 18c体验

    首先Cloud能够登录,通过本地的客户端也是支持的,需要说明的是sql developer需要是18c的版本,12c的版本都不可以。

    jeanron100
  • Luminous下删除和新建OSD的正确姿势

    L版本开始极大的降低了对运维操作复杂度,新增了很多命令去确保数据安全,很多新手在删除OSD的时候很容易忽视了集群PGs的状态最终导致数据丢失,因此官方加入以下几...

    用户1260683
  • centos7安装rabbitmq

    RabbitMQ在全球范围内在小型初创公司和大型企业中进行了超过35,000次RabbitMQ生产部署,是最受欢迎的开源消息代理。

    超蛋lhy
  • 别踩白块html游戏源码

    Youngxj
  • 以太坊智能合约开发入门

    中国广东省深圳市龙华新区民治街道溪山美地 518131 +86 13113668890 <netkiller@msn.com>

    netkiller old
  • Redis Set (4)

    Redis用intset或hashtable存储set。如果元素都是整数类型,就用inset存储。如果不是整数类型,就用hashtable(数组+链表的存来储结...

    兜兜毛毛

扫码关注云+社区

领取腾讯云代金券