文件结构介绍

Mr.Hope ... Basic
大约 3 分钟

# 文件结构

.
├── dist → 构建输出目录
│
├── src
│ ├── .vuepress (可选的) → 用于存放全局的配置、组件、静态资源等
│ │ ├── components (可选的) → 该目录中的 Vue 组件将会被自动注册为全局组件
│ │ │
│ │ ├── theme (可选的) → 用于存放本地主题
│ │ │ │
│ │ │ ├── ... → 在主题部分查看更多详情
│ │ │ │
│ │ │ └── Layout.vue → 布局
│ │ │
│ │ ├── public (可选的) → 静态资源目录
│ │ │
│ │ ├── styles (可选的) → 用于存放样式相关的文件
│ │ │ ├── index.styl → 将会被自动应用的全局样式文件,会生成在最终的 CSS 文件结尾,具有比默认样式更高的优先级。
│ │ │ └── palette.styl → 用于重写默认颜色常量,或者设置新的 stylus 颜色常量
│ │ │
│ │ ├── templates (可选的, 谨慎配置) → 存储 HTML 模板文件
│ │ │ ├── dev.html → 用于开发环境的 HTML 模板文件
│ │ │ └── ssr.html → 构建时基于 Vue SSR 的 HTML 模板文件
│ │ │
│ │ ├── config.js (可选的) → 配置文件的入口文件
│ │ │
│ │ └── enhanceApp.js (可选的) → 客户端应用的增强
│ │
│ ├── readme.md → 主页
│ ├── vuepress
│ │ ├── ...
│ │ └── readme.md
│ ├── markdown
│ │ ├── ...
│ │ └── readme.md
│ │
│ └── en → English Folder → 英文语言文件夹
│ ├── readme.md → 主页
│ │
│ ├── vuepress
│ │ ├── ...
│ │ └── readme.md
│ │
│ └── markdown
│ ├── ...
│ └── readme.md
│
├─── readme.md → 项目中文说明
├─── readme.en-US.md → 项目英文说明
│
├── LICENSE → 许可证文件
│
├── package-lock.json → 项目实际使用的 package 结构
└── package.json → Nodejs 配置文件,也是项目的声明文件
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

::warning 请注意 Vuepress 对目录大小写敏感。 :::

# src 文件夹

源代码被放置在src目录下,在该目录下,所有的markdown文件都会被渲染成HTML,其中readme.md会被渲染成index.html。 另外 Vuepress 的配置文件全部放置在src/.vuepress目录下。

# dist 文件夹

构建后的代码会被输出dist目录,只需将其上传到需要部署的服务器上即可。

如使用了自动化构建工具,开启自动部署后无需在本地执行构建。

# package.json

Node.js 对整个项目的声明文件,它是 Node 项目必包含的文件。包含了项目名称详情许可证以及使用的package等信息。

# readme.md

项目在 Github 的说明文件。

# 其他

初期无需掌握用途的文件:

文件 内容
node_modules 存放了项目使用的 package
LICENSE 项目许可证文件
package-lock.json 项目实际使用的 package 结构
.eslintignore ESLint 忽略的文件
.eslintrc.js ESLint 规则配置文件
.nvmrc node 版本声明文件
.travis.yml Travis CI 配置文件

提示

ESLint 是一个 JS 的代码格式与错误提示器。

初学者可以在学习中结合使用,减少自己的错误并培养规范的代码风格。但无需掌握其具体配置方法与工作原理。

# .vuepress

.vuepress 文件夹应直接放置在源代码的目录里。里面包含了 Vuepress 的配置选项。

# config.js

项目的配置文件。具体的配置说明请打开该文件查看注释。

提示

更多详情可以查看Vuepress 配置(opens new window)

# public 文件夹

放置网站的其他文件,在构建时该文件夹内的文件会直接拷贝至构建后的目录中。其内部资源通常是不需要使用相对路径引入的资源,比如网站的图标等。

# style 文件夹

放置了整个站点的样式,其中index.styl是整个站点额外扩充的样式文件,palette.styl是整个站点的配色配置。

提示

styl 是 CSS 的一个超集,扩充并改变了 CSS 的写法,在内部可以使用变量。初学者无需掌握。

初期无需掌握用途的文件:

文件夹 内容
compoenents 放置了 Vuepress 站点中的 Vue 组件
theme 放置了 Vuepress 站点的主题
templates 放置了 Vuepress 站点的模板与布局