nuxt3：我们开始吧！
创始人
2024-02-25 08:53:30

一、背景介绍

2022 年 11 月 16 日，全球最大的 Nuxt 会议 Nuxt Nation 2022 在线举行，并正式发布了 Nuxt.js 3.0 的第一个稳定版本。Nuxt 3 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的现代重写，具有一流的 Typescript 支持，是两年多研究、社区反馈、创新和实验的结果。为每个人提供了一个愉快的 Vue 全栈开发体验。

因为nuxt优越的服务端渲染能力，所以对于nuxt3项目关注已久！我们开始吧！

二、官方网址

Nuxt 3 - 中文文档

Nuxt - The Intuitive Vue Framework

Announcing 3.0 · Nuxt

Nuxt - Installation

https://github.com/nuxt/create-nuxt-app/blob/master/README.md

三、新特性介绍

1、更轻量：以现代浏览器为目标的服务器部署和客户端产物最多可缩小 75 倍
2、更快：基于 nitro 提供动态代码分割能力，以优化冷启动性能
3、Hybrid：增量静态生成和其他的高级功能现在都成为可能
4、Suspense：在任意组件和导航前后都可以获取数据
5、Composition API：使用 Composition API 和 Nuxt 3 的 composables 实现真正的代码复用
6、Nuxt CLI：没有任何依赖，帮你轻松搭建项目和集成模块
7、Nuxt Devtools：通过直接在浏览器中查看信息和快速修复实现更快地工作
8、Nuxt Kit：具有 Typescript 和跨版本兼容性的全新模块开发
9、Webpack 5：更快的构建时间和更小的包大小，无需配置
10、Vite：使用 Vite 作为打包工具，体验闪电般快速的 HMR
11、Vue 3：Vue 3 是你下一个 Web 应用程序的坚实基础
12、TypeScript：使用原生 TypeScript 和 ESM 构建，无需额外步骤

Nuxt 3.0 稳定版正式发布，基于 Vue 3 的 Web 框架

四、重要概念

SPA应用：也就是单页应用，这些多是在客户端的应用，不能进行SEO优化（搜索引擎优化）。

SSR应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的URL，对SEO友好。

约定式路由：不需要配置路由，在根目录pages目录下创建业务页面，即可访问。

约定式配置：如layouts布局、middleware、plugins

五、启动基础项目

https://github.com/nuxt/create-nuxt-app/blob/master/README.md

5.1、创建项目：

创建nuxt3项目：

pnpm dlx nuxi init nuxt-app

 npx nuxi init nuxt3-app

5.2、安装依赖

pnpm install --shamefully-hoist

5.3、启动项目

启动成功

六、项目配置、基础使用

6.1、访问pages/index.vue

根目录app.vue，替换为：

pages/index.vue

pages/about.vue  

这样就可以访问页面了：

6.2、动态路由

6.2.1、目录结构

6.2.2、访问：/user

如果没有pages/user/index页面，只有[id].vue，访问的时候式404页面

6.2.3、访问：/user/1，动态路由，获取动态路由参数

{{$route.params.id}}

6.2.4、访问：/user/1?name=snow，动态路由，获取路由普通参数：

{{$route.query.name}}

 6.2.5、通过useRoute()获取路由信息

const route = useRoute()

6.3、路由跳转

经过测试一下几种方式均成功跳转。页面内容均正常展示。

6.3.1、

user-id

6.3.2、 

user-id-2

6.3.3、

user-id-3

6.3.4、编程式路由

6.4、加载静态资源

 nuxt项目tsconfig.json有配置，public目录下的文件可以省略/public目录，我这里测试不可以，后续会再研究

6.5、设置页面title，不会在页面展示，只会在页面title部分展示

6.5.1、

snow-title

如图：

 ctrl + u：

 6.5.2、使用useHead()方法

useHead({title: 'snow-title-2'
})

