Nuxt 3 开发配置

nuxt3
Created 9/16/2022
Updated 3/10/2023

Nuxt 3 开发配置

参考

在开发前,需要在系统预先安装以下软件和插件:

  • Node.js
    提示

    请确保 Node.js 的版本高于 16.11

    可以在终端输入以下代码查看系统已安装的 Node.js 版本

    bash
    node --version
  • Visual Studio Code
  • Volar 插件
    提示

    并停掉 VSCode 内置的 TypeScript 插件,开启 Take Over Mode 只通过 Volar 提供 Vue 和 TypeScript 的支持。

    • Volar 版本需要高于 0.27.17
    • 按下快捷键 Ctrl + Shift + P 呼出命令面板,并输入 Extensions: Show Built-in Extensions 命令,打开内置的插件
    • 找到 TypeScript and JavaScript Language Features 插件,右键点击,选择 Disable (Workspace) 菜单选项,在当前项目的工作区中禁止使用内置的 TypeScript 插件
    • 重启 VSCode
    • 还要记得在 Nuxt 项目的配置文件 nuxt.config.ts 进行以下设置,以取消为 *.vue 文件生成相应的 shim 文件(TS 声明文件)
      ts
      // ...
      export default defineNuxtConfig({
        typescript: {
          shim: false
        }
      })

新建项目

Nuxt 官方提供了一个 CLI 命令行工具 nuxi,在终端输入以下命令就可以新建一个 Nuxt 3 项目

bash
# <project-name> 替换为项目的名称
npx nuxi init <project-name>
其他模板

以上命令其实使用了一个名为 v3 的模板(默认模板)作为新项目的起手式。

Nuxt 3 还提供了其他模板,具体可以查看 nuxt.new 网页 或这个 Github 仓库

bash
# 通过参数 -t 设置所使用的模板,名为 content
# 项目的名称为 blog
npx nuxi init -t content blog

然后使用 VSCode 打开该项目,并在 VSCode 整合的终端输入以下命令,安装项目依赖

bash
npm install

最后在终端输入以下命令,启动一个本地服务器,预览项目效果

bash
npm run dev -- -o
提示

除了使用 CLI 在本地开发,还可以尝试一些在线编程平台,如 StackBlitzCodeSandbox


Copyright © 2024 Ben

Theme BlogiNote

Icons from Icônes