# 第一个仓库

**Repository Path**: qing-object/first-warehouse

## Basic Information

- **Project Name**: 第一个仓库
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-12-10
- **Last Updated**: 2020-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README



## 项目介绍

#### 写在前面

这是一个简单的vue项目，只用于学习，适合初学者练手。



#### 技术栈

- html + css + js
- ES6
- AJAX (项目里用的是封装过的axios)
- Vue + VueCli + Vuex + VueRouter （Vue全家桶）
#### 能学到什么

- **锻炼刚学过的知识**

- **组件化开发的思想，以及封装一些公共的组件**

- **特别常用的组件可以把他封装成插件，也就是插件封装法**

  - 首先在你封装好的Toast组件同级目录下新建一个 index.js 把Toast导入进去

  - 在项目的main.js导入刚刚新建的index.js

  - 然后安装它，Vue.use()在安装插件的时候会执行里面的 install 方法

  - index.js 详细内容如下

  - ```javascriptj
    import Toast from "./Toast.vue";
    const obj = {};
    obj.install = function(vue) {
      // console.log('执行了obj的install函数', vue);
      // 1.创建组件构造器
      const toastcontrustor = vue.extend(Toast);
      // 2.通过new的方式，根据组件构造器，可以创建出来一个组件对象
      const toast = new toastcontrustor();
      // 3.将组件对象，手动挂在到某一个元素上
      toast.$mount(document.createElement("div"));
      // 4.toast.el对应的就是div
      document.body.appendChild(toast.$el);
      vue.prototype.$toast = toast;
    };
    export default obj;
    ```

- **防抖函数**

  - 短时间内多次触发同一事件，只执行最后一次，或者只执行最开始的一次，中间的不执行。

  - 在这个项目里，为了确定它滚动的高度需要用到图片的onload事件，在图片加载完之后去做某些事情。

  - ```javascript
    // 防抖函数
    export function debounce(func, delay) {
      let timer = null;
      return function(...args) {
        if (timer) clearTimeout(timer);
        timer = setTimeout(() => {
          func.apply(this, args);
        }, delay);
      };
    }
    ```

- **混入 mixin**

  - 混入 (mixin) 提供了一种非常灵活的方式，来分发 Vue 组件中的可复用功能。一个混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被“混合”进入该组件本身的选项。

- **封装的思想**

  - 在项目里面，不会直接使用axios和better-scrolld，都会给再做一层封装

  - 因为如果某天这个框架或者插件不在更新了，我们不用重构我们整个项目的代码，只需要需改我们封装的那部分代码

  - 下面就是将axios进行了简单的封装

    - ```
      import axios from "axios";
      export function request(config) {
        // 1.创建axios的实例
        const instance = axios.create({
          baseURL: "",
          timeout: 5000
        });
        // 2.axios的拦截器
        // 2.1.请求拦截的作用
        instance.interceptors.request.use(
          config => {
            return config;
          },
          err => {
            // console.log(err);
          }
        );
        // 2.2.响应拦截
        instance.interceptors.response.use(
          res => {
            return res.data;
          },
          err => {
            console.log(err);
          }
        );
        // 3.发送真正的网络请求
        return instance(config);
      }
      ```

      

#### 目录结构介绍

![项目目录结构划分](https://img-blog.csdnimg.cn/20201019210100961.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0thdmlpX2E=,size_16,color_FFFFFF,t_70#pic_center)

#### 用到的插件

- **better-scroll** 1.13.2（别的版本可能有一些莫名bug）  一款移动端滚动插件

  - https://github.com/ustbhuangyi/better-scroll

- **fastclick**  解决移动端事件触发300ms延迟

  - https://github.com/ftlabs/fastclick
  - 安装
  - 导入
  - 调用attach函数

- **vue-lazyload**  一个Vue.js插件，用于将图像或组件延迟加载到应用程序中

  - https://github.com/hilongjw/vue-lazyload
  - 安装
  - 导入
  - vue.use
  - 修改图片 img:src ->v-lazy

- **postcss-px-to-viewport**  可从像素单位生成视口单位（vw，vh，vmin，vmax）

  - **注：个人建议在项目没有写完时不要安装，不然影响在浏览器调试**

  - https://github.com/evrone/postcss-px-to-viewport

  - 安装

  - 在postcss.config.js中配置（没有就建一个）

  - ```javascript
    module.exports = {
      plugins: {
        autoprefixer: {},
        "postcss-px-to-viewport": {
          viewportWidth: 375, // 视窗的宽度，对应的是我们设计稿的宽度
          viewportHight: 667, // 视窗的高度，对应的是我们设计稿的高度
          unitPrecision: 5, // 指定px转换为视窗单位值的小数位数（很多时候无法整除）
          viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议用vw
          selectorBlackList: ['ignore', 'tab-bar', 'tab-bar-item'], // 指定不需要转换的类
          minPixelValue: 1, // 小于或等于1px不转换视窗单位
          mediaQuery: false // 允许再媒体查询中转换px
        }
      }
    }
    ```

    

#### 功能介绍

- **首页功能**
  - 轮播图
  - TabControl点击切换商品
  - 上拉加载更多
  - 返回顶部组件的封装
  - TabControl吸顶效果
  - 离开首页时记录状态和位置
- **分类页面功能**
  - 主要就是展示数据
  - 点击侧边栏跳转到不同的商品
- **购物车（主要使用vuex状态管理）**
  - 商品列表展示
  - 全选反选
  - 价格计算
  - 商品数量计算
- **详情页面**
  - 电梯导航，例，点击参数应该滚动到参数那里
  - 点击加入购物车（这里封装了一个Toast，以插件的方式封装，因为很多地方都能用到这个插件）
- **我的页面**
  - 这个页面没有功能和数据展示

#### 项目开始

- **划分目录结构**

- **css文件的引入 这里用的是 normalize.css**

  - https://github.com/necolas/normalize.css

- **给一些路径配置别名**

  - 在项目目录下新建一个vue.config.js

  - 下面是我自己的配置，可以参考一下

  - ```js
    module.exports = {
      configureWebpack: {
        resolve: {
          alias: {
            assets: "@/assets",
            common: "@/common",
            components: "@/components",
            network: "@/network",
            views: "@/views",
          },
        },
      },
    };
    ```