Nuxt3使用介绍 | 青训营

无敌矿工
503 阅读4分钟

什么是NUXT,

  • 在了解 Nuxt 之前，我们先来了解一下创建一个现代应用程序，所需的技术：

    • 支持数据双向绑定 和 组件化（ Nuxt 选择了Vue.js ）。
    • 处理客户端的导航（ Nuxt 选择了vue-router ）。
    • 支持开发中热模块替换和生产环境代码打包（ Nuxt支持webpack 5和Vite ）。
    • 兼容旧版浏览器，支持最新的 JavaScript 语法转译（ Nuxt使用esbuild ）。
    • 应用程序支持开发环境服务器，也支持服务器端渲染 或 API接口开发。
    • Nuxt 使用 h3来实现部署可移植性（h3是一个极小的高性能的http框架） ✓ 如：支持在 Serverless、Workers 和 Node.js 环境中运行。

  • Nuxt 是一个 直观的 Web 框架 

    • 自 2016 年 10 月以来，Nuxt专门负责集成上述所描述的事情 ，并提供前端和后端的功能。
    • Nuxt 框架可以用来快速构建下一个 Vue.js 应用程序，如支持 CSR 、SSR、SSG 渲染模式的应用等。

NUXT3的特点

  • Vue技术栈 
    • Nuxt3 是基于 Vue3 + Vue Router + Vite 等技术栈，全程 Vue3+Vite 开发体验（Fast）。
  • 自动导包 
    • Nuxt 会自动导入辅助函数、组合 API和 Vue API ，无需手动导入。
    • 基于规范的目录结构，Nuxt 还可以对自己的组件、 插件使用自动导入。
    • 约定式路由（目录结构即路由） 
      • Nuxt 路由基于vue-router，在 pages/ 目录中创建的每个页面，都会根据目录结构和文件名来自动生成路由
    • 渲染模式：Nuxt 支持多种渲染模式（SSR、CSR、SSG等）
    • 利于搜索引擎优化：服务器端渲染模式，不但可以提高首屏渲染速度，还利于SEO
  • 服务器引擎
    • 在开发环境中，它使用 Rollup 和 Node.js 。 
    • 在生产环境中，使用 Nitro 将您的应用程序和服务器构建到一个通用.output目录中。 ✓ Nitro服务引擎提供了跨平台部署的支持，包括 Node、Deno、Serverless、Workers等平台上部署。

image.png

NUXT3搭建环境

  • 在开始之前确保已安装推荐的设置

    • Node.js 最新版 或者大于 16.11
    • Vscode
      • Volar，Eslint，prettier

  • 命令行工具

    • 方式一： npx nuxi init hello_nuxt
    • 方式二： pnpm dlx nuxi init hellow-nuxt
    • 方式三： npm install nuxi && nuxi init hello-nuxt

  • 运行项目 cd hello-nuxt

    • yarn install
    • pnpm install --shamefully-hoist (创建一个扁平的node_modules,类似于npm和yarn)

项目报错

  • 执行 npx nuxi init 01-hello-nuxt 报如下错误，主要是网络不通导致：
  • 解决方案：
    • 第一步：ping raw.githubusercontent.com 检查是否通
    • 第二步：如果访问不通，代表是网络不通
    • 第三步：配置 host，本地解析域名 ✓ Mac电脑 host 配置路径： /etc/hosts ✓ Win 电脑 host 配置路由：c:/Windows/System32/drivers/etc/hosts
    • 第四步：在host文件中新增一行 ，编写如下配置： ✓ 185.199.108.133 raw.githubusercontent.com
    • 第五步：重新ping域名，如果通了就可以用了
    • 第六步：重新开一个终端创建项目即可

NUXT3 目录结构

image.png

应用入口APP.vue

默认情况下，Nuxt会将此文件视为入口点，并为应用程序的每个酷游呈现其内容，常用于

  • 定义页面布局Layout或自定义布局，如：NuxtLayout
  • 定义路由占位，如NuxtPage
  • 编写全局样式
  • 全局监听路由等等

NUxt 配置（nuxt.config）

  • nuxt.config.ts 配置文件位于项目的根目录，可对Nuxt进行自定义配置。比如，可以进行如下配置：
    • runtimeConfig：运行时配置，即定义环境变量
      • 可通过.env文件中的环境变量来覆盖，优先级（.env > runtimeConfig）
      • .env的变量会打入到process.env中，符合规则的会覆盖runtimeConfig的变量
      • .env一般用于某些终端启动应用时动态指定配置，同时支持dev和pro
    • appConfig： 应用配置，定义在构建时确定的公共变量，如：theme
    • 配置会和 app.config.ts 的配置合并（优先级 app.config.ts > appConfig）
    • app：app配置
      • head：给每个页面上设置head信息，也支持 useHead 配置和内置组件。
        * ssr：指定应用渲染模式  * router：配置路由相关的信息，比如在客户端渲染可以配置hash路由 * alias：路径的别名，默认已配好  * modules：配置Nuxt扩展的模块，比如：@pinia/nuxt @nuxt/image
        * routeRules：定义路由规则，可更改路由的渲染模式或分配基于路由缓存策略（公测阶段） * builder：可指定用 vite 还是 webpack来构建应用，默认是vite。如切换为 webpack 还需要安装额外的依赖。

暂时分享到这里。。。。。。。后续更新

avatar
文章
阅读
粉丝