Vue Installation

To start developing projects with Vue 3, you need to set up your development environment first. This typically includes installing Node.js and using the official scaffolding tool to create a new project.

1. Environment Setup: Node.js

Vue development depends on Node.js. Node.js is a JavaScript runtime environment that allows you to run JavaScript code on the server side. More importantly, it comes with npm (Node Package Manager), the world's largest software registry, which you can use to install Vue and its related tool libraries.

• Check Node.js version: Open your terminal (Command Prompt or PowerShell on Windows, Terminal on macOS), then enter the following command:

  node -v

  Vue 3 requires Node.js version not lower than 16.0. If your version is too low or not installed, please download and install the latest LTS (Long-Term Support) version from the Node.js official website.

2. Creating a Vue Project (Recommended Method)

Now, the simplest and most recommended way to create a Vue project is to use the official scaffolding tool create-vue.

In your terminal, cd to the folder where you want to create the project, then run the following command:

npm create vue@latest

This command will install and execute create-vue, which will guide you through the project creation process. You'll see a series of options that you can choose based on your project needs:

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit Testing? … No / Yes
✔ Add an End-to-End Testing Solution? › No
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

• For beginners: If you're not sure how to choose, you can press Enter all the way to select the default No. This will create the most basic, pure Vue project.
• Project name: Give your project a name, for example my-first-vue-app.

3. Install Dependencies and Start Project

After the scaffolding tool creates the project structure, follow the terminal prompts to enter the project directory and install the required dependency packages.

# Enter project directory
cd <your-project-name>

# Install dependencies
npm install

# Start development server
npm run dev

npm install will download all third-party libraries required by the project (defined in the package.json file).

npm run dev will start a local development server (typically supported by Vite). Once the server starts, you'll see a local address in the terminal, for example http://localhost:5173/.

Open this address in your browser, and if you can see Vue's welcome page, congratulations! Your first Vue project has been successfully created and is running!