给你点颜色瞧瞧! 一个基于 Vue2 和 Python3 写的展示各种颜色的单页面静态网页,(目前)主要由三部分构成:
- 中国传统色
梅子金黄杏子肥,麦花雪白菜花稀。
——范成大 ·《四时田园杂兴·其二》
- nippon colors
日本传统色
- 不问色号
送给女性和追女孩子的男性的福利,一个展示各种口红色号及实际使用效果与感受(仅PC)的网页。
本项目主要用于 Python 代码的练习,同时对 Vue2 更加深入地了解。实现一个伪前后端分离的小项目。前端参考了nippon-color:PWA build with vue-cli 3,后端使用 Python 对各种采集的数据进行了风格统一。
- 使用 Python 解析所有获取到的数据
- 色系和亮度全部自动识别(待改进)
python --version
Python 3.7.3
G:\Traditional-Chinese-Colors>vue --version
2.9.6
npm install
npm run serve
npm run build
如果提示找不到命令ERROR Error: The system cannot find the path specified.
,执行:
npm install -g @vue/cli-service
报错,如果出现文字乱码执行CHCP 65001
,然后截图发上来大家一起看看。
pip install pipenv
pipenv shell
pipenv install
cd backend
python main.py
cd ..
~~执行 run deploy.sh ~~
现在我们直接把其导出到 docs 目录,github 支持部署 docs 目录为项目文档。
参见Simpler GitHub Pages publishing - The GitHub Blog
npm run lint
- 颜色描述返回的字典中很多 desc 都为空,导致只能加载每日诗词
- 线上访问由于使用自定义字体导致访问很慢(使用 CDN 之后好多了)。 将 Vue 和 router 改为线上使用 CDN 之后 chunk-vendors 大幅度减小
- 接受数据修订(色系、亮色/暗色、pinyin、颜色描述)
- RGB 文字间距太大
- 添加口红页面;
- 添加搜索功能 vue 实现搜索功能_JavaScript_grylf 的博客-CSDN 博客
- 点击弹框页面(参照此处关于实现);
- 日本色界面 desc 用俳句代替; 日本有哪些隽永的俳句? - 知乎
- favorite 颜色本地记录
- 卡顿改进(有吗?😐)
- hover & active 视觉改进
- 添加关于页面(解析 readme 为 about),参考Creating a Simple Blog using Vue with Markdown - DEV Community 👩💻👨💻
- 爷孙传值 vue 中的 provide/inject 的学习 - 流年的樱花逝 - SegmentFault 思否 API — Vue.js
- 添加日本色页面;
- 数据返回时按照色系分组返回
- 使用 Python 解析各种数据并返回给 Vue;
- cmky 数据返回为列表,而代码中使用的是字符串;
- 添加 cmky 环;
- 添加颜色描述,没有的时候使用 API 显示古诗。(基于今日诗词)
- 使用自定义字体;参考此处
- 直接保存到目的(data)目录,不用手动复制数据;
- 前端加载太慢(CDN); 参考Github+jsDelivr 搭建自己的免费 cdn
你可以 fork 此仓库之后修改amend 文件 中的 data 字段,修改是以 id 为准,只提交修改新值,不修改值直接不写。之后提交 pr 即可。当然,也欢迎提交代码逻辑及实现中不合理的地方及 bug 修复。
{
"id": "1847572",
"name": "朱砂",
"tra_name": "硃砂",
"color_series": "red",
"pinyin": "zhū shā",
"font_color": "dark",
"is_bright": true,
"rgb": [
184,
75,
72
],
"hex": "#B84B48",
"cmyk": [
0,
59,
61,
28
],
"desc": "",
"figure": ""
}
如果你不会写代码,但是有 github 账号,可以 去 issue 提交反馈;如果你没有账号或者不会使用 Github,可以直接发邮件给我,邮箱地址:immoyao@gmail.com。
请使用微信(WeChat)扫描下方二维码与我一起做公益吧!
当然还可以去我的博客找赞赏码给我打钱。(慢慢找去吧)😊
- 必须执行 npm install 安装依赖包;
- 如果 run 或者 build 出错,请检查 vue 版本或者是否正常安装;否则,删除 node_modules 重装 node 环境;
× Error: pngquant failed to build, make sure that libpng-dev is installed
针对 win10,以管理员身份执行npm install -g windows-build-tools
参见:Error: pngquant failed to build, make sure that libpng-dev is installed_运维_logocool 的专栏-CSDN 博客
还没有呢~