SSR:服务器端把vue文件直接渲染为HTML返回给浏览器

NUXT

基础

  • 文件树
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
+-- dist[目录]                      // 编译后的目录，用于预览项目
+-- node_modules[目录]              // 项目使用的包目录，开发使用和上线使用的都在里边
+-- src[目录]                       // 源文件/代码，程序员主要编写的目录
|  +-- app.controller.spec.ts      // 对于基本控制器的单元测试样例
|  +-- app.controller.ts           // 控制器文件，可以简单理解为路由文件
|  +-- app.module.ts               // 模块文件，在NestJS世界里主要操作的就是模块
|  +-- app.service.ts              // 服务文件，提供的服务文件，业务逻辑编写在这里
|  +-- app.main.ts                 // 项目的入口文件，里边包括项目的主模块和监听端口号
+-- test[目录]                      // 测试文件目录，对项目测试时使用的目录，比如单元测试...
|  +-- app.e2e-spec.ts             // e2e测试，端对端测试文件，测试流程和功能使用
|  +-- jest-e2e.json               // jest测试文件，jset是一款简介的JavaScript测试框架
+-- .eslintrc.js                   // ESlint的配置文件
+-- .gitignore                     // git的配置文件，用于控制哪些文件不受Git管理
+-- .prettierrc                    // prettier配置文件，用于美化/格式化代码的
+-- nest-cli.json                  // 整个项目的配置文件，这个需要根据项目进行不同的配置
+-- package-lock.json              // 防止由于包不同，导致项目无法启动的配置文件，固定包版本
+-- package.json                   // 项目依赖包管理文件和Script文件，比如如何启动项目的命令
+-- README.md                      // 对项目的描述文件，markdown语法
+-- tsconfig.build.json            // TypeScript语法构建时的配置文件
+-- tsconfig.json                  // TypeScript的配置文件，控制TypeScript编译器的一些行为
  • 启动脚本
1
2
3
4
"start": "nest start",                              // 最常用的开始模式
"start:dev": "nest start --watch",                  // 开发模式的启动 有监视功能
"start:debug": "nest start --debug --watch",        // 调试Bug时的启动 调试程序时使用

  • 配置项：

    nuxt.config——全局配置

    • head
      • title：标题
    • loading：进度条颜色
    • css
      • 初始化的css
      • css:['~assets/css/xxxx.css'] (~匹配的是根目录)

如果要对单个页面配置而非全局，需要用head()函数,而非对象。

路由

  1. 基础路由

自动配置，需要和文件夹名字一样。引导至index.vue

  • 跳转
    <nuxt-link :to='{name:'news',params:{newID:3360}}'> </nutx-link>
  • 收参
    {{$router.params.newID}}
  1. 动态路由

文件需要命名为_id.vue (以_开头)

跳转时，需要加一个-
<nuxt-link :to='{name:'news-id',params:{id:3360}}'> </nutx-link>

  1. 切换动画

    • 全局加
      • assets下面写css
      • .page-leave/.page-leave-active (进入激活)
      • .page-leave/page-leave-active (离开激活)
    • 非全局
      • css命名为xxx-enter……
      • 在vue文件中的script里面 写 transition：’类名’

  2. 展示子路由

<nuxt-child></nuxt-child>
默认渲染的是index.vue

  1. 导航守卫

可以使用middleware

默认模板与布局

默认模板

统一写在 @/app.html ,写html文件

注意：

  • head内部需要用{{head}}框住
  • {{APP}}用于展示剩余内容
1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html lang="en">
<head>
	{{HEAD }}
</head>
<body>
<P>JSPang.com技术胖博客</P>
{{APP}}
</body>
</html>

默认布局

卸载layout里面，不能定义head

生命周期

服务端周期
  • nuxtServerInit ( store,context )
  • middleware ( {store,route,redirect,params,query} )
    • 其中redirect可以使得重定向

      if(!token){ redirect('/login')}

  • validate ( {paramas,query})
  • asyncData

其他周期差不多