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

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.

修订记录：

日期	版本号	作者	修订内容	备注
2019-8-5	1.0	moonspirit	创建文档