基于vue3.0+vue-cli4.0+mysql+koa2的商城系统第一期

基于vue3.0+vue-cli4.0+mysql+koa2的商城系统

组件包含

组件名称	作用
axios	ajax用作在不刷新页面的情况与服务器进行数据交互
vue-axios	将axios直接挂到vue实例中方便组件调用
vue-cookie	方便获取服务器种在前端的cookie值
vue-lazyload	实现图片懒加载提升用户体验
node-sass	辅助sass-loader是翻译sass必备依赖
sass-loader	解析sass文件翻译成浏览器能使用的css语法
element-ui	用作消息提示提升用户体验
swiper	高效快速开发banner图最友好的插件之一

具体依赖如下图所示

具体创建的方法项目不在这里介绍
项目总体目录结构如下图所示

具体创建组件的步骤在此省略，直接进行代码编辑环节
第一步：创建项目的路由
官方vue-router介绍连接：https://router.vuejs.org/zh/guide/
首先创建文件router.js用来承载项目的路由，一个路由想要被使用那就需要被注册任何插件在vue中都是如此，
通过vue.use()将vue-router注册进vue当中
（1）import Vue from ‘vue’
（2）import Router from ‘vue-router’
（3）Vue.use(Router);
通过import引入在pages页面文件夹中创建的项目，文件引入路径一定需要注意首先通过./找到路由所在文件夹再通过/pages找到页面文件夹最后再通过/文件名找到需要引入的文件（在这里.Js可以省略）
本此项目主要为6个页面，后续还可能添加一些页面来完善项目

页面名称	作用
index.js	用作项目主界面为用户展示
Shopindex.js	用作商城的主界面展示商品
login.js	用户登录账号
register.js	用户注册账号
detail.js	商品的详细信息
cart.js	购物车页面

想要节省资源那就需要代码的复用，所以大致分为两个部分页面的头部和页面的尾部的代码复用，具体路由定义如下代码所示

import Vue from 'vue'
import Router from 'vue-router'
import Home from './pages/home'
import Index from './pages/index'
import Active from './pages/active'
import Login from './pages/login'
import Register from './pages/register'
import Order from './pages/order'
import ShopIndex from './pages/ShopIndex'
import Detail from './pages/detail'