设置成功，useHead优先级小于标签。</p> <p>6.5.3、同理使用useHead设置页面的TDK信息</p> <pre><code><script setup lang="ts"> useHead({title: 'snow-title-2',meta: [{ name: 'description', content: 'snow-desc'},{ name: 'keywords', content: 'snow-kw'}] }) </script></code></pre> <p><img alt="" height="227" src="/uploadfile/202402/3348c8a56e10558.png" width="977" /></p> <p></p> <p><strong>6.6、layouts</strong></p> <p>6.6.1、理解：布局、页面布局、公共布局、基础布局</p> <p>6.6.2、根目录创建layouts目录，/layouts/default.vue</p> <pre><code><template><div>snow-default-layout</div><slot /> </template><script setup lang="ts"></script><style scoped></style> </code></pre> <p>6.6.3、app.vue</p> <pre><code><template><NuxtLayout><NuxtPage/></NuxtLayout><!-- <div><NuxtWelcome /></div> --> </template> </code></pre> <p><img alt="" height="533" src="/uploadfile/202402/08eb6cda3a198c9.png" width="991" /></p> <p> 6.6.4、</p> <p><img alt="" height="265" src="/uploadfile/202402/53f6944ff7d8ce.png" width="648" /></p> <p> 6.6.5、某页面不想使用layout：</p> <pre><code>definePageMeta({layout: false })</code></pre> <p>6.6.6、某页面使用指定layout</p> <p><img alt="" height="151" src="/uploadfile/202402/829924ce57b3496.png" width="345" /></p> <pre><code>definePageMeta({layout: 'layout-snow' })</code></pre> <p>  6.6.7、动态设置layout</p> <pre><code>const router = useRoute() function enableLayout () {router.meta.layout = "layout-snow" }</code></pre> <p>6.6.8、全局设置，指定layout</p> <pre><code class="hljs"><template><NuxtLayout :name="layoutSnow"><NuxtPage/></NuxtLayout><!-- <div><NuxtWelcome /></div> --> </template> <script setup lang="ts"> const layoutSnow = ref("layout-snow") </script></code></pre> <p><strong>6.7、plugins</strong></p> <p>/plugins/index.ts</p> <pre><code class="hljs">export default defineNuxtPlugin(()=>{return {provide: {hello: (msg: string) => `hello ${msg}`}} })</code></pre> <p>/pages/plugin.vue</p> <pre><code class="hljs"><template><div>snow-plugin</div> </template><script setup lang="ts"> const { $hello } = useNuxtApp() console.log('9', $hello('world')) </script><style scoped> </style> </code></pre> <p><img alt="" height="505" src="/uploadfile/202402/d0d0a1ffdba2e34.png" width="958" /></p> <p><strong>6.8、middleware</strong></p> <p>/middleware/auth.ts</p> <pre><code class="hljs">export default defineNuxtRouteMiddleware((to, from)=>{console.log("auth") }) </code></pre> <p>/middleware/snow.ts</p> <pre><code class="hljs">export default defineNuxtRouteMiddleware((to, from)=>{console.log("snow") }) </code></pre> <p>/pages/plugin.vue</p> <pre><code class="hljs"><template><div>snow-plugin</div> </template><script setup lang="ts">definePageMeta({middleware: ["auth", "snow"] })</script><style scoped> </style> </code></pre> <p> 如图：</p> <p><img alt="" height="544" src="/uploadfile/202402/1f4de168c5f3.png" width="910" /></p> <p>6.9、封装接口请求</p> <p>待补充</p> <p>6.10、多环境开发</p> <p>待补充</p> <p>6.11、其他内容</p> <p>待补充</p> <p><strong>七、过程记录</strong></p> <p>7.1、init项目不成功</p> <p><img alt="" height="229" src="/uploadfile/202402/329cf2b6a80092a.png" width="759" />解：墙内的同学可能创建不成功，这里推荐一个链接：https://github.com/nuxt/starter</p> <p>7.2、useHead接收参数如下：</p> <pre><code>useHead(meta: Computable<MetaObject>): voidinterface MetaObject extends Record<string, any> {charset?: stringviewport?: stringmeta?: Array<Record<string, any>>link?: Array<Record<string, any>>style?: Array<Record<string, any>>script?: Array<Record<string, any>>noscript?: Array<Record<string, any>>titleTemplate?: string | ((title: string) => string)title?: stringbodyAttrs?: Record<string, any>htmlAttrs?: Record<string, any> }</code></pre> <pre><code>charset: 指定 HTML 的字元编码，预设为 utf-8。 viewport: 设定网页的可见区域，预设为 width=device-width, initial-scale=1。 meta: 接受一个阵列，阵列中的每个元素，都將会建立一个 <meta> 标记，元素中物件的属性将对应至的属性。 link: 接受一个阵列，阵列中的每个元素，都将会建立一个 <link> 标记，元素中物件的属性将对应至的属性。 style: 接受一个阵列，阵列中的每個元素，都将会建立一个 <style> 标记，元素中物件的属性将对应至的属性。 script: 接受一个阵列，阵列中的每個元素，都将会建立一个 <script> 标记，元素中物件的属性将对应至的属性。 noscript: 接受一个阵列，阵列中的每個元素，都将会建立一个 <noscript> 标记，元素中物件的属性将对应至的属性。 titleTemplage: 接受一個字串或函數，用來动态的设定该页面元件的网页标题。 title: 在页面元件设置静态的网页标题。 bodyAttrs: 接受一个物件，设置网页中标识的属性，物件中的属性将对应至的属性。 htmlAttrs: 接受一个物件，设置网页中标识的属性，物件中的属性将对应至的属性。</code></pre> <p>理解useHead：相当于设置页面<head>标签内相关内容。</p> <p></p> <p><strong>八、欢迎交流指正，关注我，一起学习。</strong></p> <p><img alt="" height="425" src="/uploadfile/202402/d99567d75aee0.png" width="859" /></p> <p> </p> <p><strong>参考链接：</strong></p> <p>[Day 24] Nuxt 3 搜尋引擎最佳化 (SEO) 與 HTML Meta Tag - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天</p> <p>Nuxt3-动态更改meta信息（关键词、标题、描述）_fat_shady的博客-CSDN博客</p> <p>令人愉快的 Nuxt3 教程 (一): 应用的创建与配置 - 知乎</p> <p>技术胖-Nuxt3从零到实战手把手 免费视频图文教程</p> <p>Nuxt.js 3.0 正式发布！ - 知乎</p> <p></p> <!--end::Text--> </div> <!--end::Description--> <div class="mt-5"> <!--关键词搜索--> </div> <div class="mt-5"> <p class="fc-show-prev-next"> <strong>上一篇：</strong><a href="/life/3402306.html">伤感的法语句子</a><br> </p> <p class="fc-show-prev-next"> <strong>下一篇：</strong><a href="/life/3402308.html">此时已春暖花开 所有却不能皆所愿</a> </p> </div> <!--begin::Block--> <div class="d-flex flex-stack mb-2 mt-10"> <!--begin::Title--> <h3 class="text-dark fs-5 fw-bold text-gray-800">相关内容</h3> <!--end::Title--> </div> <div class="separator separator-dashed mb-9"></div> <!--end::Block--> <div class="row g-10"> </div> </div> <!--end::Table widget 14--> </div> <!--end::Col--> <!--begin::Col--> <div class="col-xl-4 mt-0"> <!--begin::Chart Widget 35--> <div class="card card-flush h-md-100"> <!--begin::Header--> <div class="card-header pt-5 "> <!--begin::Title--> <h3 class="card-title align-items-start flex-column"> <!--begin::Statistics--> <div class="d-flex align-items-center mb-2"> <!--begin::Currency--> <span class="fs-5 fw-bold text-gray-800 ">热门资讯</span> <!--end::Currency--> </div> <!--end::Statistics--> </h3> <!--end::Title--> </div> <!--end::Header--> <!--begin::Body--> <div class="card-body pt-3"> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3-tt.byteimg.com/origin/pgc-image/9ca1693124864c45947909a1590293a1?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434573.html" class="text-dark fw-bold text-hover-primary fs-6">埃菲尔铁塔在哪 中国仿建埃菲尔...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2019年4月26日，广西南宁市，街头惊现一座巨型山寨版埃菲尔铁塔，高约20米，白色塔身，造型逼真，...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/b04fefed77ad422aa38dc6e704dd1823?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434572.html" class="text-dark fw-bold text-hover-primary fs-6">我喜欢你韩语怎么说 sikid...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p1-tt.byteimg.com/origin/pgc-image/8f50304f5bc04b2aa216387809669921?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434571.html" class="text-dark fw-bold text-hover-primary fs-6">苗族的传统节日 贵州苗族节日有...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/002f770423f6444da282785960702fa7?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434570.html" class="text-dark fw-bold text-hover-primary fs-6">北京的名胜古迹 北京最著名的景...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p26.toutiaoimg.com/origin/pgc-image/e2ed2b3a08484bf1be3e029f3cd7d763?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434569.html" class="text-dark fw-bold text-hover-primary fs-6">应用未安装解决办法 平板应用未...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p26.toutiaoimg.com/origin/pgc-image/4e1206de96d54744b5a8a2ce8f019cd1?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434568.html" class="text-dark fw-bold text-hover-primary fs-6">脚上的穴位图 脚面经络图对应的...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">人体穴位作用图解大全更清晰直观的标注了各个人体穴位的作用，包括头部穴位图、胸部穴位图、背部穴位图、胳...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/pgc-image/5d7b1f820a4b403aa136bac748c8be9f?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434567.html" class="text-dark fw-bold text-hover-primary fs-6">长白山自助游攻略 吉林长白山游...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p6.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/0be6682557a84445b7ee741d4acdf41f?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434566.html" class="text-dark fw-bold text-hover-primary fs-6">世界上最漂亮的人 世界上最漂亮...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">此前在某网上，选出了全球265万颜值姣好的女性。从这些数量庞大的女性群体中，人们投票选出了心目中最美...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/pgc-image/28853d21814f40fdbfae24b645065016?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434565.html" class="text-dark fw-bold text-hover-primary fs-6">猫咪吃了塑料袋怎么办 猫咪误食...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">你知道吗？塑料袋放久了会长猫哦！要说猫咪对塑料袋的喜爱程度完完全全可以媲美纸箱家里只要一有塑料袋的响...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/b04fefed77ad422aa38dc6e704dd1823?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434564.html" class="text-dark fw-bold text-hover-primary fs-6">我喜欢你韩语怎么说 sikid...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7"></span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3-tt.byteimg.com/origin/pgc-image/9ca1693124864c45947909a1590293a1?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434563.html" class="text-dark fw-bold text-hover-primary fs-6">埃菲尔铁塔在哪 中国仿建埃菲尔...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">2019年4月26日，广西南宁市，街头惊现一座巨型山寨版埃菲尔铁塔，高约20米，白色塔身，造型逼真，...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/tos-cn-i-qvj2lq49k0/002f770423f6444da282785960702fa7?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434562.html" class="text-dark fw-bold text-hover-primary fs-6">北京的名胜古迹 北京最著名的景...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">北京从元代开始，逐渐走上帝国首都的道路，先是成为大辽朝五大首都之一的南京城，随着金灭辽，金代从海陵王...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p1-tt.byteimg.com/origin/pgc-image/8f50304f5bc04b2aa216387809669921?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434561.html" class="text-dark fw-bold text-hover-primary fs-6">苗族的传统节日 贵州苗族节日有...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">【岜沙苗族芦笙节】岜沙，苗语叫“分送”，距从江县城7.5公里，是世界上最崇拜树木并以树为神的枪手部落...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p26.toutiaoimg.com/origin/pgc-image/e2ed2b3a08484bf1be3e029f3cd7d763?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434560.html" class="text-dark fw-bold text-hover-primary fs-6">应用未安装解决办法 平板应用未...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">---IT小技术，每天Get一个小技能！一、前言描述苹果IPad2居然不能安装怎么办？与此IPad不...</span> </div> <!--end::Title--> </div> <!--begin::Item--> <div class="d-flex flex-stack mb-7"> <!--begin::Symbol--> <div class="symbol symbol-60px symbol-2by3 me-4"> <div class="symbol-label" style="background-image: url('https://p3.toutiaoimg.com/origin/pgc-image/5d7b1f820a4b403aa136bac748c8be9f?from=pc')"></div> </div> <!--end::Symbol--> <!--begin::Title--> <div class="m-0"> <a href="/changshi/4434559.html" class="text-dark fw-bold text-hover-primary fs-6">长白山自助游攻略 吉林长白山游...</a> <span class="text-gray-600 fw-semibold d-block pt-1 fs-7">昨天介绍了西坡的景点详细请看链接：一个人的旅行，据说能看到长白山天池全凭运气，您的运气如何？今日介绍...</span> </div> <!--end::Title--> </div> </div> <!--end::Body--> </div> <!--end::Chart Widget 35--> </div> <!--end::Col--> </div> </div> <!--end::Content container--> </div> <!--end::Content--> </div> <!--end::Content wrapper--> <!--begin::Footer--> <div id="kt_app_footer" class="app-footer"> <!--begin::Footer container--> <div class="app-container container-xxl d-flex flex-column flex-md-row flex-center flex-md-stack py-3"> <!--begin::Copyright--> <div class="text-dark order-2 order-md-1"> <span class="text-muted fw-semibold me-1">2026 ©</span> 办公百科网<a href="http://fund.caiding5.cn/">才丁消费网</a><a href="http://www.zzldhg.com/">零点化工网</a><a href="http://www.hcygmm.com/">汇川网</a><a href="http://learn.office369.com">学习</a><a href="http://www.zzdfzj.cn/">东方游戏</a><a href="http://share.office369.com">办公分享</a><div style="display:none"><a href="http://www.80hlw.com">八零互联网</a> <a href="http://ask.kcwzh.com">开创问答网</a> <a href="http://www.office369.com">办公应用网</a><a href="https://www.mingxing100.com">明星一百</a><a href="http://tousu.huashangw.com">商务投诉网</a></div><a href="https://www.bitekongjian.com/">比特空间</a><a href="http://lishi.fadeduo.com/">历史</a><a href="http://tiyu.fadeduo.com/">体育</a><a href="http://tansuo.caiding5.cn/">财丁</a><a href="http://che.yuansudz.com/">元素汽车</a><a href="http://cn.yuansudz.com/">元素科技</a><a href="http://www.kthtea.cn/">太和茶叶网</a><a href="http://cn.yexian114.com/">野仙生活网</a> <a href="http://cn.gangyiku.com/">港易生活网</a><a href="http://www.bgjj.cc/">布谷家居网</a><a href="http://health.office369.com/">办公家居网</a><a href="http://travel.office369.com">办公旅游网</a><a href="http://ask.bgjj.cc/">家居问答网</a><a href="https://tuku.caiding5.net/">彩盯图库网</a><a href="https://www.picsok.com/">PICSOK</a><a href="http://xiaofei.caiding5.cn/">才丁消费网</a> </div> <!--end::Copyright--> <!--begin::Menu--> <ul class="menu menu-gray-600 menu-hover-primary fw-semibold order-1"> <li class="menu-item"> <a href="/changshi/" target="_blank" class="menu-link px-2">办公常识</a> </li> <li class="menu-item"> <a href="/baike/" target="_blank" class="menu-link px-2">办公百科</a> </li> <li class="menu-item"> <a href="/life/" target="_blank" class="menu-link px-2">办公生活</a> </li> </ul> <!--end::Menu--> </div> <!--end::Footer container--> </div> <!--end::Footer--> </div> <!--end:::Main--> </div> <!--end::Wrapper--> </div> <!--end::Page--> </div> <!--end::App--> <div id="kt_scrolltop" class="scrolltop" data-kt-scrolltop="true"> <!--begin::Svg Icon | path: icons/duotune/arrows/arr066.svg--> <span class="svg-icon"> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"> <rect opacity="0.5" x="13" y="6" width="13" height="2" rx="1" transform="rotate(90 13 6)" fill="currentColor"></rect> <path d="M12.5657 8.56569L16.75 12.75C17.1642 13.1642 17.8358 13.1642 18.25 12.75C18.6642 12.3358 18.6642 11.6642 18.25 11.25L12.7071 5.70711C12.3166 5.31658 11.6834 5.31658 11.2929 5.70711L5.75 11.25C5.33579 11.6642 5.33579 12.3358 5.75 12.75C6.16421 13.1642 6.83579 13.1642 7.25 12.75L11.4343 8.56569C11.7467 8.25327 12.2533 8.25327 12.5657 8.56569Z" fill="currentColor"></path> </svg> </span> <!--end::Svg Icon--> </div> <!--begin::Javascript--> <script>var hostUrl = "/static/default/pc/";</script> <!--begin::Global Javascript Bundle(mandatory for all pages)--> <script src="/static/default/pc/plugins/global/plugins.bundle.js"></script> <script src="/static/default/pc/js/scripts.bundle.js"></script> <!--end::Global Javascript Bundle--> <!--end::Javascript--> </body> <!--end::Body--> </html>