前端框架 Nuxt3 Vue3 SSR 总结

news2024/12/24 8:27:49

目录

一、Nuxt3安装

二、路由

1、普通路由 

2、动态路由

3、获取路由参数

4、路由跳转标签 

5、路由跳转api

三、静态资源

四、常用标签

1、title标签、useHead的API

五、公共模板布局

1、默认布局

2、自定义公共模板

3、动态自定义布局

六、插件

七、中间件

八、存放api接口

九、项目文件夹总结


一、Nuxt3安装

参考:Installation · Get Started with Nuxt

安装官网的安装步骤很可能会访问不了github的链接,

解决方法:

访问:在线ping_多地ping_多线路ping_持续ping_网络延迟测试_服务器延迟测试

 测试网速后,选择访问时间较短的ip:

 配置到host文件里:通过win+r再输入drivers回车可以弹窗etc目录

 

 ip 空格 域名

再次执行命令就可以了。

创建的项目如下结构:

执行命令安装依赖:

yarn install

二、路由

首先,将App.vue的欢迎界面修改为pages页面的,这样就可以对pages页面下的页面进行自动路由。

<template>
  <NuxtPage />
</template>

创建pages目录用于存放自动路由的页面。

1、普通路由 

将.vue文件存放于pages目录下将会进行自动的路由。

 

2、动态路由

通过中括号中存参数的形式存放页面,如: [id].vue文件

<template>
  <div>{{ $route.params.id }}</div>
</template>

<script lang="ts" setup>
</script>

访问: root:port/about/id的参数

3、获取路由参数

{{$route.param.你的参数名}}

{{$route.query.你的查询参数}}    //就是url?后的参数

相当于是直接调用了useRoute()的函数。

4、路由跳转标签 

<nuxt-link to="/login">
      登录
   </nuxt-link>

和a标签效果类似

5、路由跳转api

navigateTo:

<template>
  <div>
    首页
    <button @click="goToLogin">跳转到登录页面</button>
  </div>
</template>

<script lang="ts" setup>

function goToLogin () {
  navigateTo({
    path: "/login",
    params: {}
  });
}
</script>

三、静态资源

创建assets目录用于存放静态资源

静态url推荐放到public目录下:

 这里就不用写波浪线了。

补充, 

 路径映射在tsconfig里可以看到:

四、常用标签

1、title标签、useHead的API

<template>
  <Title>登录页面</Title>
  <div>
    login
  </div>
</template>

也可以使用useHead来设置title,此时需注释掉Title标签才能生效:

<template>
  <!--<Title>登录页面</Title>-->
  <div>
    login
  </div>
</template>

<script lang="ts" setup>
useHead({
  title: "登录页面xxxxxx"
})
</script>

更好的使用还可以这样玩:

<template>
  <Title>登录页面</Title>
  <div>
    login
  </div>
</template>

<script lang="ts" setup>
useHead({
  // title: "登录页面xxxxxx",
  titleTemplate: (titleChunk) => {
    return titleChunk ? titleChunk + "--DragonWU" : "DragonWu";
  }
});
</script>

 为了有利用SEO还需配置好meta,因为爬虫抓取时也会抓取meta里的数据

<script lang="ts" setup>
useHead({
  // title: "登录页面xxxxxx",
  meta: [
    {name:"description",content:"Dragon Wu"},
    {name:"keyword",content:"Dragon Wu"}
  ],
  titleTemplate: (titleChunk) => {
    return titleChunk ? titleChunk + "--DragonWU" : "DragonWu";
  }
});
</script>

script属性用于存放script标签的资源

<script lang="ts" setup>
useHead({
  // title: "登录页面xxxxxx",
  meta: [
    {name:"description",content:"Dragon Wu"}
  ],
  titleTemplate: (titleChunk) => {
    return titleChunk ? titleChunk + "--DragonWU" : "DragonWu";
  },
  script: [
    {
      src: "/assets/js/clouds/Detector.js",  //public目录下的资源
      body: true //true时存放于HTML底部,false存放于HTML顶部
    }
  ]
});
</script>

 注意:body若为false此时页面元素还未被渲染所以此时那不到元素对象,true时在页面底部此时已渲染可以拿到页面元素。

其他和Title类似的标签:

五、公共模板布局

创建layouts目录用于存放公共模板

1、默认布局

App.vue里添加NuxtLayout标签包裹:

<template>
  <div>
    <NuxtLayout>
      <NuxtPage />
    </NuxtLayout>
  </div>
</template>

 也可以在对应页面控制公共布局是否显示:

<script lang="ts" setup>
definePageMeta({
  layout: false  //不显示公共布局
})
</script>

2、自定义公共模板

layouts目录下创建你的自定义.vue文件

<script lang="ts" setup>
definePageMeta({
  layout: "custom"  //默认为default,这里修改为自定义layout名即可
})
</script>

