nuxt.js目录结构介绍

责编:menVScode 2018-09-26 14:58 阅读(227)

Nuxt.js 是一个基于 Vue 的通用应用框架。 通过对客户端/服务端基础架构的抽象组织,Nuxt.js 主要关注的是应用的 UI渲染。Nuxt.js 预设了利用 Vue 开发服务端渲染的应用所需要的各种配置。

Nuxt.js是使用 Webpack 和 Node.js 进行封装的基于Vue的SSR框架,使用它,你可以不需要自己搭建一套 SSR 程序,而是通过其约定好的文件结构和API就可以实现一个首屏渲染的 Web 应用。

按照官网步骤生成nuxt应用框架 https://zh.nuxtjs.org/guide/installation,目录结构如下


.nuxt  : Nuxt自动生成,临时的用于编辑的文件,build

assets:Webpack 编译的各类资源,// 用于组织未编译的静态资源入LESS、SASS 或 JavaScript

components:各组件,用于你自己管理公共组件或非公共组件 ,比如滚动组件,日历组件,分页组件

layouts:宿主布局页面模板组件,用于你可以把不同的页面指定使用不同的布局,不可更改。

middleware:中间件,首屏渲染和路由跳转前均执行对应中间件,可以返回promise或直接next(很实用!)

pages:各页面组件,用于生成对应路由,支持嵌套,支持动态路由,存放写的页面,我们主要的工作区域

plugins:插件,SPA中用的各类第三方组件和一些node模块,JavaScript插件放的地方

static :/ 用于存放静态资源文件,比如图片

store:内置了vuex,可以直接返回数据模块或返回一个自建vuex根对象,具体要翻文档,用于组织应用的Vuex 状态管理

.editorconfig: // 开发工具格式配置

.eslintrc.js: // ESLint的配置文件,用于检查代码格式

.gitignore: // 配置git不上传的文件

nuxt.config.json: // 用于组织Nuxt.js应用的个性化配置,已覆盖默认配置

package-lock.json: // npm自动生成,用于帮助package的统一性设置的,yarn也有相同的操作

package.json: // npm包管理配置文件

nuxt.config.js对程序的扩展管理可大概分为以下类:

build:主要对应 Webpack 中的各配置项,可以对默认的 Webpack 配置进行扩展,如这里代码

cache:主要对应内置的组件缓存模块lru-cache的配置对象,有默认值,可选关闭

css:对应我们在SPA随处引用样式文件的require语句

dev:用于自定义配置环境变量,对应之前webpack.config.js相关文件中的变量语句

env:同上息息相关

generate:对generate命令执行时的行为做一些定制

head:对应vue-meta插件的全局配置,vue-meta用于VUE/SSR程序的文档元信息的管理

loading:用于定制化Nuxt.js内置的进度条组件

performance:用于配置Node.js服务器性能上的配置

plugins:用于管理和应用对应plugins文件夹中的插件

rootdir:用于设置 Nuxt.js 应用的根目录(这俩api有很大合并的意义)

srcdir:用于设置 Nuxt.js 应用的源码目录(这俩api有很大合并的意义)

router:用于对vue-router的扩展和定制,其中还包括了中间件的配置,但并不完美(后面说)

transition:用于定制Nuxt.js内置的页面切换过渡效果的默认属性值

watchers:用于定制Nuxt.js内置的文件监听模块chokidar和 -Webpack 的相关配置项
标签: nuxt Vue
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码