来源
单页面程序，客户端渲染 CRS，他默认返回一个空的html页面，如 <body><div id="app"></div></body>,我们通过webpack打包出来的bundle.js和index.html就可以知道，整个页面的内容都是通过JS动态加载的，包括程序的逻辑，UI，服务端数据等，空白的页面引用了打包的JS，这时候浏览器就会处理js，渲染页面
SPA的优缺点，只需要加载一次，页面切换的时候不需要重新加载，比传统的web程序体验，加载更快，不利于SEO,首屏渲染慢，大型复杂的项目变得难以维护
浏览器爬虫的工作流程：分为三个阶段
如何做优化？
SSG静态站点生成：有利于SEO，预先生成好的静态网站，常见的框架有Nuxt，Next
SSG的缺点：不利于展示实时性的内容，SSR则能达到预期，如果站点内容更新了，需要重新构建和部署，偏静态的可以使用SSG
SSR：服务器端渲染，将渲染好的HTML返回给浏览器，也称同构应用
静态页面的过程
全局
手写Nuxt
run:npm install express nodemon webpack webpackcli webpack-node-externals
vue3：npm i vue vue-loader @babel/preset-env babel-loader
开发服务器和打包静态页面
跨请求状态污染的说明：在SPA中，整个生命周期中只有一个App对象实例，因为每个用户在使用浏览器SPA应用，应用模块都会重新初始化，这也是一种单例模式，然而，在SSR环境下，App应用模块只在服务器启动时初始化一次，同一个模块会在多个服务器请求之间被复用，这样我为什么我们用一个方法包裹生成实例
我们开是第一阶段，使用express搭建服务器，这里的导入的Vue文件无需打包编译，我们是把他转化成字符串的，这个服务器是需要打包的，我们运行在浏览器上，这样我们就得到了一个静态页面
const express = require("express");
import createApp from "../app";
import { renderToString } from "@vue/server-renderer";
import createRouter from "../router/index"
import { createMemoryHistory, createWebHistory } from "vue-router";
import { createPinia } from "pinia";
const app = express();
app.get("/*", async (req, res) => {
let app = createApp();
let appStringHtml = await renderToString(app);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
${appStringHtml}
</div>
</body>
</html>`);
});
app.listen(8080);
水合
这个阶段我们只需要把VUE的代码打包一份，也就是我们日常开发VUE的主文件
import {createApp} from "vue"
import App from "../App.vue"
import createRouter from "../router/index"
import { createPinia } from "pinia"
import { createWebHistory } from "vue-router"
let app=createApp(App)
app.mount("#app")
这时候我们的服务端也需要调整，我们通过express的静态资源暴露，来让浏览器找到我们的打包文件
const express = require("express");
import createApp from "../app";
import { renderToString } from "@vue/server-renderer"
const app = express();
app.use(express.static("build"))
app.get("/*", async (req, res) => {
let app = createApp();
let appStringHtml = await renderToString(app);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
${appStringHtml}
</div>
<script src="/client/client-bundle.js"></script>
</body>
</html>`);
});
app.listen(8080);
优化配置文件
npm install webpack-merge，抽出一个公共的文件，通过merge函数来组合
引入Router
import {createApp} from "vue"
import App from "../App.vue"
import createRouter from "../router/index"
import { createPinia } from "pinia"
import { createWebHistory } from "vue-router"
let app=createApp(App)
//这里也需要等待，再挂载
//这里的报错可能跟vue有关，不明晰
let router=createRouter(createWebHistory)
app.use(router)
try{
router.isReady().then(()=>{
app.mount("#app")
})
}catch(e){
console.log(e,"出错啦");
}
createRouter文件
import { createMemoryHistory, createRouter, createWebHistory } from "vue-router";
const routes=[
{
path:"/",
component:()=>import("../views/about.vue")
},{
path:"/home",
component:()=>import("../views/home.vue")
}
]
export default function(history){
return createRouter({
history,
routes
})
}服务器
const express = require("express");
import createApp from "../app";
import { renderToString } from "@vue/server-renderer";
import createRouter from "../router/index"
import { createMemoryHistory, createWebHistory } from "vue-router";
const app = express();
app.use(express.static("build"))
app.get("/*", async (req, res) => {
let app = createApp();
let router=createRouter(createMemoryHistory())
app.use(router)
await router.push(req.url || "/",) //没有指定路径就是 /
await router.isReady() //有可能是异步组件
let appStringHtml = await renderToString(app);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
${appStringHtml}
</div>
<script src="/client/client-bundle.js"></script>
</body>
</html>`);
});
app.listen(8080);
引入Pinia
完整的服务器
const express = require("express");
import createApp from "../app";
import { renderToString } from "@vue/server-renderer";
import createRouter from "../router/index"
import { createMemoryHistory, createWebHistory } from "vue-router";
import { createPinia } from "pinia";
const app = express();
app.use(express.static("build"))
app.get("/*", async (req, res) => {
let app = createApp();
let router=createRouter(createMemoryHistory())
app.use(router)
await router.push(req.url || "/",) //没有指定路径就是 /
await router.isReady() //有可能是异步组件
let pinia=createPinia()
app.use(pinia)
let appStringHtml = await renderToString(app);
res.send(`
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
${appStringHtml}
</div>
<script src="/client/client-bundle.js"></script>
</body>
</html>`);
});
app.listen(8080);
Pinia
import { defineStore } from "pinia"
export const useHomeStore=defineStore("home",{
state:()=>({
count:88
}),
actions:{
incremnet(){
this.count++
}
}
})Client
import {createApp} from "vue"
import App from "../App.vue"
import createRouter from "../router/index"
import { createPinia } from "pinia"
import { createWebHistory } from "vue-router"
let app=createApp(App)
//这里也需要等待，再挂载
let pinia=createPinia()
//这里的报错可能跟vue有关，不明晰
let router=createRouter(createWebHistory)
app.use(pinia)
app.use(router)
try{
router.isReady().then(()=>{
app.mount("#app")
})
}catch(e){
console.log(e,"出错啦");
}
初始Nuxt
特点和优势
也可以混合渲染，A页面CSR,B页面SSR
特点：nitro可以用来构建打包文件，支持跨平台部署
环境搭建
推荐第一种或第二种
App.vue
配置环境变量
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true },
runtimeConfig:{
appKey:"niuniu", //server 这里定义的变量会被.env文件同名的变量，这里的变量不会被打入process
public:{
baseUrl:"ibx" //server/client都可以访问
}
}
})
我们通过一个hook就可以拿到对应的环境变量
<script setup>
//判断代码执行环境
if(process.server){
console.log("运行在服务端");
}
const runtiemConfig=useRuntimeConfig()
console.log(runtiemConfig.appKey)
console.log(runtiemConfig.public.baseUrl)
</script>
head
appconfig
ssr
app配置head,页面配置head，组件配置head来SEO优化
Nuxt3基础
基础组件
ClientOnly可以实现自定义插槽 #fallback
<ClientOnly fallback="loding...">
<!-- 浏览器解析会较后才会显示效果 -->
<!-- node服务器不会解析他，也就是返回的页面没有,浏览器会根据js来渲染他 -->
<h3>dasda</h3>
<template #fallback>
<div>
fsfsfs
</div>
</template>
</ClientOnly>样式的编写
默认支持scss
全局样式：可以在App.vue直接编写全局变量，不推荐，配置某个样式为全局样式
export default defineNuxtConfig({
compatibilityDate: '2024-04-03',
devtools: { enabled: true },
css:[
"@/assets/styles/main.css" //配置文件为全局样式
]
})Scss的使用
推荐导入方法：上面这种会出现同名覆盖的情况
自动导入scss，会自动找到scss模块，vue什么lang=”Scss“，需要注意的是scss文件也会自动导入，也就是定义全局样式变量
资源的访问
public里的资源可以直接访问，背景图片也一样
访问assets，nuxt内预设别名 @ ~都代表根目录
字体图标
想知道类名，可以去看下载代码的html
新建页面和组件跳转
约定是路由，新建页面可以用命令行、
文件login下的index页面，支持文件夹下页面，和直接在pages下页面
也可以直接访问外链，target：”_blank“ 外链通过新的页面打开，to还有个别名href，可以指定active-class=”active-niu“，可以书写书写replace，替换当前页面，不会压页面栈 ，也可以直接使用a标签，通过href=”/login“
编程导航
不利于seo
function gotocatecory(){
//建议return 返回一个promise
return navigateTo({
path:"/catecory",
query:{
id:200
},{
replace:true
}
})
} 
最好在App.vue内监听
动态路由
查询字符串的参数使用，route.query
404
匹配不到的会来到...slug页面，写在子目录就会被子目录捕获，我们也可以pages下捕获，以前支持写一个404.vue现在已经不支持了，这个slug可以自定义，主要三个点，slug也可以使用route获取，他的值就算路径
Nuxt核心
嵌套路由，只需要创建同名的文件夹，Nuxtpage放入parent中
路由中间件
路由切换的时候这些中间件会执行，在浏览器刷新的时候外部的中间件也会执行，我们还可以定义全局中间件，我们在中间件做校验，路由跳转
路由验证
主要是用于做路由跳转携带参数的验证
layout
主要是做一个页面的公共抽取
渲染模式
浏览器和服务器都可以解析成javascript，都可以将vue组件呈现为HTML元素，此过程称为渲染，
SWR和SSG的区别是SSG只会渲染一次，静态页面，SWR我们可以设定时间，发生更改会被重新渲染
我们只需要配置指定路径下的渲染规则即可，我们可以全局配置 ssr指定整个程序是否ssr还是spa
插件的编写
实际上来说就是织入一些方法和属性进入Nuxt实例，也就是上下文，一般在App内注册，这样我们其他页面直接可以用
注意我们这些插件需要书写在plugins文件下，我们可以改为format.client.ts指定整个插件只有客户端可用
我们很可能会注册很多个插件，这些插件可能会互相依赖，可能有执行顺序，例如我们在一个插件里面再调用，NuxtApp.$getdata(),这时候我们可以给文件指定序号
生命周期 (lifecycle)
在插件中注册生命函数回调，会全部被被执行，在页面内监听，因为我们是setup语法，所以只能监听setup生命周期后的生命周期函数
总结来说，，在客户端的生命周期是正常执行的，而在服务端，如果是options API会回调beforeCreate和created，而copsition APi中仅会回调setup，所以我们直接在页面发送网络请求，因为setup本身就是一个生命周期
网络请求
获取数据主要是通过，支持server-client，api为$fetch，但是我们不怎么用，因为他会在服务端发起一次，然后又在客户端发送一次，不难理解，因为setup生命周期在两端都会回调，这时候我们就需要标识我们的网络请求，避免重复发送，官方也为我们提供了一个Hook，再刷新的时候，只有服务器会发送一次请求，在进行页面路由的时候，只有客户端会发送一次网络请求，爬虫是请求服务器，下载到临时目录的，所以不存在SEO问题
$fetch( "www.baidu.com",{
method:"POST"
})
//他只会在服务端发起请求
const res=await useAsyncData("id",()=>{
return $fetch()
})
//自动生成id，id自动生成为文件名+行号
const {data} = useFetch<IResult>("url",{method:"Post"})
注意post使用body，官方有指定options的TS格式，也就是第二个参数
两端都支持拦截
这里的返回值是无法直接像vue一样返回result.data.data，这里的返回值不会到结果中，我们可以自己重写，response.data={ name:"xxxx"}
关于lazy：我们的请求useFetch阻塞我们的路由，也就是跳转的时候，页面不会立即更新，而是等待网络请求完成才会挂载这个页面，可以在options中加载lazy:true，他会先挂载为空，watch确保我们能拿到数据，如果不使用watch，则有可能拿得到，有可能拿不到
简写
刷新页面，请求的状态，注意的是，我们可以传入响应式数据给请求体，当我们更改响应式数据的时候，这个请求也会重新被执行
import type { AsyncData, UseFetchOptions } from "#app";
type methodType="GET" | "POST"
class Niurequest{
request<T=any>( url:string,methods?:methodType,data?:any,options?:UseFetchOptions<T>):Promise<AsyncData<T,Error>>{
let newoptions={
baseURL:"",
method:methods||"GET",
...options
}
if(newoptions.method === "GET"){
newoptions.query=data || {}
}
if(newoptions.method==="POST"){
newoptions.body=data || {}
}
return new Promise((resolve,reject)=>{
useFetch<T>(url,newoptions as any).then(res=>{
resolve(res as AsyncData<T,Error>)
}).catch(err=>reject(err))
})
}
get<T>(url:string,methods:"GET",data?:any,options?:UseFetchOptions<T>){
return this.request(url,methods,data,options)
}
POST<T>(url:string,methods:"POST",data?:any,options?:UseFetchOptions<T>){
return this.request(url,methods,data,options)
}
}
export default new Niurequest()ServerAPI
我们可以直接编写接口，和操作数据库
homeinfo代码实现
export default defineEventHandler(async (event)=>{
// let query= getQuery(event)
// const body=await readBody(event)
// let {req,res}=event.node
return{
code:200,
data:{
name:"ninuinu",
age:88
}
}
})页面调用
//支持post/get
const {data}=await commonreq.request("/api/homeinfo")
console.log(data);
let cook=useCookie("token",{
maxAge:20 //s
})
cook.value="aaaa"全局状态共享Pinia
两种全局状态共享的区别
import { defineStore } from "pinia"
export type counterIType={
couter:number
}
//http://codercba.com:9060/oppo-nuxt/api/home/info
const useCounter=defineStore("counter",{
state:():counterIType=>({couter:88}),
actions:{
incrument(){
this.couter++
}
}
})
export default useCounter页面使用跟正常的pinia一样，他的action也支持异步网络请求
集成Element-plus
Nuxt项目
除了以下，其他就算正常Vue开发
集群部署
直接把打包的目录拖进来，但是使用node控制台断了，node进程也结束了，我们需要引入PM2
还可以打入一个端口号
编写配置文件，我们只需要运行这个配置文件即可，instance可以给的值有max，即根据cpu核数来决定开启几个实例
其实除了使用方式有些不同外，其他页面开发基本相同
263
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
