原文链接： https://blog.kelu.org/tech/2022/05/10/nuxtjs.html

作为一个本职是基础设施开发的后端人员，我将js比作linux系统，将vue比作docker/containerd，而nuxt就相当于kubernetes了。当然这个类比并不是非常准确。前端比容器大战要柔和的多，感觉大家都在底层上重复建设。对比容器技术，swarm/k8s/mesos也就5年左右就分出了胜负。前端目前主流还是react/vue/Angular这三家，基于这三家之上又有各自的服务端框架（更底层typescript倒是已经统一了），导致前端学习门槛较高，框架概念、设计模式其实也走了一遍后端框架的老路，很多概念后端开发可以平移过来。我比较相信权威，相信Taylor Otwell（Laravel的创造者），他说vue好，所以我就跟着他一起用了。

前两篇记录了点vue2和vue3的笔记，这一篇记录下nuxtjs3，这是官网，2022 年 4 月 20 日正式发布 nuxt3，代号为“Mount Hope”。

Nuxt3是基于 Vue3 发布的 SSR 框架：

• SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。
• SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好，对应企业网站、商品展示 、博客这类型的展示型网站。

这是官网显示的一些优势说明：

• 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小75倍。
• 更快：用动态服务端代码来优化冷启动。
• Hybird：增量动态生成和其他高级模式现在都成为可能。
• Suspense: 导航前后可在任何组件中获取数据。
• Composition API : 使用Composition API 和 Nuxt3的composables 实现真正的可复用性。
• Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。
• Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。
• Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。
• Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。
• Vite：用Vite作为你的打包器，体验轻量级的快速HMR。
• Vue3 ： 完全支持Vue3语法，这一点特别关键。
• TypeScript：由原生TypeScript和ESM构成，没有额外配置步骤。

安装

npx是npm从5.2版开始增加的命令

官方链接

npx nuxi init nuxt3-test  # 快速创建 

npm install 
npm run dev 

生成文件如下：

这里要重点提的是 nuxt.config.js 文件，所有配置都在里面。

一些常用的目录如下：

- pages               // 页面目录，Nuxt.js 框架读取该目录下所有的 .vue 文件并自动生成对应的路由配置。 
- components          // 组件目录 
- assets              // 静态资源目录 
- public              // 不需要 vue 处理的静态资源，此类文件不会被 Nuxt.js 调用 Webpack 进行构建编译处理。 服务器启动的时候，该目录下的文件会映射至应用的根路径 / 下。 
- layouts             // 项目布局目录 
- common              // 存储js文件 
- plugins             // nuxt扩展的js文件 
- store               // vuex的配置文件，Nuxt.js 框架集成了 Vuex 状态树 的相关功能配置，在 store 目录下创建一个 index.js 文件可激活这些配置。 

配置参考链接：

• https://www.nuxtjs.cn/faq/host-port
• https://v3.nuxtjs.org/guide/directory-structure/nuxt.config

删除根目录下的app.vue，然后pages目录下新建index.vue文件，就会自动关联vue-router，支持动态路由。

因为我是容器化环境开发的，所以改了一下运行端口到80端口，访问方便一些。如果发现配置不生效，可以尝试重启一卡容器（多个容器在同一个目录下启动npm run时感觉会冲突，就遇到有些配置不生效了）。

一些官网备忘

head

在setup函数中，可以useHead使用与元标记对应的键的元属性对象进行调用：title, titleTemplate, base, script, style, metaand link, 以及htmlAttrsand bodyAttrs。还有两个速记属性charset和viewport。

data-fetching

Nuxt 提供useFetch、useLazyFetch和useAsyncData来useLazyAsyncData处理应用程序中的数据获取。

state-management

useState是一个对 SSR 友好的ref 替代品。它的值将在服务器端渲染后（在客户端水化期间）被保留，并使用唯一键在所有组件之间共享。

server-routes

Nuxt 会自动扫描 、 和 目录中的文件~/server/api，~/server/routes以~/server/middleware注册具有 HMR 支持的 API 和服务器处理程序。

每个文件都应该导出一个用defineEventHandler().

路由

Nuxt使用了自动加载路由的方案，他会根据你项目的目录来自动创建router对象；

