给你点颜色瞧瞧！ 一个基于 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 installnpm run servenpm 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，可以直接发邮件给我，邮箱地址：[email protected]。
请使用微信（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 博客
还没有呢~