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

建议大家做这个项目，资料全，接口不收费，但是有个别接口有问题，做的时候不要钻牛角尖。适合初学者入手的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对应的就是divdocument.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', // 指定需要转换成的视窗单位，建议用vwselectorBlackList: ['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",},},},
};

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

适合初学者入手的vue项目相关推荐

适合初学者的安卓开源项目_开源世界中初学者的颠簸之旅
适合初学者的安卓开源项目 by Shubheksha 通过Shubheksha 开源世界中初学者的颠簸之旅 (A Beginner's Very Bumpy Journey Through The W ...
适合初学者的安卓开源项目_开源初学者的6个起点
适合初学者的安卓开源项目 Opensource.com几个月前问读者: 参与开源的最大障碍是什么? 来自56%的民意测验者的回答是他们不确定从哪里开始. 而且,有13%的人表示不愿意加入. 如果您有相 ...
适合初学者的安卓开源项目_开源系列的初学者将从下周开始
适合初学者的安卓开源项目下周,Opensource.com将开始发布有关"从入门到开源"的系列文章. 这一系列文章将作为一种资源存在 ,任何人都可以随时访问以了解更多关于在任何位 ...
适合初学者的安卓开源项目_开源周初学者
适合初学者的安卓开源项目 Opensource.com将发布文章,重点介绍从2月17日至28日对于初学者可以从开源开始的地方. 这些故事将包括在开源公司工作,在开源软件上工作以及构建开源应用程序的初次 ...
Web前端：适合初学者的最佳 JavaScript 项目
学习 JavaScript 或任何其他编程语言的关键需要投入大量时间和精力来开发大量项目,这里有一些最佳 JavaScript 项目. 1. 计算器这是初学者可以开发的最基本的大多数应用程序,编 ...
初学者如何学习开源项目
最近在考虑自己写一个Python开源项目,之前很少接触因此无从下爪,于是在Github上面找了一些适合初学者的练手项目,但面对诸多的代码文件也是有点头疼...所以特地整理了别人对于开源项目学习的建议. ...
创建空的vue项目，完整详细步骤
相信有很多初学者在创建vue项目时,还是记不清创建步骤,因此,我将自己创建vue项目的步骤流程进行整理分享,希望对大家有所帮助 1.创建项目:切换至安装目录,使用 vue create (项目名)命令 ...
适合初学者练手的vue小项目（附github源码）
vue慢慢的成为了前端最受欢迎的框架之一,在很多项目之中开发都能用得到,如今也已经发展到3.0了,可能是因为这个框架可以提高工作效率,因此受到大家的追捧,在之前的文章里面也说过,2019年,大前端学习 ...
适合初学者练手的vue小项目
1:Vue2.0入门项目 https://github.com/SD-Gaming/Vue2.0_to_do_list-addName- 2:慕课网Vue2.0购物车教程(注释版) https://g ...
python项目实例初学者-适合初学者练手的 10 个有趣Python项目
Python Python开发 Python语言适合初学者练手的 10 个有趣Python项目想成为一个优秀的开发者,没有捷径可走,势必要花费大量时间在键盘后. 而不断地进行各种小项目开发,可以 ...

适合初学者入手的vue项目