VUE项目的目录结构以及一些常用方法，自己的开发习惯

一.目录结构src中

• assets:img,css,js等
• components:里面放公共组件,两个文件,common,在其他项目也能使用;content,在当前项目使用
• network:网络请求
• router:路由
• store:vuex
• views:里面放每个单页面的组件
• APP.vue:我通常只放router-view和导入一些全局样式
• man.js:导入router,store,axios,各类插件等

二.常用方法
navBar
通常页面上面会有一个navBar，我一般封装成一个组件，里面用插槽，封装一次其他的项目也可以使用

<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 slot="left">a</div>
<div slot="center">b</div>
<div slot="right">c</div>

tabBar
通常页面下面也会有一个tabBar，我一般封装成一个组件，里面用插槽，封装一次其他的项目也可以使用

<div><slot name="item-icon"></slot></div>
<div><slot name="item-icon-active"></slot></div>
<div><slot name="item-text"></slot></div>

当然这个tabbar要结合路由一起使用的，因为我们点击要切换不同的页面，这个时候就要在每个tabbar上面加上一个path地址了，指定跳转的路由地址

网络请求
网络请求也是开发中必备的，我一般封装成一个方法，然后也是其他项目也可以使用

我每次是先封装一个request方法

import axios from 'axios'

export function request(config){
//1.创建axios的实例
const instance =axios.create({

  baseURL : 网络请求地址
  timeout : 5000
})

//2.axios的拦截器
//2.1请求拦截的作用
instance.interceptors.request.use(config=>{
  // console.log(config)
  //1.比如config中的一些信息不符合服务器要求
  //2.比如每次发送网络请求时，都希望在界面中显示一个请求的图标
  //3.某些网络请求(比如登录(token))，必须携带一些特殊的信息
  return config
},err =>{
  // console.log(err);
})

//2.2响应拦截
instance.interceptors.response.use(res =>{
  // console.log(res); 
  return res.data
},err =>{
  // console.log(err);
})

//发送真正的网络请求
return instance(config) //返回一个promise

}

将需要获取数据的请求再定义一个方法，导入request

import {request} from './request'

export function requests(){
 return request({
   url : '网络地址'
})

}

然后再需要的页面进行导入

 import {requests} from 

之后在methods中使用这个方法，然后在created中再调用这个方法就行了，避免直接在生命周期函数里面直接获取

路由
路由一般就用路由懒加载方式，这样可以节省性能，需要时候再加载页面，我通常使用ES6懒加载方法加载页面

 const XX =() =>import('')
 const一个变量，再使用箭头函数
 routes的写法还和之前一样