<?xml version="1.0" encoding="utf-8" ?><rss version="2.0"><channel><title><![CDATA[qq_43672268的博客]]></title><description><![CDATA[]]></description><link>https://blog.youkuaiyun.com/qq_43672268</link><language>zh-cn</language><generator>https://blog.youkuaiyun.com/</generator><copyright><![CDATA[Copyright &copy; qq_43672268]]></copyright><item><title><![CDATA[开源 Vue 3 组件库 Morya UI：把组件、文档、AI 工具链一起做进一个包]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/167489568</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/167489568</guid><author>qq_43672268</author><pubDate>Sat, 10 Oct 2026 14:53:03 +0800</pubDate><description><![CDATA[Morya UI 是一套开源 Vue 3 组件库，v0.4.3 版本提供 107 个组件，覆盖中后台、SaaS、展示型站点等场景。其核心优势在于：设计令牌驱动的主题系统（--m-*）、可交互文档站、TypeScript 完整类型支持，以及 AI 原生工具链——通过 MCP 协议实现真实 API 查阅与页面校验，杜绝 AI “臆造 props”。配合 @morya-ui/setup 可一键集成组件、样式与 Agent Skill，提升开发效率。演示项目 morya-admin 展示了完整中后台能力，支持暗色模]]></description><category></category></item><item><title><![CDATA[Morya UI：别手搓了，搓也搓不过 Agent]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/165588343</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/165588343</guid><author>qq_43672268</author><pubDate>Wed, 16 Sep 2026 10:12:25 +0800</pubDate><description><![CDATA[本文分享了作者在使用AI生成后台页面时的痛点与解决方案：初期因缺乏统一设计规范，AI生成代码质量差、需大量重写。通过引入Morya UI组件库及配套工具（npx @morya-ui/setup），配置Design.md、Agent Skill、MCP等，让AI严格遵循设计契约生成代码，显著提升效率与一致性。关键在于“给AI图纸”——明确使用库、对齐样例、禁用自创样式，实现高效协作。最终，重复性工作由AI承担，开发者专注业务逻辑，真正实现“不搓就别搓”。]]></description><category></category></item><item><title><![CDATA[当Vue遇上Hooks，太润了]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/131429062</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/131429062</guid><author>qq_43672268</author><pubDate>Wed, 28 Jun 2023 08:38:00 +0800</pubDate><description><![CDATA[Vue中的Hooks也算是三年前的东西了，想当时在React中写Hooks函数算是比较流行的写法。Vue中一直是options配置化写法，所有的钩子和数据都在一个对象中给你提供了，你只需要将你的数据和处理逻辑放到对应的框里面去。这也是Vue一直以来流行的原因之一了。简单。现在Vue也支持Hooks写法了，而且在工作中也用的比较多。]]></description><category></category></item><item><title><![CDATA[Vue定义指令使用指南]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/131372265</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/131372265</guid><author>qq_43672268</author><pubDate>Sun, 25 Jun 2023 10:27:44 +0800</pubDate><description><![CDATA[最近工作开发中频繁用到`Vue`的自定义指令，所以有时间总结记录一下`Vue`自定义指令的用法及能用到的场景。最后分享一下常用到的指令库。]]></description><category></category></item><item><title><![CDATA[构建Vue前端组件库]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/119058157</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/119058157</guid><author>qq_43672268</author><pubDate>Sat, 24 Jul 2021 14:39:08 +0800</pubDate><description><![CDATA[在前端开发中可能会遇到将相同的功能模板集合成一个组件，供他人调用，这样可以减少重复造轮子，也可以节约人力、财力，更能够提高代码的可维护度；下面将通过详细的步骤教你如何构建一个Vue前端组件。

1、在本机上安装好NodeJs，并配置好环境变量

（1）NodeJs的下载地址：点击进入下载页面



我这里是下载64位Windows安装包(.msi)，大家可以根据自己电脑系统选择相应的版本即可。



