初始化

docs/other/blog.md

@@ -0,0 +1,9 @@
+# 博客列表
+
+`unibest` 相关文章主要发布在 `掘金`，我的 [掘金 unibest 专栏](https://juejin.cn/column/7307183009604894735)。
+
+- [🔥2024 年最好用的 uniapp 开发模板，近一个月 star 数飙升！🔥](https://juejin.cn/post/7329034439408615451)
+- [【unibest】uniapp + vue3 超实用模板](https://juejin.cn/post/7315246744158191666)
+- [【unibest】uniapp + vue3 超实用模板（续）](https://juejin.cn/post/7315461542697500682)
+- [【unibest】uniapp + vue3 超实用模板（终）](https://juejin.cn/post/7321930742400188453)
+- [【unibest】uniapp + vue3 超实用模板（番外篇）](https://juejin.cn/editor/drafts/7315308701051519030)

docs/other/files/files.md

@@ -0,0 +1,14 @@
+# 文件资源展示优化
+
+> 本功能由 `⑤群` 群友 `Collapsar` 提供，感谢 `Collapsar` 的贡献。
+
+**未配置前的默认效果：**
+![alt text](image-1.png)
+
+**配置后效果：**
+![alt text](image-2.png)
+
+**相关代码：**
+![alt text](image-3.png)
+
+> 如果觉得不需要这种查看方式，可以删除 or 注释掉 `.vscode/setting.json` 里面 `explorer.fileNesting.patterns` 配置。

docs/other/iconfont/iconfont.md

@@ -0,0 +1,108 @@
+## iconfont 图标库
+
+`iconfont` 同样有海量免费的图标，同时支持上传自己的图标。公司项目通常会有自己的图标，由专业的 `UI设计师` 设计，这时通常会使用 `iconfont` 方式使用图标。
+
+- 1. 打开`阿里巴巴矢量图标库 iconfont`，地址：https://www.iconfont.cn/，并登录。
+- 2. 寻找需要的图标，加入项目，也可以上传自己的图标。
+
+![alt text](./assets/5-9.png)
+
+![alt text](./assets/5-10.png)
+
+![alt text](./assets/5-11.png)
+
+> 初次接触 `iconfont` 的同学，可能会找不到自己的项目，如下图：资源管理 -- 我的项目
+
+![alt text](./assets/5-12.png)
+
+- 3.图标方式选择，如下图有 `Unicode` `Font class` `Symbol` 三种方式，分别预览和使用如下：
+
+![alt text](./assets/5-13.png)
+
+![alt text](./assets/5-14.png)
+
+![alt text](./assets/5-15.png)
+
+- `Unicode` 的方式太落后，语义化不明显，不推荐；
+- `Symbol` 的方式太先进（背后原理是生成了 `SVG` 雪碧图），先进到 `小程序` 和 `APP` 都不支持，只能无奈放弃。
+
+> `Symbol` 的方式生成 `svg` 雪碧图，如下所示：
+>
+> ![alt text](./assets/5-16.png)
+
+- `Font class` 则是我们最合适的选择，有 `Symbol` 一样的语义化（都是`icon-xxx`方式），引入和使用也方便（ `Symbol` 是一个 `js` 文件，`Font class` 是一个 `css` 文件）。
+
+- 3. 点击选中 `Font class` 后再点击 `查看在线连接` 按钮，可以拿到一个 `css` 的链接，如 [//at.alicdn.com/t/c/font_4032028_mbcuy517h6.css](//at.alicdn.com/t/c/font_4032028_mbcuy517h6.css) ，如果期间新加入了图标，记得点击更新链接，会重新生成一个链接，只有最后面一串 hash 有改变，并且旧的链接依然可以访问。
+
+![alt text](./assets/5-17.png)
+
+我们使用的是 `Font class` 的方式，只需要这一个 `css` 链接就行，无需 `下载至本地`，想要本地预览的话才需要 `下载至本地`。
+
+> `iconfont` 有默认的前缀 `icon-`，可以设置为其他的，如我的一个项目设置为 `bap-icon-`，以防跟其他的冲突。
+
+![alt text](./assets/5-18.png)
+
+> 注意 `uniapp` 项目拿到 `css` 链接放到 `index.html` 是不对的，这样做只在 `h5` 中生效，`小程序` 和 `APP` 都不生效，正确的做法是放到代码里面显示引入。下面会讲：
+
+- 4.在 `style/index.scss` 中写上上面的 `css` 链接里面的内容（`style/index.scss` 已经在 `main.ts` 引入了，`unibest` 模板已经内置），如下
+
+> 注意： `url(//at.alicdn.com)` 里面的路径要改为 `url(https://at.alicdn.com)`，因为 APP 里面 `//` 是文件协议。 —— 设定 `https` 协议
+
+```css
+@font-face {
+  font-family: iconfont; /* Project id 4032028 */
+  src:
+    url('//at.alicdn.com/t/c/font_4032028_mbcuy517h6.woff2?t=1713685013355') format('woff2'),
+    url('//at.alicdn.com/t/c/font_4032028_mbcuy517h6.woff?t=1713685013355') format('woff'),
+    url('//at.alicdn.com/t/c/font_4032028_mbcuy517h6.ttf?t=1713685013355') format('truetype');
+}
+
+.iconfont {
+  font-family: iconfont !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-facebook::before {
+  content: '\e87d';
+}
+
+.icon-twitter::before {
+  content: '\e646';
+}
+
+.icon-telegram::before {
+  content: '\f245';
+}
+```
+
+- 5. 编写代码，`<i class="iconfont icon-facebook"></i>`
+
+![alt text](./assets/5-23.png)
+
+- 6. 预览，`h5 `端正常，APP 端不正常，小程序端看着正常，控制台也会报错，如下图：
+
+![alt text](./assets/5-22.png)
+
+- 7. 这个怎么处理呢？转成 `base64` 是最快捷的，`iconfont` 本身就支持， `3`步搞定：
+
+  - 7.1 如下图，勾选 `Base64`
+
+    ![alt text](./assets/5-21.png)
+
+  - 7.2 生成新链接，并得到新的 `css` 代码
+
+  ![alt text](./assets/5-20.png)
+
+  - 7.3 引入新代码，刷新界面，小程序不报错了，APP 也正常了！
+
+  ![alt text](./assets/5-19.png)
+
+<!-- ### 批量去色
+
+经我检测，不需要去色也支持动态改变颜色。可能去色是针对多色图标吧。
+![alt text](./assets/5-100.png)
+
+批量去色后要重新生成链接。 -->

docs/other/image/image.md

@@ -0,0 +1,42 @@
+# 图片占位图
+
+- 色块占位图
+- 真实随机图片
+
+## 色块占位图
+
+下面是一个 `400x200 - 宽高，3c9cff - 背景颜色，fff - 文本颜色` 的色块占位图。
+
+![alt text](./assets/image-1.png)
+
+可以通过下面几种方式生成，效果一样：
+
+| 官网地址                                            | 占位图片示例                                                                                             |
+| :-------------------------------------------------- | :------------------------------------------------------------------------------------------------------- |
+| [https://placeholder.com](https://placeholder.com/) | [https://via.placeholder.com/400x200.png/3c9cff/fff](https://via.placeholder.com/400x200.png/3c9cff/fff) |
+| [https://dummyimage.com](https://dummyimage.com/)   | [https://dummyimage.com/400x200/3c9cff/fff](https://dummyimage.com/400x200/3c9cff/fff)                   |
+| [https://fakeimg.pl](https://fakeimg.pl/)           | [https://fakeimg.pl/400x200/3c9cff/fff](https://fakeimg.pl/400x200/3c9cff/fff)                           |
+
+代码编写举例：
+
+```vue
+<image src="https://via.placeholder.com/400x200.png/3c9cff/fff"></image>
+```
+
+## 真实随机图片
+
+如果想生成某个宽高的随机图片，可以使用 [https://picsum.photos](https://picsum.photos)。
+
+格式如：`https://picsum.photos/<width>/<height>?random=1`
+
+举例：[https://picsum.photos/400/200?random=1](https://picsum.photos/400/200?random=1)
+
+生成效果如下：
+
+![alt text](./assets/image-2.png)
+
+代码编写举例：
+
+```vue
+<image src="https://picsum.photos/400/200?random=1"></image>
+```

docs/other/links/links.md

@@ -0,0 +1,64 @@
+# 相关链接
+
+## Unibest Demo 分支演示地址
+
+- [演示地址](https://feige996.github.io/hello-unibest/#/)
+- [仓库地址-github](https://github.com/feige996/hello-unibest)
+- [仓库地址-gitee](https://gitee.com/feige996/hello-unibest)
+
+## UI 组件库
+
+- [wot-ui](https://wot-design-uni.cn) -- `五星推荐⭐⭐⭐⭐⭐，unibest默认内置`
+  > [wot-ui 备用地址](https://wot-design-uni.netlify.app)
+- [uni-ui](https://uniapp.dcloud.net.cn/component/uniui/uni-ui.html)
+- [uv-ui](https://www.uvui.cn/)
+- [uview-plus](https://uiadmin.net/uview-plus/)
+- [TuniaoUI](https://vue3.tuniaokj.com/zh-CN/)
+- [Sard uniapp](https://sard.wzt.zone/sard-uniapp-docs/)
+- [FirstUI](https://doc.firstui.cn/)(部分组件收费)
+- [ThorUI](https://thorui.cn/doc/)(部分组件收费)
+
+## 原子类 CSS
+
+- [UnoCSS](https://unocss.dev/) -- `五星推荐⭐⭐⭐⭐⭐`
+- [tailwindcss](https://tailwindcss.com/)
+
+## icons
+
+- [icones](https://icones.js.org/) -- `五星推荐⭐⭐⭐⭐⭐` used in `UnoCSS Icons`
+- [iconfont](https://www.iconfont.cn/)
+- [IconPark](https://iconpark.oceanengine.com)
+
+## 优质组件
+
+- [z-paging](https://z-paging.zxlee.cn/) -- `五星推荐⭐⭐⭐⭐⭐`
+
+  > 一个 `uni-app` 分页组件。
+  >
+  > 全平台兼容，支持自定义下拉刷新、上拉加载更多，支持虚拟列表，支持自动管理空数据图、点击返回顶部，支持聊天分页、本地分页，支持展示最后更新时间，支持国际化等等。
+
+- [mescroll](https://www.mescroll.com/)
+
+  > 精致的下拉刷新和上拉加载 js 框架，一套代码多端运行，支持 `uni-app`。
+
+## uni-app
+
+- [uni-app 官网](https://uniapp.dcloud.net.cn/)
+- [uni-app x 官网](https://doc.dcloud.net.cn/uni-app-x/)
+
+## 图表库
+
+- [ucharts](https://www.ucharts.cn/v2/#/)
+- [lime-echart](https://gitee.com/liangei/lime-echart)
+
+> 其他可以在 `uni-app` 插件市场找：[uniapp chart](https://ext.dcloud.net.cn/search?q=chart)
+
+## vue 相关
+
+- [Vue](https://cn.vuejs.org/)
+- [Vite](https://cn.vitejs.dev/)
+- [Pinia](https://pinia.vuejs.org/zh/)
+
+## 请求库
+
+- [Alova.js](https://alova.js.org/zh-CN)