一个简单的示例，pages下的目录示例及其对应的路由如下所示：

test: 
  a.vue     -- 对应路径：/test/a 
  index.vue -- 对应路由：/test 
index: 
  _id: 
    a.vue      -- 对应路由：/{id}/a 
    index.vue  -- 对应路由：/{id} 
  index.vue    -- 对应路由：/，会被包含到上一级的index.vue的<nuxt-child>中 
index.vue      -- 对应路由：/，其中如果包含有nuxt-child元素，那么会将index目录下的index.vue加载到nuxt-child元素位置   

• 在 Nuxt.js 里面定义带参数的动态路由，需要创建对应的以下划线作为前缀的 Vue 文件 或 目录。
• 如果你想将_id设置为必选的路由，需要在 users/_id 目录内创建一个 index.vue 文件。

路由参数校验

Nuxt.js 可以让你在动态路由组件中定义参数校验方法。

举个例子： pages/users/_id.vue

export default { 
  validate ({ params }) { 
    // 必须是number类型 
    return /^\d+$/.test(params.id) 
  } 
} 

如果校验方法返回的值不为 true或Promise中resolve 解析为false或抛出Error ， Nuxt.js 将自动加载显示 404 错误页面或 500 错误页面。

未知嵌套深度的动态嵌套路由

如果您不知道URL结构的深度，您可以使用_.vue动态匹配嵌套路径。这将处理与更具体请求不匹配的情况。

文件结构:

pages/ 
--| people/ 
-----| _id.vue 
-----| index.vue 
--| _.vue 
--| index.vue 

知识点

一些代码只是为了做代码的结构备忘，不代表逻辑正确。

前端的语法糖太多了，我觉得这些语法糖是前端晦涩的一大原因。

不过，“无他，但手熟尔”，在前端也是一样。

1. 命令行nuxi

   npx nuxi init nuxt3-test  # 快速创建 
   

2. layout 布局 html(静态)

   layout文件夹 
   page文件夹 
   

3. 引入 css

   <style scope> 
   .abc {} 
   </style> 
   

4. 应用状态state

   <script setup> 
     const options = reactive({ 
         xxx: "xxx" 
     }); 
   </script> 
       
   <template> 
     <button class="abc" :class="options.xxx === 'xxx' && 'option-active'">abc</button> 
   </template> 
   

5. a标签替换为 NuxtLink 标签

   <NuxtLink to="/">Home</NuxtLink> 
   

6. 简单的typescript

   我觉得typescript的语法有点像golang。 看着也挺舒服的～

   先定义个interface类型，一些选项/常量用enum定义，再const一个实例。

   <script setup lang="ts"> 
     interface OptionState { 
       xxx: string, 
       yyy: string 
     } 
         
     enum Xxx { 
       AAA = "aaa", 
       BBB = "bbb" 
     } 
       
     const obj := OptionState{ 
         xxx: Xxx.AAA, 
         yyy: Xxx.BBB 
     } 
         
     const options = reactive<OptionState>({ 
         xxx: Xxx.AAA, 
         yyy: Xxx.BBB 
     }); 
   </script> 
   

7. import 其他文件里定义的内容

   import {OptionState} from "@/data"  // 其他文件要 export特定的定义 
   

   教程有的为了简化内容，直接准备一个json文件，然后import数据进来：

   <script setup lang="ts"> 
   import {xxx} from "@/data.json" 
         
   const rest = { 
     first: [...xxx].splice(0,25), 
     second: [...xxx].spice(25,25), 
   }; 
   </script> 
         
   <template> 
     <Row v-for="r in rest.first" :key="r.id" /> 
     <Row v-for="r in rest.second" :key="r.id" /> 
   </template> 
         
   

8. 更新state

   <script setup lang="ts"> 
     const computeSelectedNames = () => { 
       const filterNames = names 
       	.filter((name) => name.xxx === options.xxx ) 
       	.filter((name) => name.yyy === options.yyy ) 
       	.filter((name) => { 
           return ... 
         }) 
             
         selectdNames.value = filterdNames.map((name) => name.xxx ) 
           
     }; 
     const selectdNames = ref<string[]>{[]} 
   </script> 
       
   <template> 
     <button class="abc" @click="computeSelectName">Find</button> 
      
   </template> 
   

