# vue-shop

**Repository Path**: nbaok/vue-study

## Basic Information

- **Project Name**: vue-shop
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2019-10-29
- **Last Updated**: 2021-11-22

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# gshop---前后端分离SPA项目学习

- 前端： Vue技术栈 + Mint-UI + ES6 + Webpack
- 后端： express + mongoDb + mongoose
- 模块化、 组件化、 工程化

前后端分离项目，需要进入各端分别安装依赖

## 1. 开发资源准备

- 使用[阿里巴巴矢量库]( http://www.iconfont.cn/)
- 将想要的图标添加入库（购物车）
- 将购物车中的图标添加到项目中
- 生成项目图标的[Font Class地址](//at.alicdn.com/t/font_1484442_lm2gthi6959.css)

## 2. Css Reset、Fastclick与Stylus

### 2.1 修改客户端自适应

> 在项目html模板头部修改

  ```html
  <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
  ```

### 2.2 Fastclick

#### 解决方案一

> 在项目html模板头部引入

  ```js
  <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
  <script>
    if ('addEventListener' in document) {
      document.addEventListener('DOMContentLoaded', function() {
        FastClick.attach(document.body);
      }, false);
    }
    if(!window.Promise) {
      document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
    }
  </script>
  ```

#### 解决方案二

> 当用户一次点击屏幕之后，浏览器并不能立刻判断用户是要进行双击缩放，还是想要进行单击操作。因此，iOS Safari 就等待 300 毫秒，以判断用户是否再次点击了屏幕。 于是，300 毫秒延迟就这么诞生了。

- 安装fastclick库  解决点击响应延时 0.3s 问题

  ```bash
  npm install fastclick --save
  ```

- 在main.js中引入，并绑定到body

  ```js
  import FastClick from 'fastclick'
  FastClick.attach(document.body);
  ```

### 2.3 Stylus

- 安装stylus依赖包

  ```bash
  npm install stylus stylus-loader --save-dev
  ```

## 3. 配置代理

### 3.1 修改vue.config.js文件

```js
  ...
  devServer: {
    proxy: {
      "/api": { // 匹配所有以'/api'开头的请求路径
        target: "http://localhost:4000", // 目标代理接口地址
        // secure: false,
        changeOrigin: true, // 开启代理，在本地创建一个虚拟服务端
        // ws: true, // 是否启用websockets
        pathRewrite: { // 重写路径：去掉路径开头的'/api'
          "^/api": ""
        }
      }
    }
  }
  ...
```

### 3.2 修改api/index.js文件

```js
const BASE_URL = "/api";
// 所有请求路径以BASE_URL开头，例如：
export const reqAddress = geohash => ajax(`${BASE_URL}/position/${geohash}`);
```