Vue.js教程
9.3 目录结构
阅读(

Vue.js 基础

Vue.js 过渡和动画

Vue.js 可复用性和组合

Vue.js 工具

Vue.js 模块化

Vue.js 响应式系统原理

Vue.js API

Vue.js 服务器端渲染 SSR

Vue.js 服务端渲染 Nuxt.js

Nuxt.js简介

Nuxt.js安装

Nuxt.js目录结构

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

资源目录

资源目录assets用于组织未编译的静态资源如LESSSASSJavaScript

关于 assets 目录的更多信息

组件目录

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

布局目录

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

该目录名为Nuxt.js保留的,不可更改。

关于布局的更多信息

中间件目录

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

关于中间件的更多信息

页面目录

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

该目录名为Nuxt.js保留的,不可更改。

关于页面的更多信息

插件目录

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

关于插件的更多信息

静态文件目录

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

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

该目录名为Nuxt.js保留的,不可更改。

关于静态文件的更多信息

Store 目录

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

该目录名为Nuxt.js保留的,不可更改。

关于 store 的更多信息

nuxt.config.js 文件

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

该文件名为Nuxt.js保留的,不可更改。

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

package.json 文件

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

该文件名为Nuxt.js保留的,不可更改。

别名

别名 目录
~ /
~assets /assets
~components /components
~pages /pages
~plugins /plugins
~static /static
~store /store

文件别名:

别名 使用方法 描述
~store const store = require('~store') 导入vuex状态树实例。
~router const router = require('~router') 导入vue-router实例。

如果本教程对您帮助很大,请随意打赏。您的支持,将鼓励我们提供更好的教程!

← 键盘方向键翻页 →
返回顶部 手机访问 关注微信 返回底部

扫码访问歪脖网

随时随地,想看就看

关注歪脖网微信

分享 web 知识、交流 web 经验