vueShop: A Vue repository from cnece

前言

为了展示作品

作品

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

  // 建议改为
  @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文件

cnece/vueShop

前言

作品

如何缓存用户密码账号 git config credential.helper store

项目目录

TODO

使用技术栈

安装步骤