NUXT 框架介绍 | 学习笔记

简介: 快速学习 NUXT 框架介绍

开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot)NUXT 框架介绍】学习笔记,与课程紧密连接,让用户快速学习知识。

课程地址https://developer.aliyun.com/learning/course/667/detail/11427


NUXT 框架介绍


启动项目和之前一样,第一次稍微慢一点,现在是3000端口,内存占用多少就说明启用成功,然后用3000端口进行访问,这个不会自动打开浏览器,需要手动访问。

image.png

NUXT 现在就是访问,接下来就是说环境里边的内容,出现的警告可以暂时忽略它对运行没有什么影响,只要 warn 的位置不是 error 就可以忽略。

image.png

NUXT 目录结构

(1)资源目录 assets(一般放项目中的静态资源)

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

(2)组件目录 components(放项目中相关组件)

用于组织应用的 Vuejs 组件。Nuxtjs不会扩展增强该日录下 Vuejs 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性,

(3)布局目录 layouts(定义网页布局方式)

用于组织应用的布局组件。

image.png

(4)页面目录 pages(放项目具体页面)

用于组织应用的路由及视图。Nuvtjs 框架读取该图表"下所有的_ vue 文件并自动生成对应的路由配置

(5)插件目录 plugins

用于组织那些需要在模 νuejs 应用文例化之前需要运行的 Javasciipt 插件。

  1. nuxt.config.js 文件(核心配置文件)

这些页面的特点:

一个是layout,一个是pages,一个布局一个页面,在pages中有一个indexvue是首页面,还有一个是default页面,在default设置它的布局方式

image.png

在操作过程中,我们看到的页面是有头,有尾还有 nuxt 标签,本质上就是先有一个布局页面,然后通过布局页面把它引入过去,只是有头有尾,其他的部分就是别的页面内容,先加载default再引入 index。

Ifream 就是引入其它页面的一个标签,最终做个显示。

image.png

总结:

在访问一个地址时候,它先进入到首页面,首页面的页面是 index,它首先不是加载 index,先加载 default,先加载布局页面,加载完布局页面之后通过 nuxt 标签,把其它内容引入过来,default 也有这个标签。

相关文章
|
19天前
|
前端开发 JavaScript Java
前端 NUXT框架
前端 NUXT框架
19 0
|
1月前
|
资源调度 JavaScript 网络架构
2024轻松学会 Vue 框架:Vue 框架快速入门指南(三)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(三)
|
1月前
|
缓存 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(二)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(二)
|
1月前
|
JavaScript 前端开发 API
2024轻松学会 Vue 框架:Vue 框架快速入门指南(五)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(五)
|
1月前
|
JavaScript
在 Vue 中,如何使用SSR框架?
在 Vue 中,如何使用SSR框架?
32 2
|
8月前
|
JavaScript
Nuxt.js(Vue SSR)项目配置以及开发细节
Nuxt.js(Vue SSR)项目配置以及开发细节
157 0
|
1月前
|
JavaScript 前端开发 开发者
2024轻松学会 Vue 框架:Vue 框架快速入门指南(一)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(一)
|
1月前
|
传感器 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(六)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(六)
|
1月前
|
设计模式 JavaScript 前端开发
2024轻松学会 Vue 框架:Vue 框架快速入门指南(八)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(八)
|
1月前
|
存储 资源调度 JavaScript
2024轻松学会 Vue 框架:Vue 框架快速入门指南(四)
2024轻松学会 Vue 框架:Vue 框架快速入门指南(四)