前言
为了展示作品
作品
如何缓存用户密码账号 git config credential.helper store
项目目录
项目根目录
├─build // webpack配置文件存放目录
│ └─project_config
├─config // 项目私密信息存放目录
├─dist // 打包文件存放目录
│ ├─images // 图片
│ ├─mobile // 移动端目录
│ │ ├─css // css文件
│ │ └─js // js文件
│ └─pc // pc端目录
│ ├─css // css文件
│ └─js // js文件
├─public // 存放公共资源，例如上传图片缓存区
├─src // 源码存放目录
│ ├─assets // 静态文件
│ │ ├─images // 图片
│ ├─mobile // 移动端源码入口
│ │ ├─component // 公共组件
│ │ │ ├─sell
│ │ │ ├─set
│ │ │ └─usercenter
│ │ ├─pages // 各自项目特有组件
│ │ │ ├─page1
│ │ │ └─page2
│ │ ├─router // 路由存放目录
│ │ ├─store // vuex存放目录
│ │ └─index.js // 入口文件
│ └─pc // pc端源码入口
│ ├─component
│ ├─pages
│ └─router
└─staticTODO
-
issue：淘宝字体大小适配不对
-
// 建议改为 @mixin fz(@font-size){ font-size: @font-size; [data-dpr="1"] & { font-size: @font-size / 2; } [data-dpr="3"] & { font-size: @font-size * 1.5; } }
已改
-
@include dpr-fz(10px); // 用于引用自适应字体 @include flex-center(); // 用于垂直水平居中
-
issue：图片适配
-
// 建议改为 @mixin dpr-bk-img($url,$name,$type:".jpg"){ background-image: url($url+"2x/"+ $name+"@2x"+$type); [data-dpr="3"] &{ background-image: url($url+"3x/"+ $name+"@3x"+$type); }
已改
-
// 第三个参数png为默认，可不填，如果是jpg则要填写 // 参数1：路径 // 参数2：文件名 @include dpr-img('../../../assets/images/lufa/','一周恋味', 'png');
使用技术栈
- vue 框架
- vuex 状态管理
- vue-router 路由管理
- mint-ui 移动端-vue-ui框架
- scss css样式管理，不懂请看文档
- postcss css兼容性及模块化
- eslint 语法检查
- graphql 接口管理
- restful 接口管理
安装步骤
- source tree 上面将项目拷贝下来
- 安装nodejs 8.11
- 安装编辑器vscode,为后续开发流程统一(可选步骤)
- 安装yarn，替代npm(可选步骤)
- 翻墙，由于某些npm包(node-sass)被墙了，会一直无法安装，而安装淘宝镜像，则会导致后期无法顺利
npm publish(可选步骤) - vscode 内置git，参考配置
{ "window.zoomLevel": 1, "terminal.integrated.shell.windows": "C:\\Program Files\\Git\\bin\\bash.exe", // 你的git文件地址 "explorer.confirmDelete": false, "workbench.startupEditor": "newUntitledFile", "files.autoSave": "afterDelay", "editor.minimap.enabled": true, "editor.matchBrackets": true, "files.associations": { "*.jsp": "html", "*.wxml": "xml" }, "workbench.iconTheme": "material-icon-theme", "workbench.colorTheme": "Atom One Dark", "window.restoreWindows": "all", "material-icon-theme.showUpdateMessage": false, "explorer.confirmDragAndDrop": false, "eslint.autoFixOnSave": true, "files.eol": "\n", }
- vscode 安装 prettier和eslint 插件，然后
esline --init - 命令行步骤（安装项目 - 跑起项目）
yarn // 安装所有package yarn w // 运行webpack yarn nodemon // 跑起来项目，具体查看package.json文件