适合初学者入手的vue项目

最新推荐文章于 2024-09-23 22:03:38 发布

_ForeverYouth_

最新推荐文章于 2024-09-23 22:03:38 发布

阅读量7.7k

点赞数 21

分类专栏： vue 文章标签： javascript vue.js

本文链接：https://blog.csdn.net/Kavii_a/article/details/109168901

版权

vue 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

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

建议大家做这个项目，资料全，接口不收费，但是有个别接口有问题，做的时候不要钻牛角尖。适合初学者入手的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",
      },
    },
  },
};

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