vueShop

vueShop copied to clipboard

前言

为了展示作品

作品

• [x] 酒瓶定制(pc/移动兼容)
• [x] 聊天室
• [x] 个人博客
• [x] github 数据生成报告
• [x] UI组件
• [x] 粒子时钟(pc端观看)
• [x] 贪吃蛇小游戏(pc端观看)
• [x] 2048
• [x] 围住神经猫

如何缓存用户密码账号 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
└─static

TODO

• [x] 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();      // 用于垂直水平居中
  

• [x] 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');
  
  

使用技术栈

• [x] vue 框架
• [x] vuex 状态管理
• [x] vue-router 路由管理
• [x] mint-ui 移动端-vue-ui框架

• [x] scss css样式管理，不懂请看文档
• [x] postcss css兼容性及模块化
• [x] 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文件