Xmall商城项目

源代码下载路径：Xmall商城项目实战代码

课程目标

• 运用vue+vue-router+vuex+element-ui搭建网站
• 对项目进行需求分析和模块划分以及功能划分
• 实现首页+全部+品牌周边页面渲染
• 查看商品详情页制作、商品排序以及分页功能实现
• 使用token+jwt实现网站用户登录退出 (后台)
• 使用meta元信息实现路由权限控制
• 实现加入购物车、图片懒加载功能
• 实现数据持久化存储用户数据和购物车数据
• 项目优化以及如何打包上线整个流程

项目初始化

• vue create xmall_front

• 项目目录如下

  

• 

cd xmall_front
npm run server
//访问https://localhost:8080

效果如下：

安装依赖

• 安装sass:npm install -D sass-loader node-sass

• 安装element-ui第三方组件库：vue add element

• 安装图片懒加载插件：npm i vue-lazyload -S
• 安装请求库：npm i axios -S

路由配置

import Vue from 'vue'
import VueRouter from 'vue-router'

// 解决路由命名冲突的方法
const routerPush = VueRouter.prototype.push
VueRouter.prototype.push = function push(location) {
   
  return routerPush.call(this, location).catch(error => error)
}

// 异步组件加载
const Index = () => import('@/views/Index');
const Login = () => import('@/views/Login');
const Home = () => import('@/views/Home');
const Goods = () => import('@/views/Goods');
const Thanks = () => import('@/views/Thanks');
const GoodsDetail = () => import('@/views/GoodsDetail');
const User = () => import('@/views/User');
// import Index from '@/views/Index'
// import Login from '@/views/Login'
// import Home from '@/views/Home'
// import Goods from '@/views/Goods'
// import Thanks from '@/views/Thanks'
// import GoodsDetail from '@/views/GoodsDetail'
// import User from '@/views/User';
Vue.use(VueRouter)

const routes = [

  {
   
    path: "/",
    redirect: '/home',
    name: 'home',
    component: Index,
    children: [
      {
   
        path: "home",
        component: Home
      },
      {
   
        path: "goods",
        component: Goods
      },
      {
   
        path: "thanks",
        component: Thanks
      },
      {
   
        path: 'goodsDetail',
        name: 'goodsDetail',
        component: GoodsDetail
      }
    ]
  }