vue项目目录结构解释

一、总览

 二、解析

1、node_modules

项目的所有依赖包

2、public

 可以放一些图片，如网站的图标

 3、src

src是项目的主要部分

（1）api定义访问后端的函数，如：

import { request } from '../utils/request'

// 用户登录
export function userLogin(params) {
    return request({
        method: 'post',
        url: 'user/login',
        data: params,
        headers: {
            'Authorization': window.localStorage.token,
        },
    })
}

（2）assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。

（3）components存放 vue 的公共组件，可以全局复用。

（4）router用来存放路由信息，一般是一个index.js文件。

（5）views用来放主体页面，区别于components，views可在路由中配置。

（6）main.js是项目的入口文件，作用是初始化 vue 实例、引入所需要的插件。

（7）less可以放重定义的css

（8）App.vue是项目的主组件，所有页面都是在该组件下进行切换的。app.vue可以当做是网站首页，也可以写所有页面中共同需要的动画或者样式，不在他上面写代码也可以。只要你在router文件夹中的index.js填写好路由，就是一个普通vue文件，只不过命名为app.vue，类似于函数命名，语义化，让人更加一目了然看到这个是入口vue文件。

（9）utils放一些js，定义一些工具。如发送网络请求：

import axios from 'axios'

export function request(config) {
    // 创建axios的实例
    const instance = axios.create({
        // baseURL: 'http://3958b99l28.zicp.vip',
        // baseURL: 'http://119.3.180.117:9090',
        baseURL: 'http://localhost:9090',
        timeout: 100000
    })
    // axios.interceptors  全局拦截
    //请求拦截
    instance.interceptors.request.use(config => { //拦截请求
        return config //若拦截到需要原封不动的返回
    }, err => { })
    //响应拦截
    instance.interceptors.response.use(res => {
        return res.data
    }, err => {
        console.log(err);
    })
    // 3.发送真正的网络请求
    return instance(config)

}

（10）store包含全局变量，一些get、set方法。如 

4、其他

package：配置文件，项目里各种工具是什么版本。

vue.config.js，可以在里面配置端口号，避免8080冲突，如

module.exports = {
    publicPath: './',
    devServer: {
        host: "0.0.0.0",
        port: "8081", // 代理端口
      },  
}