前端框架 Nuxt3 Vue3 SSR 总结

Dragon Wu

3788人浏览 · 2022-12-12 21:12:26

Dragon Wu · 2022-12-12 21:12:26 发布

1、title标签、useHead的API

一、Nuxt3安装

参考：安装 Installation | Nuxt 3 - 中文文档

安装官网的安装步骤很可能会访问不了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.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       接口文档

--composables  公共函数

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