正文

从零开始：Vue3与Nuxt.js打造全栈应用实战指南

/0 浏览量
0329

引言

在当前的前端开发领域，Vue.js 和 Nuxt.js 是两个非常流行的框架，它们可以让你更高效地构建全栈应用。Vue.js 是一个渐进式JavaScript框架，用于构建用户界面；而Nuxt.js 则是一个基于Vue.js的通用应用框架，可以用来创建服务端渲染（SSR）或静态站点生成（SSG）的应用。本指南将从零开始，详细介绍如何使用Vue3和Nuxt.js打造全栈应用。

环境搭建

在开始之前，我们需要准备以下环境：

  1. Node.js：Nuxt.js 需要 Node.js 环境，建议使用 LTS 版本。
  2. Vue CLI：Vue CLI 是一个基于 Vue.js 的命令行工具，用于快速搭建项目。
  3. 文本编辑器：例如 Visual Studio Code 或 Sublime Text。

安装Node.js和Vue CLI

# 通过包管理器安装Node.js
sudo apt-get update
sudo apt-get install nodejs npm

# 安装Vue CLI
npm install -g @vue/cli

创建Nuxt.js项目

# 创建一个名为 my-nuxt-app 的新项目
npx create-nuxt-app my-nuxt-app

# 进入项目目录
cd my-nuxt-app

Vue3基础知识

在开始使用Nuxt.js之前，我们需要对Vue3有一定的了解。以下是一些Vue3的基础知识：

安装Vue3

npm install vue@next

创建Vue3组件

以下是一个简单的Vue3组件示例：

<template>
  <div>
    <h1>Hello, Vue3!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

Vue3生命周期钩子

Vue3提供了生命周期钩子，用于在组件的不同阶段执行操作。以下是一些常见的生命周期钩子：

  • mounted()：组件挂载到DOM后执行。
  • updated()：组件更新后执行。
  • beforeDestroy()：组件销毁前执行。

Nuxt.js基础

了解Nuxt.js结构

Nuxt.js项目通常包含以下目录结构：

my-nuxt-app/
├── components/
│   ├── MyComponent.vue
├── static/
│   ├── image/
│   └── css/
├── pages/
│   ├── index.vue
│   └── about.vue
├── plugins/
│   └── my-plugin.js
├── store/
│   └── index.js
├── nuxt.config.js
└── package.json

路由和页面

Nuxt.js使用Vue Router进行页面路由管理。在pages/目录下创建.vue文件，即可创建一个新页面。

<template>
  <div>
    <h1>About Page</h1>
  </div>
</template>

<script>
export default {
  name: 'AboutPage'
}
</script>

服务器端渲染（SSR）

Nuxt.js支持SSR，这意味着Nuxt.js会预渲染每个页面，并将其作为静态HTML发送给客户端。这可以提高应用的性能和SEO。

实战案例：搭建一个全栈应用

创建页面

在pages/目录下创建一个名为index.vue的新页面：

<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到我的全栈应用！</p>
  </div>
</template>

<script>
export default {
  name: 'IndexPage'
}
</script>

创建组件

在components/目录下创建一个名为HelloWorld.vue的新组件：

<template>
  <div>
    <h1>Hello, Vue3!</h1>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld'
}
</script>

使用组件

在pages/index.vue页面中引入并使用HelloWorld组件：

<template>
  <div>
    <h1>首页</h1>
    <p>欢迎来到我的全栈应用！</p>
    <HelloWorld />
  </div>
</template>

<script>
import HelloWorld from '~/components/HelloWorld.vue'

export default {
  components: {
    HelloWorld
  }
}
</script>

启动开发服务器

npm run dev

此时，打开浏览器访问http://localhost:3000，你应该能看到一个包含“Hello, Vue3!”字样的页面。

总结

通过本文，你了解了Vue3和Nuxt.js的基础知识，并学会了如何创建一个简单的全栈应用。希望这个实战指南能帮助你入门全栈开发。在实际项目中，你可能需要学习更多高级功能，例如状态管理、路由守卫、API 接口等。祝你学习愉快！

-- 展开阅读全文 --