3、动态自定义布局

<template>
  <div>
    <button @click="enableCustomLayout">自定义公共布局</button>
  </div>
</template>

<script lang="ts" setup>
const route=useRoute()
function enableCustomLayout(){
  route.meta.layout="custom"
}
</script>

点击以后动态修改。

也可以这样玩:

六、插件

插件plugins目录,插件可以全局使用

创建一个自定义插件:

export default defineNuxtPlugin(() => {
    return {
        provide: {
            hello: (msg: String) => {
                return `hello ${msg}!`;
            }
        }
    };
});

在对应页面进行调用:

<template>
  <div>
    {{ $hello("world") }}
  </div>
</template>

<script lang="ts" setup>
const { $hello } = useNuxtApp();
</script>

七、中间件

插件middleware目录

新建自定义中间件:

export default defineNuxtRouteMiddleware((to, from) => {
    console.log("auth");
});

再按auth的格式再插件cat的中间件,

在页面中添加代码:

<script lang="ts" setup>
definePageMeta({
  middleware: ["auth", "cat"] //这里名称需要和中间件的名称相同
});
</script>

可以看到中间件依次执行了:

八、存放api接口

 创建server/api目录

export default defineEventHandler((event) => {
    return {
        api: "works"
    };
});

 可以访问到:api接口文档

 也可以加特定的后缀来规定接口访问:

九、项目文件夹总结

--pages        页面
--components   组件
--layouts      公共布局
--assets       资源使用时需加 ~
--public       静态资源类似于nuxt2里的static
--plugins      插件
--middleware   中间件
--server 
    -api       接口文档

--common       公共函数

app.vue        入口文件
nuxt.config.ts nuxt配置
 
......

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/83531.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

【QString 函数学习篇】

【QString 函数学习篇】【1】UI设计布局【2】QChar | setAlignment |【3】sprintf | asprintf | setNum | number |【4】toInt | toUpper [十进制->十六进制 | 十进制->二进制]【5】clear | append【6】二进制->十六进制 | 二进制->十进制【7】prepend【8】strimme…

[附源码]Python计算机毕业设计SSM基于的餐厅管理系统(程序+LW)

项目运行 环境配置&#xff1a; Jdk1.8 Tomcat7.0 Mysql HBuilderX&#xff08;Webstorm也行&#xff09; Eclispe&#xff08;IntelliJ IDEA,Eclispe,MyEclispe,Sts都支持&#xff09;。 项目技术&#xff1a; SSM mybatis Maven Vue 等等组成&#xff0c;B/S模式 M…

(十二)Vue之列表渲染

文章目录基本列表遍历数组遍历对象遍历字符串遍历指定次数key的原理虚拟DOM中key的作用用index作为key可能会引发的问题如何选择keyVue学习目录 上一篇&#xff1a;&#xff08;十一&#xff09;Vue之条件渲染 基本列表 在vue里基本的列表渲染可以使用v-for指令 v-for指令: …

Reactor手册

Flux Flux 是一个发出0-N个元素组成的异步序列的Publisher,可以被onComplete信号或者onError信号所终止。 Flux.just("Hello", "World").subscribe(System.out::println);// fromArray()&#xff0c;fromIterable()&#xff0c;fromStream()Flux.fromArra…

K8s 核心组件介绍

目录前言一、控制平面组件1.1 kube-apiserver1.2 etcd1.3 kube-scheduler1.4 kube-controller-manager1.5 cloud-controller-manager二、Node 组件2.1 kubelet2.2 kube-proxy2.3 Container Runtime前言 一个完整的 K8s 集群由一组节点&#xff08;node&#xff09;服务器组成&…

组队-蓝桥杯

题目描述 本题为填空题&#xff0c;只需要算出结果后&#xff0c;在代码中使用输出语句将所填结果输出即可。 作为篮球队教练&#xff0c;你需要从以下名单中选出 11 号位至 55 号位各一名球员&#xff0c;组成球队的首发阵容。 每位球员担任 11 号位至 55 号位时的评分如下…

关于人脸检测和人脸关键点检测的详解(涉及Opencv 和Dlibd)

关于人脸识别&#xff0c;大家入门opencv&#xff0c;最常见的是用opencv级联分类器器里面的函数进行人脸的识别&#xff08;当然里面包含很多各种物体的分类器&#xff0c;大家可以一一测试&#xff09;&#xff0c;今天我们来练一下关于人脸识别的级联器。 1&#xff0c;ope…

数据仓库(DW)、数据湖、数据中台的关系

一句话说明&#xff1a;数据中台是一套体系&#xff0c;既不是工具又不是存储&#xff0c;它可以包含数据湖和数据仓库。 数据仓库 数据仓库是一个面向主题的、集成的、随时间变化但信息本身相对稳定的数据集合&#xff0c;用于支持管理决策过程。其本质就是完成从面向业务过程…

