Nuxt3-01项目创建

nuxt3 特性

• nuxt3是一款服务端渲染框架
• 前端选择vue作为视图引擎
• 后端选择nitro作为服务引擎，nitro 的基础是 rollup 和 h3：一个为高性能和可移植性而生的最小 http 框架(很多用法可以参考h3文档)
• 同时支持 vite 或 webpack5 作为构建工具（最好不要混用）
• 最大的特点是：自动化和基于约定

csr vs ssr

csr 客户端渲染

一般指浏览器请求获取到spa应用程序构建的js文件，然后浏览器再把js文件解析成html

ssr 服务端渲染

后端服务（一般用使用node）解析成静态html返回给浏览器

ssr 的优缺点

• 优点：

  • 减少白屏
  • SEO 友好

• 缺点：

  • 服务端的压力会增加
  • 开发成本会高

环境

这个一定要说清楚，因为nuxt3目前还没发布稳定版本，一切皆有可能。

• node v16.16.0
• npm v8.11.0
• "nuxt": "3.0.0-rc.13"

开始安装

# 初始化
npx nuxi init nuxt3-tpl

code nuxt3-tpl

yarn

npm run dev

http://localhost:3000/

配置host和port

根目录新建.env文件

NUXT_PORT=8001
NUXT_HOST=nuxt3.tpl.com

配置https

package.json 添加

  "scripts": {
    "devs": "nuxt dev --https",
  },

约定式

nuxt3 约定了指定的目录结构，实现一些自动化的工作。比如注册路由、api、vue组件等

├─assets             // 静态资源
├─components         // 该目录下的vue组件，无需引入直接使用
├─composables        // 全局共享状态
├─content
├─layouts            // 页面框架布局,一般包含header、footer等
├─middleware         // 同vue-router钩子
├─pages              // 根据目录名自动生成页面路由
├─plugins            // 插件
    └─xxx.client.ts  // 仅在客户端执行
    └─xxx.server.ts  // 仅在服务端执行
    └─xxx.ts         // 
├─public             // 静态服务
    └─favicon.ico    // 
├─server             // 服务端nitro
    └─api
    └─routes
    └─middleware
    └─plugins
├─app.config.ts      // app 配置
├─app.vue            // 启动入口不可删除
├─nuxt.config.ts     // 项目配置文件