3-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》上机准备

DVTOP

已于 2022-11-24 10:03:13 修改

阅读量769

点赞数

分类专栏： Nuxt3中文开发教程文章标签： javascript 前端 vue.js

于 2022-11-23 09:48:34 首次发布

本文链接：https://blog.csdn.net/DVTOP/article/details/127994254

版权

本文是《手把手教您使用Nuxt3框架》的上机准备部分，涵盖知识准备、Node.js环境配置、Visual Studio Code安装与设置，以及创建Nuxt3项目的步骤。读者需了解JavaScript和Vue基础知识。教程推荐使用最新LTS版本的Node.js，建议使用VS Code作为开发工具，并安装相关扩展，如Volar、Auto Rename Tag等。

摘要由CSDN通过智能技术生成

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例源码下载和在线预览网址：https://www.dvtop.cn

本教程是在macOS Monterey 12.6和Windows10 Professional专业版上验证通过，如果在Linux上使用，安装对应操作系统版本的工具即可。

注意：在命令行中，如果有sudo时macOS 支持，Linux和Windows需要删除sudo后执行命令。在命令行中，注意空格都为半角。

推荐初学者使用本教程验证通过的操作系统版本或相近版本进行实践。

3.1 知识准备

如果您对JavaScript不了解，请先访问附2网站简单学习后再使用本教程。Nuxt3推荐使用Typescript（是JavaScript的一个超集），可增加代码的可读性和可维护性，但也可以使用JavaScript语言，代码文件使用扩展名*.js或*.ts区分，在Vue中使用<script lang="js"></script>或<script lang="ts"></script>来区分。对于初学者，推荐先使用JavaScript（js）。

如果您对Vue不了解，请先访问附3网站简单学习后再使用本教程。Nuxt3使用Vue3的script写法，如选项式API或组合式API（推荐），再引用Nuxt的API一起使用，两种方式不能同时出现。

1、Vue3 script选项式Options API写法

<script>
  import { defineComponent } from 'vue'
  export default defineComponent({
    data() {
      return {
        message: 'Hello!'
      }
    },
    methods: {
      handleChange(event) {
        console.log(event.target.value)
      }
    }
  })
</script>

2、Vue3 script组合式Composition API写法1