[附源码]Python计算机毕业设计Django-菜篮子系统

项目运行 环境配置&#xff1a; Pychram社区版 python3.7.7 Mysql5.7 HBuilderXlist pipNavicat11Djangonodejs。 项目技术&#xff1a; django python Vue 等等组成&#xff0c;B/S模式 pychram管理等等。 环境需要 1.运行环境&#xff1a;最好是python3.7.7&#xff0c;…

一文学会jenkins pipline自动化构建

01 Pipeline流水线基本语法 首先创建 在jenkins上创建一个pipeline的流水线任务 新建ITEM–>选择流水线 基本pipeline脚本结构 pipeline {//agent 表示要执行的节点&#xff0c;any表示任意节点 agent any //stages表示任务执行时的所有步骤集合 stages { /…

企业销售CRM的主要优势是什么?

民营企业商品销售CRM的主要就竞争优势是什么? 新一代研究说明&#xff0c;由于差劲的顾客新体验&#xff0c;或内公司每月经济损失750亿元。为了更快地介绍您的顾客&#xff0c;您须要两个智能化的顾客管理工作系统。因而&#xff0c;您能提供更多直接影响您的商品销售的高质…

Python调用C++

1 背景 python被称为胶水语言&#xff0c;其优势是能够粘结各种不同的语言。同时&#xff0c;python有着更大的“亲民性”&#xff0c;很容易进行开发。但是&#xff0c;python最大的问题就是计算速度不够。通常可以用CUDA或者C对一个python程序进行加速&#xff0c;加速策略如…

【LeetCode】单词搜索 II [H](前缀树)

212. 单词搜索 II - 力扣&#xff08;LeetCode&#xff09; 一、题目 给定一个 m x n 二维字符网格 board 和一个单词&#xff08;字符串&#xff09;列表 words&#xff0c; 返回所有二维网格上的单词 。 单词必须按照字母顺序&#xff0c;通过 相邻的单元格 内的字母构成&am…

QT系列第2节 QT中元对象系统

QT是在标准C上进行了扩展&#xff0c;所以就有自己的特性&#xff0c;其中元对象系统就是其一。元对象系统有点类似于java和go语言中的反射&#xff0c;让我们在编程时解决问题多了些方法和思路&#xff0c;关于元对象可以简单总结出以下内容项。 目录 一.元对象要点总结 二…

Linux转发性能评估与优化之——转发瓶颈分析与解决方案

线速问题 很多人对这个线速概念存在误解。认为所谓线速能力就是路由器/交换机就像一根网线一样。而这&#xff0c;是不可能的。应该考虑到的一个概念就是延迟。数据包进入路由器或者交换机&#xff0c;存在一个核心延迟操作&#xff0c;这就是选路&#xff0c;对于路由器而言&…

软件工程复习简略

软件工程复习简略1.什么是软件生存周期&#xff1f;通常可划分为哪些阶段&#xff1f;2.简述需求分析要经过哪些步骤&#xff0c;每个步骤的作用。3.详细设计有哪些常用工具&#xff1f;&#xff08;注意Pad图的画法&#xff09;4.软件测试的目的和原则是什么&#xff1f;5.测试…

pythonselenium自动化测试实战项目(完整、全面)

前言 之前的文章说过&#xff0c; 要写一篇自动化实战的文章&#xff0c; 这段时间比较忙再加回家过11一直没有更新博客&#xff0c;今天整理一下实战项目的代码共大家学习。&#xff08;注:项目是针对我们公司内部系统的测试&#xff0c;只能内部网络访问&#xff0c;外部网络…

【SpringCloud负载均衡】【源码+图解】【三】LoadBalancer的工作原理

【SpringCloud负载均衡】【源码图解】【二】LoadBalancer配置 目录3. LoadBalancer的工作原理3.1 创建LoadBalancerRequest3.2 创建上下文3.2.1 properties3.2.2 configurations3.2.3 contexts3.3 获取ReactiveLoadBalancer3.4 获取ServiceInstance3.5 向serviceInstance请求结…

Java要学到什么程度才可以找工作?

Java为不同的集合提供了一个集合框架。集合基于数据结构&#xff0c;比如常见的&#xff1a;列表、数组、集合、哈希图等等。因此&#xff0c;在研究集合时&#xff0c;最好了解一点数据结构的相关知识。 主要副题&#xff1a; List Set Map ArrayList LinkedList Queue…

web3:智能合约-虚拟机(EVM、HVM、WASM、MOVE)

在区块链上&#xff0c;用户通过运行部署在区块链上的合约&#xff0c;完成需要共识的操作。而为智能合约提供运行环境的便是对应的虚拟机。 目录EVM基础概念技术细节EVM的存储模型交易在EVM的执行普通转账交易智能合约的创建或者调用EVM机器语言与现有的虚拟机科技作比较EVM的…