点击上方蓝字关注我们欢迎关注我公众号，知学Python01有些思路今天就不更新flask教程了，我今天写了一篇文章，介绍一下今天搞了一天的kui组件学习库的思路。其实我有一种隐隐约约的感觉，就是想要有自己的组件学习库，不会发布到npm上。把自己学习的组件，以及工作中写的组件记录下来，整理成自己的ui组件库。02gitpagespage这个项目，这个组件化的学习库，我已经部署到了码云的gitee.com的gitpages页面。有兴趣的小伙伴可以给个star，别吝啬你的手指，点个赞，点个赞。快起来学习吧，如下图所示https://kennana.gitee.io/kui/03issue地址有问题可以随时提交issue，我会抽空回答issue的小伙伴们，当然有什么想法可以提出来，可以写成一个组件，让我们利用这个组件学习库，让它变得更强大，issue地址在这里，欢迎访问https:///gitee.com/kennana/KUI...04项目的由来让我突然创建了一个属于自己的组件库的项目是因为今天来公司学习的时候看到一篇文章那触动了我。有想法就一定要行动，否则以后就不会再行动了。只有出来了，才能判断自己能不能做。您可以阅读以下文章。文章有点老，但是可以学到很多东西，铁杵磨成针需要扎实的vue基础知识，而无论框架如何变化和进步，核心的javascript、HTML、CSS永远是核心。只要核心扎实，不管怎么变，用核心的英万昌05vue组件库来创造和保持你的学习能力。以后你会发现你会超越80%的人。首先，你必须有一个目录。我的英文名字是Ken，我的名字是'K'。因为我比较喜欢这就是hip-hop里面的AK这个角色，所以就干脆叫这个名字了。所以ui库的名字是KUI06。你喜欢喜宝还是坏消息？值得注意的是vue-cli4出来了，貌似和vue-cli3没什么区别。这是一个喜宝，值得我们关注。我们需要保持我们的学习能力。学习能力越强，以后越有优势https://www.cnblogs.com/zhoul...但是有一点要注意，在vue中创建项目时，项目名一定要小写字母，否则会报错07cloudgitee地址我的gitee.com地址如下，这个会持续更新，主要是工作中自己写的一些组件，还有同事写的一些组件，整理成一个组件库我自己的，不会发布到npm。主要是组件库可能没有通用的要求，怕误导别人，所以仅供学习。当然你可以用它改成你需要的，就像这个https://gitee.com/kennana/KUI08浏览目录下src下有一个components目录，主要用来放置主目录前端组件。public主要是放置一些公共文件，比如img，html，cssnode_modules是放置一些npm依赖包的地方。docs是componentsrouter路由配置文件09配置vue.config.js的一些文档constpath=require('path')constvuxLoader=require('vux-loader')functionresolve(dir){returnpath.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,//禁用主机检测（配置这个只能通过域名访问)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-serviceserve--hot","build":"vue-cli-servicebuildd","lint":"vue-cli-servicelint"},"keywords":["kui","vue","ui"],"author":"KenUI","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"}}11mian.jsimportVuefrom'vue'importAppfrom'./App.vue'importrouterfrom'./router'importstorefrom'./store'Vue.config.productionTip=falseimportfyChatContentfrom'@cps/chatContent/'从'@cps/headTitle/'导入fyHeadTitle从'@cps/button/'导入{fyButton,fyNegativeButton}从'@cps/toast/index'导入toast从'@cps/chatTimeLine/'导入fyChatTimeLine从'@导入fyMessageNotifycps/messageNotify'Vue.use(toast)//自定义组件Vue.component('fy-chat-c??ontent',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'importfyChatXSwitchfrom'@cps/chatXSwitch'importfyChatCheckboxfrom'@cps/chatCheckbox'//importActionsheetfrom'vux/src/components/actionsheet'/***官网有一些bug*根据给官方文档提示在项目入口文件全局注册不成功*importVuefrom'vue'*import{Actionsheet}from'vux'*Vue.component('actionsheet',Actionsheet)**将import{Actionsheet}from'vux'改为*importActionsheetfrom'vux/src/components/actionsheet'**但部分注册works*import{Actionsheet}from'vux'*exportdefault{*components:{*Actionsheet*}*}**actionsheet使用存在一些问题*
