Vue.js · Nuxt 指南 · 1/6

Getting Started with Vue and Nuxt

本章目前僅提供英文版。

This chapter walks through preparing Node.js, scaffolding a Vue project with create-vue and a Nuxt project with nuxi, and running the dev server. It also covers editor setup. Keep the relationship in mind: Vue is the UI framework, and Nuxt is a full-stack framework that adds routing conventions, server rendering and server APIs on top of it.

Prepare Node.js

All Vue and Nuxt tooling runs on Node.js. Install the LTS release from nodejs.org and check the versions. npm ships with Node.js, but pnpm, Yarn and Bun work just as well.

node --version
npm --version

Scaffold a Vue project with create-vue

The official scaffolding tool for Vue is create-vue. It generates a project that uses Vite as its build tool and asks a few questions along the way.

npm create vue@latest

The prompts look roughly like this. For a first project, TypeScript, Vue Router, Pinia and Vitest are good choices; everything else can be added later.

Prompt	Meaning
Project name	Name of the folder to create
TypeScript	Use .ts files and script setup lang="ts"
Router	Add Vue Router for navigating between views
Pinia	Add the official store for shared state
Vitest	Add a unit testing setup
End-to-End Testing	Add a browser testing tool such as Playwright
ESLint and Prettier	Add linting and formatting

Once the project exists, install the dependencies and start the dev server.

cd my-vue-app
npm install
npm run dev

Open the address printed in the terminal (by default http://localhost:5173) to see the starter page. The Vite dev server supports hot module replacement (HMR): when you save a .vue file, the change appears without a full reload, and component state is usually preserved.

Edit your first component

Open src/App.vue and replace its contents with the following. Anything declared inside <script setup> (variables, functions, imported components) is available directly in the template.

<script setup lang="ts">
import { ref } from "vue";

const name = ref("Vue");
const count = ref(0);
</script>

<template>
  <h1>Hello, {{ name }}!</h1>
  <input v-model="name" />
  <button @click="count++">Clicked {{ count }} times</button>
</template>

對本章有疑問嗎？

Getting Started with Vue and Nuxt

Prepare Node.js

Scaffold a Vue project with create-vue

Edit your first component

Scripts in package.json

Scaffold a Nuxt project with nuxi

Editor setup

Summary

0 則留言