vue 文件目录结构详解

下面我为您详细讲解一下Vue文件目录结构的完整攻略。

目录结构说明

在Vue项目创建完成后，我们会看到类似于下面的目录结构：

├── node_modules        // 存放整个项目的依赖库
├── public              // 静态资源文件夹，存放系统所需的静态资源。例如图像文件等
│   ├── index.html        // 入口页面
├── src                 // 真正的代码仓库，所有源码均存放于此
│   ├── assets            // 静态资源文件夹，通常我们在这里放置一些图片、字体等资源文件
│   ├── components        // 组件文件夹，专门用来存放自定义的组件
│   ├── router            // 路由配置文件夹，存放整个项目的路由信息
│   ├── views             // 视图文件夹，存放整个项目的视图组件
│   ├── App.vue           // 程序入口文件，负责初始化根组件和挂在整个应用
│   ├── main.js           // 程序的核心文件，主要作用是初始化Vue实例并使用需要的插件
├── .babelrc            // 配置babel转码工具的配置项
├── package.json        // 项目描述文件，包含了项目的基本信息，以及依赖、脚本信息等
├── README.md           // 项目介绍文件

其中，node_modules目录是整个项目的依赖库，public目录存放着项目的静态资源文件，例如图片、字体等文件。在src目录下存放了整个项目的源代码，包括了一些公共资源。其中App.vue是程序的入口文件，main.js是主要的核心文件，初始化Vue实例并使用所需的插件。src目录下的文件夹assets、components、router、views分别存储了项目中的静态资源、自定义组件、路由信息和视图组件。

示例说明

我们在这里通过两个示例来具体说明一下这个文档结构：

1. 示例一：

我们有一个名为hello的组件，并且它需要在用户访问/hello路径时展示出来。

在项目中，我们可以在components文件夹下新建一个名为Hello的文件夹，其中包含两个文件：Hello.vue和index.js，其中的Hello.vue就是我们这个组件的实际内容，index.js中则包含了组件的注册以及路由配置信息。

其中，Hello.vue的代码如下：

<template>
  <div>
    <h1>Hello {{ name }}!</h1>
  </div>
</template>

<script>
export default {
  name: 'Hello',
  data () {
    return {
      name: 'World'
    }
  }
}
</script>

在index.js中，我们可以这样写：

import Hello from './Hello.vue'

export default {
  path: '/hello',
  component: Hello
}

最后在router/index.js文件中将这个路由配置注入到VueRouter实例中即可：

import Vue from 'vue'
import Router from 'vue-router'
import HelloRouter from './Hello/index.js'

Vue.use(Router)

export default new Router({
  mode: 'history',
  routes: [
    ...HelloRouter
  ]
})

这里使用Vue-router，实现按需加载的功能。

1. 示例二：

我们需要通过Vue-resource插件来发送POST请求，并在开发环境中为它配置一个代理服务器。

首先，我们在项目的依赖项中添加Vue-resource插件：

npm install --save vue-resource

接下来，在main.js中引入Vue-resource并使用它：

import Vue from 'vue'
import VueResource from 'vue-resource'

Vue.use(VueResource)

// 假设我们的请求地址格式是这样的：http://localhost:8080/api/xxx
// 这里我们可以通过配置 Vue-resource 的 baseURL 选项来修改请求地址的前缀：
Vue.http.options.root = 'http://localhost:8080/api'

最后，在config/index.js中引入http-proxy-middleware模块，并将代理服务器的配置信息加入到开发环境中：

const proxyMiddleware = require('http-proxy-middleware')

module.exports = {
  // ...
  devServer: {
    // ...
    before (app) {
      app.use(proxyMiddleware('/api', {
        target: 'http://localhost:3000',
        changeOrigin: true
      }))
    }
  }
}

这里代理配置的含义是，当浏览器发送请求/api/foo/bar时，代理服务器会将该请求转发到http://localhost:3000/api/foo/bar上。

当然，这只是一个简单的示例。在实际开发中，我们可能需要更为复杂的代理规则来方便我们的开发。