这个项目对现在来说其实有点太老了，所以不是很推荐大家去写了。

建议大家做这个项目，资料全，接口不收费，但是有个别接口有问题，做的时候不要钻牛角尖。适合初学者入手的vue项目(2)

项目介绍

写在前面

这里是项目地址，如果觉得对你有帮助的话就给我点个星星8

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

在这里特别感谢coderwhy老师提供的接口，想要接口的小伙伴请添加老师微信coderwhy00

技术栈

• html + css + js
• ES6
• AJAX (项目里用的是封装过的axios)
• Vue + VueCli + Vuex + VueRouter （Vue全家桶）

效果图

能学到什么

• 锻炼刚学过的知识

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

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

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

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

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

  • index.js 详细内容如下

  • 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事件，在图片加载完之后去做某些事情。

  • // 防抖函数
    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);
      }
      

目录结构介绍

用到的插件

• 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中配置（没有就建一个）

  • 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

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

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

• 然后就是愉快的开始你的项目拉！