我的项目背景介绍
本我的项目咱们将综合使用后面学习过的常识，基于前端 vue 框架来开发一个网上商城，商城的商品次要分为文创产品、助农产品、时代经典图书等，让同学们在学习前端常识的同时，能理解一些比拟有创意想法的产品，感触咱们国家的历史文化以及新时代思维。
我的项目性能介绍
我的项目为一个繁难的文创商品购物网站，次要包含用户登录登出、顶部菜单、轮播图、商品展现、商品筛选、商品详情查看、退出购物车、购物车查看等性能
我的项目框架搭建
一.创立我的项目
vue create mall二.装置依赖库
npm i axios vue-axios vue-router@3.x element-ui三.在 main.js 中配置
import App from './App.vue'import axios from "axios"import VueAxios from 'vue-axios'import VueRouter from 'vue-router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import Login from './components/Login.vue';import Home from './components/Home.vue';import Cultural from "./components/CulturalFolder/Cultural.vue";import Clothe from "./components/ClotheFolder/Clothe.vue";import Fresh from "./components/FreshFolder/Fresh.vue";import Book from "./components/BookFolder/Book.vue";import Cart from "./components/ShoppingCart/Cart.vue"import ProdectDetail from './components/CulturalFolder/ProdectDetail'Vue.config.productionTip = falseVue.use(VueAxios, axios)Vue.use(VueRouter)Vue.use(ElementUI)四、配置跨域转发
在根目录下新建 vue.config.js
module.exports = defineConfig({ transpileDependencies: true, lintOnSave: false, devServer: { proxy: { '/v1': { target: 'http://140.246.26.182:7070' } } }})初始化 vue-router
1.先把页面分成两个，一个主页 Home，一个登录页 Login。创立 Home 和 Login 组件
2.在 main.js 中，配置路由表
/* 配置路由表 */const routes = [ { path: '/login', name: 'login', component: Login, }, { path: '/', name: 'home', component: Home, children: [ { path: '/cultural', name: 'cultural', component: Cultural }, { path: '/clothe', name: 'clothe', component: Clothe }, { path: '/fresh', name: 'fresh', component: Fresh }, { path: '/book', name: 'book', component: Book }, { path: '/cart', name: 'cart', component: Cart }, { path: 'detail/:id', //商品详情页路由,id示意一个变量（任取） component: ProdectDetail, props: true //把path上的变量作为参数传递到ProductDetail组件中 } ] }]3.在 App 组件中放入 router-view
五.编写登录页面，Login 组件
<template> <div class="page-login"> <el-row type="flex" justify="center"> <el-col style="width: 250px"> <el-row type="flex" align="middle" class="row"> <label class="label">用户</label> <el-input v-model="name" style="width: 200px"></el-input> </el-row> <el-row type="flex" align="middle" class="row"> <label class="label">明码</label> <el-input v-model="password" type="password" style="width: 200px"></el-input> </el-row> <el-row type="flex" align="middle" class="row"> <el-button type="primary" @click="handleClick" style="width: 250px">登录</el-button> </el-row> </el-col> </el-row> </div></template><style>.page-login { padding-top: 200px;}.row { width: 250px; margin-bottom: 20px;}.label { width: 50px; text-align: left;}</style>六、登录申请接口，查看返回后果，判断是否登录胜利
data() { return { name: "", password: "" }; }, methods: { handleClick() { this.axios .post("/v1/login", { name: this.name, password: this.password }) .then(res => { if (res.data.code === 1) { this.$router.push({ path: "/cultural" }); } else { alert(res.data.msg); } }); } }};顶部菜单
成果
一、布局
能够合成为四块，两头局部选用 el-menu 组件，其余三块应用三个 di
el-menu 组件文档
https://element.eleme.cn/#/zh-CN/component/menu 1.新建 HeadMenu 组件，作为顶部菜单组件，并在 Home 组件中引入 2. HeadMenu 组件内布局通过引入 el-menu 组件实现顶部菜单
款式
二、切换 1. 四个菜单，须要对应 4 个组件，创立 4 个组件，而后在路由表中配置子路由 2. 实现切换，el-menu 组件有一个 select 事件，当用户切换菜单时，这个事件会触发，因而能够在 handleSelect 中实现路由跳转，由此实现菜单切换
三、下拉菜单，实现登出性能，成果 1. 应用 DropDown 组件 https://element.eleme.cn/#/zh-CN/component/dropdown
先尝试根底用法 2. 批改原来的款式，退出 DropDown 组件 3. 退出性能，调用服务端退出登录接口
首页轮播图
成果展现：
能主动进行图片的轮播
一、轮播图组件根底用法
咱们要实现图片的轮播，就是把轮播的内容改成图片，即用 img 标签，因而要先从服务端获取轮播图的数据
二、数据获取，查看返回的后果
三、将数据渲染到轮播图组件中四、优化登录，当没有登录时，申请轮播图数据会返回 未登录，状态码为-90001，因而能够判断状态码，如果未登录，就跳转到登录页面五、工作：退出分页文创商品列表
一.成果展现
二、商品列表展现
先获取列表数据，接口地址阐明如下 1.残缺代码
2、创立 ProductItem 组件，并通过 v-for 循环渲染各个商品
3、在 ProductItem 组件中编写代码，实现展现布局
本文由mdnice多平台公布