开发者学堂课程【微服务+全栈在线教育实战项目演练(SpringCloud Alibaba+SpringBoot):NUXT 框架介绍】学习笔记,与课程紧密连接,让用户快速学习知识。
课程地址:https://developer.aliyun.com/learning/course/667/detail/11427
NUXT 框架介绍
启动项目和之前一样,第一次稍微慢一点,现在是3000端口,内存占用多少就说明启用成功,然后用3000端口进行访问,这个不会自动打开浏览器,需要手动访问。
NUXT 现在就是访问,接下来就是说环境里边的内容,出现的警告可以暂时忽略它对运行没有什么影响,只要 warn 的位置不是 error 就可以忽略。
NUXT 目录结构
(1)资源目录 assets(一般放项目中的静态资源)
用于组织未编译的静态资源如 LESS、SASS 或 JavaScript 。
(2)组件目录 components(放项目中相关组件)
用于组织应用的 Vuejs 组件。Nuxtjs不会扩展增强该日录下 Vuejs 组件,即这些组件不会像页面组件那样有 asyncData 方法的特性,
(3)布局目录 layouts(定义网页布局方式)
用于组织应用的布局组件。
(4)页面目录 pages(放项目具体页面)
用于组织应用的路由及视图。Nuvtjs 框架读取该图表"下所有的_ vue 文件并自动生成对应的路由配置
(5)插件目录 plugins
用于组织那些需要在模 νuejs 应用文例化之前需要运行的 Javasciipt 插件。
- nuxt.config.js 文件(核心配置文件)
这些页面的特点:
一个是layout,一个是pages,一个布局一个页面,在pages中有一个indexvue是首页面,还有一个是default页面,在default设置它的布局方式
在操作过程中,我们看到的页面是有头,有尾还有 nuxt 标签,本质上就是先有一个布局页面,然后通过布局页面把它引入过去,只是有头有尾,其他的部分就是别的页面内容,先加载default再引入 index。
Ifream 就是引入其它页面的一个标签,最终做个显示。
总结:
在访问一个地址时候,它先进入到首页面,首页面的页面是 index,它首先不是加载 index,先加载 default,先加载布局页面,加载完布局页面之后通过 nuxt 标签,把其它内容引入过来,default 也有这个标签。