Repository files navigation

给你点颜色瞧瞧！一个基于 Vue2 和 Python3 写的展示各种颜色的单页面静态网页，（目前）主要由三部分构成：

• 中国传统色

梅子金黄杏子肥，麦花雪白菜花稀。
——范成大 ·《四时田园杂兴·其二》

• nippon colors

日本传统色

• 不问色号

送给女性和追女孩子的男性的福利，一个展示各种口红色号及实际使用效果与感受（仅PC）的网页。

• Traditional-Chinese-Colors | 中国传统色
• 源码：imoyao/Traditional-Chinese-Colors

本项目主要用于 Python 代码的练习，同时对 Vue2 更加深入地了解。实现一个伪前后端分离的小项目。前端参考了nippon-color:PWA build with vue-cli 3，后端使用 Python 对各种采集的数据进行了风格统一。

Background image from pixiv

1. 使用 Python 解析所有获取到的数据
2. 色系和亮度全部自动识别（待改进）

python --versionPython 3.7.3

G:\Traditional-Chinese-Colors>vue --version2.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 pipenvpipenv shellpipenv installcd backendpython main.pycd ..

~~执行 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 文字间距太大
• 添加口红页面；
  • Yves Saint Laurent 伊夫聖羅蘭 YSL - 迷魅純漾唇膏#13 Le Orange - 唇色 | 全球免運 | 草莓網 HK
  • Dior 迪奥 烈艳蓝金唇膏/口红 3.5g 多色可选【价格 、图片、评价】- 西集网
• 添加搜索功能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）扫描下方二维码与我一起做公益吧！
当然还可以去我的博客找赞赏码给我打钱。（慢慢找去吧）😊

1. 必须执行 npm install 安装依赖包；
2. 如果 run 或者 build 出错，请检查 vue 版本或者是否正常安装；否则，删除 node_modules 重装 node 环境；
3. × 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 博客

还没有呢~