目录结构 - NuxtJS | Nuxt.js 中文网

Want to take a look at our new docs? Our new docs are now in beta. Have fun!

目录结构

Nuxt.js 的默认应用目录架构提供了良好的代码分层结构，适用于开发或大或小的应用。当然，你也可以根据自己的偏好组织应用代码。

[

观看有关Vue School上 Nuxt.js目录结构 的免费课程

](https://vueschool.io/lessons/guided-nuxtjs-project-tour?friend=nuxt)

[](#%E7%9B%AE%E5%BD%95)目录

[](#%E8%B5%84%E6%BA%90%E7%9B%AE%E5%BD%95)资源目录

资源目录 assets 用于组织未编译的静态资源如 LESS、SASS 或 JavaScript。

关于 assets 目录的更多信息

[](#%E7%BB%84%E4%BB%B6%E7%9B%AE%E5%BD%95)组件目录

组件目录 components 用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件，即这些组件不会像页面组件那样有 asyncData 方法的特性。

[](#%E5%B8%83%E5%B1%80%E7%9B%AE%E5%BD%95)布局目录

布局目录 layouts 用于组织应用的布局组件。

若无额外配置，该目录不能被重命名。

关于布局的更多信息

[](#%E4%B8%AD%E9%97%B4%E4%BB%B6%E7%9B%AE%E5%BD%95)中间件目录

middleware 目录用于存放应用的中间件。

关于中间件的更多信息

[](#%E9%A1%B5%E9%9D%A2%E7%9B%AE%E5%BD%95)页面目录

页面目录 pages 用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。

若无额外配置，该目录不能被重命名。

关于页面的更多信息

[](#%E6%8F%92%E4%BB%B6%E7%9B%AE%E5%BD%95)插件目录

插件目录 plugins 用于组织那些需要在 根vue.js应用 实例化之前需要运行的 Javascript 插件。

关于插件的更多信息

[](#%E9%9D%99%E6%80%81%E6%96%87%E4%BB%B6%E7%9B%AE%E5%BD%95)静态文件目录

静态文件目录 static 用于存放应用的静态文件，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。

举个例子: /static/robots.txt 映射至 /robots.txt

若无额外配置，该目录不能被重命名。

关于静态文件的更多信息

[](#store-%E7%9B%AE%E5%BD%95)Store 目录

store 目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。

若无额外配置，该目录不能被重命名。

关于 store 的更多信息

[](#nuxtconfigjs-%E6%96%87%E4%BB%B6)nuxt.config.js 文件

nuxt.config.js 文件用于组织 Nuxt.js 应用的个性化配置，以便覆盖默认配置。

若无额外配置，该文件不能被重命名。

关于 nuxt.config.js 的更多信息

[](#packagejson-%E6%96%87%E4%BB%B6)package.json 文件

package.json 文件用于描述应用的依赖关系和对外暴露的脚本接口。

该文件不能被重命名。

[](#%E5%88%AB%E5%90%8D)别名

别名

目录

~ 或 @

srcDir

~~ 或 @@

rootDir

默认情况下，srcDir 和 rootDir 相同。

提示: 在您的 vue 模板中, 如果你需要引入 assets 或者 static 目录, 使用 ~/assets/your_image.png 和 ~/static/your_image.png方式。

原网址: 访问
创建于: 2022-08-08 17:54:18
目录: default
标签: 无

未标明原创文章均为采集，版权归作者所有，转载无需和我联系，请注明原出处，南摩阿彌陀佛，知识，不只知道，要得到

请先后发表评论
  • 最新评论
  • 总共0条评论