{"id":13536411,"url":"https://github.com/xiaobinwu/Wuji","last_synced_at":"2025-04-02T03:30:48.443Z","repository":{"id":42203606,"uuid":"79462068","full_name":"xiaobinwu/Wuji","owner":"xiaobinwu","description":"使用vue+vuex+vue-router技术栈开发的吾记网页版（纯前端），有时间会持续更新，欢迎star","archived":false,"fork":false,"pushed_at":"2022-02-12T06:00:38.000Z","size":22951,"stargazers_count":318,"open_issues_count":2,"forks_count":69,"subscribers_count":25,"default_branch":"master","last_synced_at":"2024-11-03T01:33:12.342Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaobinwu.png","metadata":{"files":{"readme":"README.MD","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-19T14:37:36.000Z","updated_at":"2024-06-17T01:59:28.000Z","dependencies_parsed_at":"2022-09-17T16:00:54.647Z","dependency_job_id":null,"html_url":"https://github.com/xiaobinwu/Wuji","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaobinwu%2FWuji","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaobinwu%2FWuji/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaobinwu%2FWuji/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaobinwu%2FWuji/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaobinwu","download_url":"https://codeload.github.com/xiaobinwu/Wuji/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246750854,"owners_count":20827792,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-08-01T09:00:38.792Z","updated_at":"2025-04-02T03:30:45.686Z","avatar_url":"https://github.com/xiaobinwu.png","language":"CSS","readme":"\u003e * 文章地址： http://wushaobin.top/2017/04/21/Wuji/\r\n#### 登录注册模块\r\n![cmd-markdown-logo](imgs/1.gif)\r\n#### 日记列表\r\n![cmd-markdown-logo](imgs/2.gif)\r\n#### 日记创建与编辑\r\n![cmd-markdown-logo](imgs/3.gif)\r\n#### 日记详情\r\n![cmd-markdown-logo](imgs/4.gif)\r\n#### 我的分类\r\n![cmd-markdown-logo](imgs/5.gif)\r\n#### 过客列表\r\n![cmd-markdown-logo](imgs/6.gif)\r\n\r\n\r\n## 吾记前端构建流程\r\n\r\n#### 本地环境准备\r\n\r\n* 安装node： * https://nodejs.org/en/download/ （\"node\": \"\u003e=6.0\"，对应需要升级node-sass，不然使用不了！）\r\n* 配置webpack： npm install -g webpack(sudo权限)\r\n* windows配置cnpm：\r\n\r\n```\r\n    npm install -g cnpm --registry=https://registry.npm.taobao.org\r\n    因为npm的默认仓库在国外，下载很慢，国内淘宝搞了个CNPM，每10分钟同步一次，完全够用了\r\n```\r\n\r\n### 依赖包安装\r\n* 进入wuji目录\r\n* 执行cnpm install\r\n\r\n### 构建\r\n* 开发环境：执行 node server.js（或 npm run serve）\r\n* 热加载 node server.js hot-reload（或 npm run hot）\r\n* mock数据 npm run mock\r\n* 生产环境：执行 npm run build\r\n\r\n## 关于source Mapping（仅支持chrome 浏览器）\r\n* source Mapping就是一个代码映射跟踪，方便本地开发时debug压缩文件\r\n* 确保chrome已打开[source Mapping](https://developer.chrome.com/devtools/docs/settings#enable-js source maps) (默认是打开的)\r\n* 打开Develop Tools -》 Sources 即可看到源文件\r\n\r\n## hot reload（支持构建的实时刷新）\r\n* 环境准备：\r\n* cnpm install express webpack-dev-middleware webpack-hot-middleware\r\n* 执行node server.js hot-reload（或 npm run hot）\r\n* 静态资源访问eg：http://localhost:8088/Static/dist/js/jobDetail.js\r\n\r\n## 自定义主题\r\n* 进入wuji目录\r\n* cnpm install element-theme element-theme-default --save-dev （依赖包安装时已安装）\r\n* 执行node_modules/.bin/et -i\r\n* 生成element-variables.css\r\n* 执行node_modules/.bin/et\r\n* 则会创建./theme\r\n* 更改主题时，对应.babelrc的修改会如下：\r\n```javascript\r\n\t{\r\n\t  \"plugins\": [[\"component\", [\r\n\t    {\r\n\t      \"libraryName\": \"element-ui\",\r\n\t      \"styleLibraryName\": \"~theme\"\r\n\t    }\r\n\t  ]]]\r\n\t}\r\n```\r\n\r\n## autoprefixer（样式前缀兼容性处理），在vue-loader option进行配置\r\n* 生成规则：\r\n* 自动加上浏览器样式前缀，兼容各浏览器（针对份额大于全球统计数据的1%，firefox 15）\r\n\r\n## 静态资源gulp处理（/public）\r\n```javascript\r\nvar gulp = require('gulp'),\r\n    uglify = require('gulp-uglify'), //压缩js\r\n    rename = require(\"gulp-rename\"), //文件重命名\r\n    changed = require('gulp-changed'), //监听文件是否修改\r\n    imagemin = require('gulp-imagemin'), // 图片压缩\r\n    pngquant = require('imagemin-pngquant'), // 深度压缩\r\n    runSequence = require('run-sequence'),     // 同步运行任务插件\r\n    del = require('del'), //删除文件\r\n    spritesmith = require('gulp.spritesmith'), //合成雪碧图\r\n    find = require(\"gulp-find-glob\"); //得到glob对象\r\n```\r\n* 进入wuji/assets/public目录\r\n* cnpm install\r\n* 执行 gulp（压缩js、图片）\r\n* 执行 gulp sprite（生成雪碧图）[将需要合成雪碧的图片放入images/sprite/中某个新建的文件夹，运行，则可以在该文件夹下看到对应sprite.png、sprite.scss]\r\n\r\n## 前端页面\r\n\u003e index.html  =\u003e  我的日记列表\r\n\u003e passing.html  =\u003e  过客列表\r\n\u003e account.html =\u003e 登录注册页面\r\n","funding_links":[],"categories":["Demo示例"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaobinwu%2FWuji","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaobinwu%2FWuji","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaobinwu%2FWuji/lists"}