kui component library idea (come on, brother, keep updating, deploy gitpages, add issue)

Click the blue words above to follow us

Welcome to my public address, Python.

Some ideas

Today, I will not update the flash tutorial for the time being. Today, I write an article to introduce the idea of doing a day's kui component chemistry library. In fact, there is a vague feeling that I want to have my own component chemistry library, which will not be published to npm. It is mainly to record my learning components and the components written in my work, and organize them into my own A ui component library.

gitpages page

I've deployed this project, this component chemistry learning library, to gitee.com's gitpages page of codecloud. If interested partners can give a star, don't be stingy with your fingers, click like to light up and learn together, as shown in the figure below https://kennana.gitee.io/kui/

issue address

If you have any questions, you can submit the issue at any time, and I will take the time to answer the issue of small partners. Of course, if you have any ideas, you can also put them forward. You can write them into components, so that our component learning library can be more powerful. The issue address is here. Welcome to visit https://gitee.com/kennana/KUI...

Project Origin

The reason why I suddenly started to create a component library of my own is that when I came to the company to study today, I saw an article that touched me. When I had an idea, I had to take action. Otherwise, I would never take action again. When I had an idea, I had to do it. Only by doing it can I judge whether I am OK or not. You can see the following article, which is a little old, but To learn a lot

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

To be honest, if you want to work hard, you need to have a solid basic knowledge of vue, and no matter how the framework changes and how it progresses, the core javascript, HTML and CSS are always the core. As long as the core is solid, no matter how it changes, the core should change

vue component library creation

Keep your learning ability. In the future, you will find that you will surpass 80% of the people. First of all, you need to have a directory. My English name is Ken, and I call him "K". Because I like this character in hip-hop dance, I just call him "K". So the name of ui library is KUI

Do you like Xibao or bad news

It's worth noting that vue-cli4 is coming out, which seems to be no different from vue-cli3. This is a Xibao. It's worth our attention. The front end has been moving forward. We need to maintain our learning ability. The stronger the learning ability is, the more advantageous it will be in the future

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

But one thing to note is that when vue create a project, the project name must be lowercase, otherwise an error will be reported

Code cloud gitee address

My gitee.com address is as follows, which will be updated continuously. It is mainly composed of some components written by myself and colleagues at work. It will not be published to npm. The main reason is that the component library may not have universal needs, so it is just for learning. Of course, you can change it to what you need, That's it.

https://gitee.com/kennana/KUI

Browse directory

There is a components directory under src, which is mainly used to place the main directory of front-end components

Public mainly places some public files, such as img, html and css

Node modules are places where npm depends on packages

docs are some instructions for components

router routing profile

Configure 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
   * All web pack dev Server Options support
   * Some values like host, port, and https may be overridden by command-line arguments
   * Some public path and historical API fallback should not be modified, because they need to be synchronized with the baseUrl of the development server to ensure normal operation
   */
  devServer: {
    port: 8080, //Project port
    disableHostCheck: true, //Turn off host detection (this is configured to be accessible through domain name)
    compress: true, // Code compression
  },

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

  chainWebpack: config => {
    //path alias
    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";
        `
      }
    },
  },

}

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

//Custom components
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'
/**
 * There are some bug s on the official website
 * Global registration in the project entry file is not successful according to the official document prompts
 * import Vue from 'vue'
 * import { Actionsheet } from 'vux'
 * Vue.component('actionsheet', Actionsheet)
 *
 * Change import {actionsheet} from 'vux' to
 * import Actionsheet from 'vux/src/components/actionsheet' that will do
 *
 * But local registration works
 * import { Actionsheet } from 'vux'
 * export default {
 *  components: {
 *    Actionsheet
 *  }
 * }
 *
 * actionsheet Some problems in usage
 * <group>
 *  <x-switch title="demo" v-model="show1"></x-switch>
 * </group>
 *
 * <load-more :show-loading="true" tip='Loading... ') < / load more >
 * */ 
Vue.component('x-switch', XSwitch)
// Secondary packaging components
Vue.component('fy-chat-x-switch', fyChatXSwitch)
Vue.component('fy-chat-checkbox', fyChatCheckbox)

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

Introduction to components

button as

chatCheckbox multiple box component

Chat content

chatTimeLine timeline components

chatXSwitch depends on the switching component of vux UI

headTitle head component

messageNotify message disturb prompt component

toast pop-up layer prompt component