Nuxt项目配置、目录结构说明-实战教程基础-Day02
Nuxt项目配置、目录结构说明-实战教程基础-Day02
- 一、Nuxt项目结构
-
- 1.1资源目录
- 1.2 组件目录
- 1.3 布局目录
- 1.4 中间件目录
- 1.5 页面目录
- 1.6 插件目录
- 1.7 静态文件目录
- 1.8 Store 目录
- 1.9 nuxt.config.js 文件
- 1.10 package.json 文件
- 其他：别名
- 二、项目配置
-
- 2.1 build
- 2.2 css
- 2.3 dev
- 2.4 env
- 2.5 generate
- 2.6 head
- 2.7 loading
- 2.8 modules
- 2.9 modulesDir
- 2.10 plugins
- 2.11 rootDir
- 2.12 router
- 2.13 server
- 2.14 srcDir
- 2.15 dir
- 2.16 transition
- 3、总结
上一篇在 Nuxt实战教程基础-Day01我们介绍了Nuxt.js是什么，Nuxt.js的特性、运作方式、优点跟缺点、渲染方式，以及怎么创建Nuxt.js项目。以及举例了两个Nuxt.js开发的两个网站：（ y.js.cn这个网站前端主要用了Nuxt、Element-UI、TailwindCSS等。 jsjiami.cn这个网站同样用了Nuxt等技术。）接下来我们将根据这两个网站来展开教学。
一、Nuxt项目结构
Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。
1.1资源目录
资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。
1.2 组件目录
组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData方法的特性。
1.3 布局目录
布局目录 layouts 用于组织应用的布局组件。
若无额外配置，该目录不能被重命名。
1.4 中间件目录
middleware 目录用于存放应用的中间件。
1.5 页面目录
页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。
若无额外配置，该目录不能被重命名
1.6 插件目录
插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
1.7 静态文件目录
静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。
举个例子: /static/robots.txt 映射至 /robots.txt
若无额外配置，该目录不能被重命名。
1.8 Store 目录
store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。
若无额外配置，该目录不能被重命名。
1.9 nuxt.config.js 文件
nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。
若无额外配置，该文件不能被重命名。
1.10 package.json 文件
package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。
该文件不能被重命名。
其他：别名
| 别名 | 目录 |
|---|---|
~ 或 @ |
srcDir |
~~ 或 @@ |
rootDir |
默认情况下，srcDir 和 rootDir 相同。
提示: 在您的 vue 模板中, 如果你需要引入
assets或者static目录, 使用~/assets/your_image.png和~/static/your_image.png方式。
二、项目配置
Nuxt.js 默认的配置涵盖了大部分使用情形，可通过 nuxt.config.js 来覆盖默认的配置。
2.1 build
Nuxt.js 允许你在自动生成的 vendor.bundle.js 文件中添加一些模块，以减少应用 bundle 的体积。如果你的应用依赖第三方模块，这个配置项是十分实用的。
2.2 css
该配置项用于定义应用的全局（所有页面均需引用的）样式文件、模块或第三方库。
2.3 dev
该配置项用于配置 Nuxt.js 应用是开发还是生产模式。
2.4 env
该配置项用于定义应用客户端和服务端的环境变量。
2.5 generate
该配置项用于定义每个动态路由的参数，Nuxt.js 依据这些路由配置生成对应目录结构的静态文件。
2.6 head
该配置项用于配置应用默认的 meta 标签。
2.7 loading
该配置项用于个性化定制 Nuxt.js 使用的加载组件。
2.8 modules
该配置项允许您将 Nuxt 模块添加到项目中。
2.9 modulesDir
该配置项允许您定义Nuxt.js应用程序的node_modules文件夹。
2.10 plugins
该配置项用于配置那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。
2.11 rootDir
该配置项用于配置 Nuxt.js 应用的根目录。
2.12 router
该配置项可用于覆盖 Nuxt.js 默认的 vue-router 配置。
2.13 server
此选项允许您配置 Nuxt.js 应用程序的服务器实例变量。
2.14 srcDir
该配置项用于配置应用的源码目录路径。
2.15 dir
此选项允许您配置 Nuxt.js 应用程序的自定义目录。
2.16 transition
该配置项用于个性化配置应用过渡效果属性的默认值。
3、总结
由于篇幅原因，篇幅过长可能阅读起来就感觉很啰嗦，所以这篇就稍微给大家介绍一下Nuxt的目录结构说明，以及Nuxt项目配置的简单说明。下一篇将给大家详细介绍目录结构、跟项目配置的一些详细说明。