Nuxt相关学习 | 青训营笔记

130 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 25 天

Nuxt3是可以实现SSR(Server-Side Rendering)开发的框架,使用Vue作为视图引擎。

目录结构

不用去碰的目录

.nuxt/

这个目录是创建一个Nuxt项目中初始化默认自带的一个文件夹,里面用来存放运行项目时生成的Vue的应用程序,可以不用去管它里面的文件。

.output/

这里面存放的是项目build生成的文件,不要去碰。

node_modules/

存放下载工具下载的各种依赖组件。

各种配置文件

.gitignore

如果一些目录不需要使用git管理,就把它的名称写到这里面,比如需要下载的node_modules和自动生成的.nuxt、.output就不需要放上去浪费资源。

package.json

这个文件用来选择配置项目的各个依赖。

nuxt.config.ts

.ts是它的拓展名,拓展名还可以是.js.mjs。 这里面编写的配置用来修改Nuxt的默认配置,这位更是重量级,像是创建环境变量、修改组件导入啥的配置都是在这里编写的。

app.config.ts

创建令牌,模块热更新,各种响应式配置在这里编写。扩展名和上面一样。

components/

用来存放编写的所有Vue组件,在这里面的组件会被Nuxt自动导入可以在任何地方直接使用它。文件名默认为components/下的路径+文件名去除重读片段组成的,如果想要用文件名作为组件名需要在app.config修改。

Nuxt还支持一种动态导入或者叫惰性加载组件的方法,只需要在组件名的前面加上一个Lazy就可以了,这样组件就会在用到它的时候才进行加载。

pages/

里面存放的是各个页面组件,这些将会通过路由来进行选择。

app.vue

这个文件也是用脚手架创价的实例中默认自带的,如果没有pages/,Nuxt就不会使用路由的方式,而是着重这个文件。

plugins/

用来存放可选为被注册的插件。