（2）下载NodeJs后双击它，采用默认设置，一直点击下一步，直到Finish为止。需要说明的是，在安装..]]></description><category></category></item><item><title><![CDATA[2021-07-16]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/118789494</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/118789494</guid><author>qq_43672268</author><pubDate>Fri, 16 Jul 2021 12:06:10 +0800</pubDate><description><![CDATA[需求

小项目中组件之间传值涉及几个方面：

父组件向子组件传值
	子组件向父组件传值
	子组件和子组件之间传值


技术栈

vue.js



解决方法

父组件向子组件传值

官网教程：传送门

第一步：父组件中，在标签上绑定要传入的值

parent.vue

// 绑定要传递的数据：name
&lt;chilld-component :myName="name"&gt;&lt;/chilld-component&gt;

第二步：子组件中使用props接受传递数据

child.vue

// 在]]></description><category></category></item><item><title><![CDATA[按钮样式切换]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/118789453</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/118789453</guid><author>qq_43672268</author><pubDate>Fri, 16 Jul 2021 12:03:08 +0800</pubDate><description><![CDATA[需求

描述：几个切换按钮，不同的选择，选择之后有不同的样式看，请求不同的数据。如下图所示：





技术框架

requireJs+vue



解决方案

使用vue的样式绑定（传送门），涉及到一排不同的按钮，是用v-for渲染的，所以考虑点击每个数据获取相应的index或者唯一标识。在数据项上使用三元表达式来进行判断：当获取的唯一标识或者index与当前v-for循环渲染出来的标识或index相等时，就进行样式绑定，反之则不绑定样式。
	另一种方法：使用class绑定来完成需求，大致上与style绑]]></description><category></category></item><item><title><![CDATA[宝塔面板部署代码时数据库的问题]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/109732938</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/109732938</guid><author>qq_43672268</author><pubDate>Mon, 16 Nov 2020 23:54:22 +0800</pubDate><description><![CDATA[宝塔面板中新建数据库无法设置用户名为root的问题
问题描述：在做自己的项目时，在自己的云服务器上安装了宝塔面板，新建数据库时无法设置用户名为root，以为要把连接数据库的用户名也改了。。。
原因和解决方法：因为宝塔中已经默认有一个用户名为root的用户名，所以不能再新建一个同名的用户了。在后端写的连接数据库的配置上不用更改用户名为其他的，直接为root就可以访问到数据库了。。。


...]]></description><category></category></item><item><title><![CDATA[SQL学习笔记]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/109712055</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/109712055</guid><author>qq_43672268</author><pubDate>Sun, 15 Nov 2020 23:29:16 +0800</pubDate><description><![CDATA[关系数据库概述


用来管理数据。不用关心怎样存储数据，使用数据库软件提供的接口来读写数据


数据模型：

层次模型：以上下级的层次关系来组织数据，像一棵树
网状模型：网状结构
关系模型：一张表，其中的每个数据都可以通过行号+列号来唯一确认（占绝对市场份额）



数据类型：




名称
类型
说明




INT
整型
4字节整数类型；范围大约正负21亿


BIGINT
长整型
8字节整数类型；范围大约正负922亿亿


REAL,FLOAT(24)
浮点型
4字节浮点数；范围大约正负10的38次
]]></description><category></category></item><item><title><![CDATA[keeep-alive原理剖析以及业务使用]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/109367136</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/109367136</guid><author>qq_43672268</author><pubDate>Thu, 29 Oct 2020 19:26:33 +0800</pubDate><description><![CDATA[前言
keep-alive组件的使用和原理剖析其实网上挺多的，自己也是多方观察总结了一下
0 keep-alive 原理
vue源码的地址为：keep-alive
原理解析
有兴趣的小伙子可以大胆的开始读起来了，GOGOGO！
关于keep-alive的源码解析，这位字节大佬https://juejin.im/post/6844904048533979149写的挺好的，自问写不出来这种水平的分析
1 keep-alive简介
在开发中，比较常见的场景： 用户在某个列表页面选择筛选条件过滤出一份数据列表，由列]]></description><category></category></item><item><title><![CDATA[vuecli4 vant rem 移动端框架方案（全+转载）]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/106147514</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/106147514</guid><author>qq_43672268</author><pubDate>Fri, 15 May 2020 18:23:01 +0800</pubDate><description><![CDATA[vuecli4 vant rem 移动端框架方案
描述
基于vue-cli4.0+ webpack 4 + vant ui + sass+ rem适配方案+axios封装，构建手机端模板脚手架
Node 版本要求
Vue CLI 需要 Node.js 8.9 或更高版本 (推荐 8.11.0+)。你可以使用 nvm 或 nvm-windows 在同一台电脑中管理多个 Node 版本。
本示例 Node.js 12.14.1
启动项目
git clone https://github.com/sunniejs]]></description><category></category></item><item><title><![CDATA[移动端web开发与适应之媒体查询]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/106147448</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/106147448</guid><author>qq_43672268</author><pubDate>Fri, 15 May 2020 18:18:56 +0800</pubDate><description><![CDATA[移动端web开发与适应之媒体查询
前言：关于移动端的web开发我相信随着时代的进步，会越来越重要，当然，现在也重要，所以呢，学习移动端的开发适配是非常非常重要的，鉴于此，我就想深入的把我所学的知识总结起来，防止遗忘，也希望能帮助更多的人。
1.什么叫媒体查询：
Media queries，简单的说，媒体查询就是可以根据你的设备（电脑，手机，打印机等等）或者设备的屏幕分辨率或者宽度来设定要显示的样式，当然，你首先要设定这些规则，比如在什么设备上显示什么颜色高度等等，这在你的响应式页面上是非常有用的。
2.媒体]]></description><category></category></item><item><title><![CDATA[单文本组件的创建和嵌套引用]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/106147428</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/106147428</guid><author>qq_43672268</author><pubDate>Fri, 15 May 2020 18:17:13 +0800</pubDate><description><![CDATA[单文本组件的创建和嵌套引用
前言：关于单文本组件，我对于基础概念一直不是很懂，终于，通过自己的了解，写出这篇文章，防止遗忘。
1.创建一个父组件：
// app.vue
&lt;template&gt;
  &lt;div id='app'&gt;
  &lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default {
}
&lt;/script&gt;

&lt;style lang='less' scoped&gt;
&lt;/style&gt]]></description><category></category></item><item><title><![CDATA[css选择器优先级详解]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/106147403</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/106147403</guid><author>qq_43672268</author><pubDate>Fri, 15 May 2020 18:16:31 +0800</pubDate><description><![CDATA[css选择器优先级详解
1.简单的记忆来说：css的选择器的优先级为：
内联 &gt; id &gt; 类 = 属性 = 伪类 &gt; 标签 = 伪元素

2.从浏览器的算法层面上来说，他们的计算规则如下：
优先级是由 A 、B、C、D 的值来决定的，其中它们的值计算规则如下：
1.如果存在内联样式，那么 A = 1, 否则 A = 0;
2.B 的值等于 ID选择器 出现的次数;
3.C 的值等于 类选择器 和 属性选择器 和 伪类 出现的总次数;
4.D 的值等于 标签选择器 和 伪元素 出现的总次数]]></description><category></category></item><item><title><![CDATA[HTML5的应用特性]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/105832344</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/105832344</guid><author>qq_43672268</author><pubDate>Wed, 29 Apr 2020 10:20:19 +0800</pubDate><description><![CDATA[很多同学只听过html5，可是不是很了解他的应用特性，本文来详细的解释下：
首先介绍下HTML5的含义：
H5是指第5代HTML（超文本标记语言），也指用H5语言制作的一切数字产品。
网上的网页，多数都是由HTML写成的。
“超文本”是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。
而“标记”指的是这些超文本必须由包含属性的开头与结尾标志来标记。
浏览器通过解码HTML，就可以把网页内容...]]></description><category></category></item><item><title><![CDATA[关于authentication 和 authorization的辨别]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/105221541</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/105221541</guid><author>qq_43672268</author><pubDate>Tue, 31 Mar 2020 14:20:49 +0800</pubDate><description><![CDATA[我们先了解一下，关于两个单词的解释：
authentication ：身份验证; 认证；鉴定;
authorization：批准; 授权; 批准书; 授权书;
用我自己的话来看，authentication 是关于身份验证，意味着确认用户的身份，而authorization意味着授予对系统的访问权限
认证，例如在登录一个平台时，会要求输入用户名，密码等，身份验证通常通过用户名和密码完成，有时与身份...]]></description><category></category></item><item><title><![CDATA[vue_shop项目历程]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/105170907</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/105170907</guid><author>qq_43672268</author><pubDate>Sun, 29 Mar 2020 19:02:20 +0800</pubDate><description><![CDATA[一、前端项目初始化

① 安装 Vue 脚手架
② 通过 Vue 脚手架创建项目（选择babel，router，eslint，手动配置）
③ 配置 Vue 路由
④ 配置 Element-UI 组件库 (搜索vue-cli-plugin-element,选择按需导入)
⑤ 配置 axios 库
⑥ 初始化 git 远程仓库
⑦ 将本地项目托管到 Github 或 码云 中

二、后台项目的环境安装...]]></description><category></category></item><item><title><![CDATA[关于vue中的$mount('#app')]]></title><link>https://blog.youkuaiyun.com/qq_43672268/article/details/105134001</link><guid>https://blog.youkuaiyun.com/qq_43672268/article/details/105134001</guid><author>qq_43672268</author><pubDate>Fri, 27 Mar 2020 10:36:11 +0800</pubDate><description><![CDATA[关于$mount(’#app’)
当我们用vue脚手架（vue-cli）创建vue项目时，会生成初始的基本文件，其中关于main.js中$mount(’#app’)做一点自己的理解。
首先他是这样的
/*

webpack打包入口文件

*/
//导入vue构造函数
import Vue from 'vue'
//导入根组件App.vue
import App from './App.vue'
/...]]></description><category></category></item></channel></rss>