一、初始化项目和项目插件依赖下载

初始化：vue create xmall_front
安装依赖：
安装sass:npm install -D sass-loader node-sass
安装element-ui第三方组件库：vue add element
安装图片懒加载插件：npm i vue-lazyload -S
安装请求库：npm i axios -S

二、嵌套路由

在这里插入图片描述

建立router/index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import Index from '../views/Index'
import Login from '../views/Loign/index'
import Home from '../views/Home/index'
import Goods from '../views/Goods/index'
import Thanks from '../views/Thanks/index'

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:'/login',
    name:'login',
    component:Login
  }
]

const router = new VueRouter({
  routes
})

export default router

建立views下各项目

分析

main.js文件 ==> App.vue ==> views/Index.vue ==>下面各个子路由
在这里插入图片描述

三、导航栏、轮播图组件

在https://element.eleme.cn/#/zh-CN查看element使用方法
（在plugins/elements.js导入）
在这里插入图片描述

四、数据接口(轮播图数据)

建立vue.config.js

const fs = require('fs');
module.expors = {
  devServer:{
    before(app,serve){
      app.get('/api/goods/home',(req,res)=>{
        fs.readFile('./db/home.json','utf-8',(err,data)=>{
          if(!err){
            res.json(JSON.parse(data));
          }
        })
      })
    }
  }
}