Vue.js 学习笔记——目录结构

ゝ一世哀愁。 2021-11-11 11:01 408阅读 0赞

### 文章目录 ###

*  1. 概览
 *  2. \*.vue 文件
 *  3.

# 1. 概览 #

├── index.html                      // 页面入口
      ├── build                           // 编译配置文件存储目录
      ├── config                          // 项目基本配置文件存储目录
      |     ├── dev.env.js                        // 开发环境
      |     ├── index.js                          // 主配置文件
      |     └── prod.env.js                       // 生产环境
      ├── node_modules                    // 项目依赖包存储目录
      ├── src                             // 源码存储路径
      |     ├── App.vue                           // App 入口
      |     ├── main.js                           // 项目配置文件
      |     ├── api                               // 接口
      |     |      ├── cnode.js
      |     ├── components                        // 自定义组件
      |     |      ├── header.vue
      |     |      └── footer.vue
      |     ├── config                            // 配置
      |     ├── page                              // 页面
      |     |      ├── index.vue
      |     |      └── content.vue
      |     ├── router                            // 路由
      |     ├── frame                             // 子路由
      |     ├── style                             // scss 样式
      |     └── utils                             // 常用工具
      └── static                          // 资源存储目录
            ├── css                               // 样式
            ├── font                              // 字体
            ├── img                               // 图片
            ├── js                                // 脚本
            └── plugin                            // 第三方插件

# 2. \*.vue 文件 #

`*.vue` 是一个自定义文件类型，用类 HTML 语法描述一个 Vue 组件。每个 .vue 文件包含三种类型的顶级语言块 `<template>`、`<script>` 和 `<style>`，分别代表 html、js、css。

其中，`<template>` 和 `<style>` 支持预编译语言。例如，scss 预编译语言，使用 `<style lang="scss">` 标注。

`components/` 和 `page` 都存储的是 `*.vue` 文件，出于项目管理的需要，二者在功能上各有侧重。`component/` 侧重于组件，一般由 js 控制组件的显示或者隐藏；`page` 侧重于页面，往往需要进行路由和跳转。

> `<template>` 中，必须放置一个 html 容器包裹所有代码，一般使用 `<div>`。

# 3. #

**修订记录：**

<table> 
 <thead> 
  <tr> 
   <th>日期</th> 
   <th>版本号</th> 
   <th>作者</th> 
   <th>修订内容</th> 
   <th>备注</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>2019-8-5</td> 
   <td>1.0</td> 
   <td>moonspirit</td> 
   <td>创建文档</td> 
   <td></td> 
  </tr> 
 </tbody> 
</table>