9. 注意拆分component，以及通过props在父子组件中传值

   <script setup lang="ts"> 
     interface OptionProps{ 
       option: { 
           id: string, 
         	title: string, 
           catagory: string, 
           index: number 
       }; 
     } 
         
     const props = defindProps<OptionProps>() 
   </script> 
   

   在父组件中传入:

   “`vue

<Row v-for=”(r,index) in rest.first” :key=”r.id” :index=”index”/>
<Row v-for=”(r,index) in rest.second” :key=”r.id” :index=”index”/>

“`

大写开头的标签就是component，有一些是 nuxt 保留的，用来作为头部header内容的，类似于 metadata

1. 通过事件触发父子组件传值。

   // 父： 
   <script setup lang="ts"> 
     const removeName = (index: number) => { 
       const filteredNames = [...selectdNames.value] 
       filterNames.splice(index,1) 
       selectedName.value = filterNames  
     } 
   </script> 
        
   <template> 
     <CardName v-for="(name, index) in selectedNames" :key="name" :name="name" @remove="()=> removeName(index)" :index="index" /> 
   </template> 
        
   // 子CardName： 
   <script setup lang="ts"> 
     interface NameProps{ 
       name: string; 
       index: number 
     } 
          
     const props = defindProps<NameProps>(); 
     const emit = defindEmits(["remove"]) 
          
     const removeName = () => { 
       emit("remove", props.index) 
     } 
   </script> 
        
   <template> 
     <p @click="removeName">xxx </p> 
   </template> 
   

2. 常用的循环语句

   v-for 
   

3. Pages, 基于文件的路由route

   <script setup lang="ts"> 
   // import {}  from "#app"; // 用来让编辑器不报错的，其实没什么用。 
   import xxx from "@/data.json" 
          
   const route = useRoute(); 
   const name = route.params.name; 
          
   const x = xxx.find(r => r.name === name) 
   </script> 
        
   <template> 
    
   </template> 
   

4. 404页面

5. Layouts

   创建 layouts 文件夹，并创建default.vue文件。

   在page中声明使用特定的layout

   <template> 
     <div> 
       <NuxtLayout name="custom"> 
         <Xxx /> 
       </NuxtLayout> 
     </div> 
   </template> 
   

   在layout中插入slot（假设layout名error）

   <template> 
     <div> 
       <slot name="xxx" /> 
       <div>...</div> 
     </div> 
   </template> 
   

   在page中：

   <template> 
     <div> 
       <NuxtLayout name="error"> 
         <template #xxx> 
           <h1></h1> 
         </template> 
       </NuxtLayout> 
       <div>...</div> 
     </div> 
   </template> 
   

6. metadata

   

   为了方便控制，也可以写在script里,

   

   也可以使用 outside stylesheets 方式：

   在nuxt.config.js里配置。

   export default defineNuxtConfig({ 
       charset: "utf-8", 
       viewport: "width=device-width, initial-scale=1, maximum-scale=1", 
       meta: { 
           link: [ 
               { rel: "stylesheet", href: "/assets/css/style.css" }, 
               { rel: "stylesheet", href: "/assets/css/font-awesome.min.css" }, 
           ], 
           script: [ 
               { src: '/assets/js/jquery.min.js' }, 
             ], 
       } 
   }) 
   

7. 网页数据状态设计

8. composable，useState

   用来保存状态。不能用 ref 做跟踪，因为这里没有render，会造成内存泄漏。

   

   

9. Global State

   

   

10. 生成静态网站

参考资料

• https://youtu.be/dZC4T4UiU1c

• https://nuxtjs.org/tutorials/creating-blog-with-nuxt-content/

• https://laracasts.com/series/nuxtjs-crash-course/episodes/1

• Nuxt3从零到实战手把手

• https://nuxtjs.org/announcements/nuxt3-rc

• https://v3.nuxtjs.org/

• Nuxt3目录结构介绍和HelloWorld编写-哔哩哔哩

• https://www.w3cschool.cn/nuxtjs

本文转自： https://blog.kelu.org/tech/2022/05/10/nuxtjs.html
本站仅做收录，版权归原作者所有。