Vue学习Day16 划分目录结构、引用css文件、配置文件别名、路由配置、导航栏封装、网络请求数据

想利用暑假时间好好学习一下vue，会记录每一天的学习内容。
今天是学习vue的第16天！

起起伏伏乃人生常态，继续加油～

(样式部分不写)

---

---

1. 划分目录结构

---

2. 引用两个css文件

• base.css中放我们自己的css代码
• normalize.css是css样式初始化的插件，可以在github上下载或者直接npm，它让不同的浏览器在渲染网页元素的时候形式更统一

在base.css中引入normalize.css：

@import "./normalize.css";

在App.vue中引入base.css：

<style>
  @import "./assets/css/base.css";
</style>

(在main.js中引入了App.vue，在打包文件时，会从main.js->App.vue->base.css->normalize.css，全部参与打包)

---

3. vue.config.js配置别名

创建vue.config.js文件

vue.config.js 和 src 文件夹在同一目录下

(但我后面还是直接写了路径，这里记录一下可能以后会用)

编写vue.config.js代码

module.export = {
  configWebpack: {
    resolve: {
      alias: {
        // 默认配置'src': '@'
        'assets': '@/assets',
        'common': '@/common',
        'components': '@/components',
        'network': '@/network',
        'views': '@/views',
      }
    },
  },
};

---

4. 引入tabbar

把我们之前封装的TabBar.vue、TabBarItem.vue、MainTabBar.vue拖过来

MainTabBar.vue：

在我们的App.vue中引入MainTabBar并注册

点击某个TabBarItem是要跳转到某个路由的，所以现在去配置路由

---

5. 路由配置

安装

npm install vue-router --save

创建index.js文件

路由配置代码

(写了很多次了不细说了)

index.js中：导入->安装插件->创建实例->配置路由映射

// index.js

import Vue from "vue";
import VueRouter from "vue-router";

// 安装插件
Vue.use(VueRouter);

// 懒加载
const Home = () => import('../views/home/Home.vue');
const Category = () => import('../views/category/Category.vue');
const Cart = () => import('../views/cart/Cart.vue');
const Profile = () => import('../views/profile/Profile.vue');

// 配置路由映射
const routes = [
  {
    path: '',
    redirect: '/home'
  },
  {
    path: '/home',
    component: Home
  },
  {
    path: '/category',
    component: Category
  },
  {
    path: '/cart',
    component: Cart
  },
  {
    path: '/profile',
    component: Profile
  }
]
// 创建路由实例
const router = new VueRouter({
  routes,
  mode: 'history'
})
// 导出路由，在main.js中引入
export default router;

main.js中：导入实例->挂载实例

// main.js

import Vue from 'vue'
import App from './App.vue'
// 导入路由实例
import router from './router'
Vue.config.productionTip = false

new Vue({
  // 挂载路由实例
  router,
  render: h => h(App),
}).$mount('#app')

因为其中需要用到Home.vue、Category.vue、Cart.vue、Profile.vue四个文件，我已经提前建好了

当我们把tabbar的路由映射关系配置好之后，我们项目的模块实际上已经划分好了，之后只需要专攻各个大组件中具体内容

---

6. home页导航栏封装

封装放在哪里？

• 这个导航栏组件在多个界面中都会用到，应该放在components文件夹中
• 那么是放在content文件夹中还是common文件夹中？
  • 这里选择放在了common文件夹中，因为类似于这样的导航栏组件其实挺常见的，很有可能在别的项目中也能使用

具体封装

新建NavBar.vue文件
因为我们的导航栏在多个页面都要使用，而每个页面的导航栏长的不完全一样，所以这里用三个插槽。
因为需要给插槽添加一些样式(宽度之类的)，但是直接将类名加在插槽上不保险，所以将插槽包裹在div中

// NavBar.vue

<template>
  <div class="nav-bar">
    <div class="left"><slot name="left"></slot></div>
    <div class="center"><slot name="center"></slot></div>
    <div class="right"><slot name="right"></slot></div> 
  </div>
</template>

<script>
export default {

}
</script>

<style>
  .nav-bar {
    display: flex;
    height: 44px;
    line-height: 44px;
    box-shadow: 0 1px 1px rgba(100,100,100,0.1);
  }
  .left,.right {
    width: 60px;
    // 为了演示
    background: blue;
  }
  /* 中间占据剩余空间 */
  .center {
    flex: 1;
    // 为了演示
    background: red;
    text-align: center;
  }
</style>

⚠️：不要在封装导航栏的样式中直接设置颜色，每个界面需要的导航栏颜色可能不一样

当前在我们的Home.vue组件中试用一下：
要导入并注册NavBar.vue组件
(目前并未往插槽中插东西)

// Home.vue

<template>
  <div id="home">
    <nav-bar></nav-bar>
  </div>
</template>

<script>
import NavBar from '../../components/common/navbar/NavBar.vue'
export default {
  components: {
    NavBar
  }
}
</script>

目前效果：

在不同界面用到时，我们在这三个插槽中插入不同的icon或者文字就行了

做到上面这样差不多就封装好了，现在在home页可以正式使用了

home页只需要在中间的插槽插入文字即可，整个导航栏的背景色也是home页专属的

// home.vue
<template>
  <div id="home">
    <nav-bar class="home-nav">
      <template #center>
        购物街
      </template>
    </nav-bar>
  </div>
</template>

<style>
.home-nav {
  background: #ff8198;
  color: #fff;
}
</style>

目前效果：

---

7. 请求首页的多个数据

网络请求部分会用到axios框架

安装

npm install axios --save

新建request.js文件

封装axios

也是昨天封装过的，直接拿来用
有问题可以看我这篇文章的axios模块封装部分：
https://blog.csdn.net/gegegegege12/article/details/118913572

(这两拦截器目前还不确定会不会用，先放着)

import axios from "axios";

export function request(config) {
  // 1.创建axios的实例
  const instance = axios.create({
    baseURL: 'http://.....',
    timeout: 5000
  })

  // 添加请求拦截器
  instance.interceptors.request.use(config => {
    console.log(config);
    return config;
  }, err => {
    console.log(err);
  });
  // 添加响应拦截器
  instance.interceptors.response.use(res => {
    console.log(res);
    return res;
  }, err => {
    console.log(err);
  });

  // 2.发送网络请求 
  return instance(config);
}

请求首页数据

新建一个network/home.js文件，里面封装关于home页的网络请求

import {request} from "../network/request"

export function getHomeMultiData() {
  return request({
    url: '/home/multidata'
  })
}

在home页中，面向home.js来发送网络请求就好

什么时候发送网络请求？

• 一旦组件创建好就发送，这里就要用到一个生命周期函数created()

⚠️：不要在created()里处理拿到的数据，数据在created()作用域外会被销毁，应该将他们保存在data中

// home.vue
<script>
import {getHomeMultiData} from '../../network/home'

export default {
  components: {
    NavBar
  },
  data() {
    return {
      // 保存请求到的数据
      banners: [],
      recommends: [],
    }
  },
  created() {
    // 1.请求多个数据
    getHomeMultiData().then(res => {
      this.result = res.data.banner.list;
      this.recommentd = res.data.recommend.list;
    })
  }
}
</script>

(接口不太方便放出来，不好意思)

---