SPA项目开发之首页导航+左侧菜单

目录

一、mock的使用

1.安装mockjs依赖

2.配置开发环境和生产环境引入导main.js中使用

3.添加默认接口数据

4.绑定接口数据

运行

二、主界面搭建

AppMain.vue

 LeftNav.vue

TopNav.vue

index.js

main.js

三、退出

---

一、mock的使用

mock.js模拟响应ajax请求

1.安装mockjs依赖

  npm install mockjs -D      #只在开发环境使用

2.配置开发环境和生产环境引入导main.js中使用

3.添加默认接口数据

4.绑定接口数据

安装mockjs依赖

 成功之后可以在开发工具中看到

配置开发环境和生产环境引入导main.js中使用

为了只在开发环境使用mock，而打包到生产环境时自动不使用mock，我们可以在env中做一个配置

dev.env

module.exports = merge(prodEnv, {

NODE_ENV: '"development"',

   MOCK: 'true'

      })

)prod.env

module.exports = {

NODE_ENV: '"production"',

MOCK: 'false'

      }

main.js

process.env.MOCK && require('@/mock')

添加默认接口数据

将mock的数据放进src的文件夹

绑定接口数据

 index.js

import Mock from 'mockjs' //引入mockjs，npm已安装
import action from '@/api/action' //引入请求地址
 
//全局设置：设置所有ajax请求的超时时间，模拟网络传输耗时
Mock.setup({
    // timeout: 400  //延时400s请求到数据
    timeout: 200 - 400 //延时200-400s请求到数据
})
 
//引登陆的测试数据，并添加至mockjs
import loginInfo from '@/mock/json/login-mock.js'
let s1 = action.getFullPath('SYSTEM_USER_DOLOGIN')
Mock.mock(s1, "post", loginInfo)
// Mock.mock(s1, /post|get/i, loginInfo)

运行

因为是模拟响应ajax请求，后台没有启动，所以是随机的，可能成功和失败，就类似于调用接口，可能成功也可能失败

二、主界面搭建

导入要用的图片文件夹

AppMain.vue

 
 
<script>
  // 导入组件
  import TopNav from '@/components/TopNav.vue'
  import LeftNav from '@/components/LeftNav.vue'
 
  // 导出模块
  export default {
    components: {
      TopNav,
      LeftNav
    },
    data() {
      return {
        asideClass: 'main-aside'
      }
    },
    created() {
      this.$root.Bus.$on("collapsed-side", (v) => {
        this.asideClass = v ? 'main-aside-collapsed' : 'main-aside';
      });
    }
  };
script>
<style scoped>
  .main-container {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
  }
 
  .main-aside-collapsed {
    /* 在CSS中，通过对某一样式声明! important ，可以更改默认的CSS样式优先级规则，使该条样式属性声明具有最高优先级 */
    width: 64px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }
 
  .main-aside {
    width: 240px !important;
    height: 100%;
    background-color: #334157;
    margin: 0px;
  }
 
  .main-header,
  .main-center {
    padding: 0px;
    border-left: 2px solid #333;
  }
style>

 LeftNav.vue