官网:https://zh.nuxtjs.org/guide/directory-structure/
一 assets目录(资源目录)
资源目录 assets
用于组织未编译的静态资源如 LESS
、SASS
或 JavaScript
。该目录下的静态资源会被webpack进行编译,public中的不会被编译
二 components目录(组件目录)
组件目录 components
用于组织应用的 Vue.js 组件。Nuxt.js 不会扩展增强该目录下 Vue.js 组件,即这些组件不会像页面组件那样有 asyncData
方法的特性。
三 layouts目录(布局目录)
布局目录 layouts
用于组织应用的布局组件。
四 middleware目录(中间件目录)
middleware
目录用于存放应用的中间件。
五 pages目录(页面目录)
页面目录 pages
用于组织应用的路由及视图。Nuxt.js 框架读取该目录下所有的 .vue
文件并自动生成对应的路由配置。
六 plugins目录(插件目录)
插件目录 plugins
用于组织那些需要在 根vue.js应用
实例化之前需要运行的 Javascript 插件。
七 static目录(静态文件目录)
静态文件目录 static
用于存放应用的静态文件,此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候,该目录下的文件会映射至应用的根路径 /
下。
八 store目录
store
目录用于组织应用的 Vuex 状态树 文件。 Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置,在 store
目录下创建一个 index.js
文件可激活这些配置。
九 nuxt.config.js 文件
nuxt.config.js
文件用于组织Nuxt.js 应用的个性化配置,以便覆盖默认配置。
十 package.json 文件
package.json
文件用于描述应用的依赖关系和对外暴露的脚本接口。该文件不能被重命名。
十一 别名
~ 或 @ |
srcDir |
~~ 或 @@ |
rootDir |
默认情况下,srcDir
和 rootDir
相同。
提示: 在您的 vue
模板中, 如果你需要引入 assets
或者 static
目录, 使用 ~/assets/your_image.png
和 ~/static/your_image.png
方式。