手把手教你搭建一个美观可用的网站（一）、用VUE搭建前端

推荐的 IDE 配置是 Visual Studio Code + Vue - Official 扩展。

需要安装的工具：

• Visual Studio Code ： https://code.visualstudio.com/

  最新版本：VSCodeUserSetup-x64-1.108.0.exe

  进一步安装插件：Vue - Official 扩展

• Node.js : https://nodejs.org/zh-cn

  最新版本：node-v24.12.0-x64.msi

• git 用来管理项目 ：

  最新版本：Git-2.52.0-64-bit.exe

前端搭建

①. 确保你安装了最新版本的 Node.js，并且你的当前工作目录正是打算创建项目的目录。输入：

npm create vue@latest

②. 按提示输入工程名 + 包名 + 选择工具特性如下：

Project name (target directory):
│ YiyiCoding
│
◇ Package name:
│ yiyicoding
│
◆ Select features to include in your project: (↑/↓ to navigate, space to select, a to toggle all, enter to confirm)
│ ◻ TypeScript
│ ◻ JSX Support
│ ◼ Router (SPA development)
│ ◼ Pinia (state management)
│ ◻ Vitest (unit testing)
│ ◻ End-to-End Testing
│ ◼ ESLint (error prevention)
│ ◼ Prettier (code formatting)

③. 启动项目，按提示进行操作（空白项目）。

◇ Skip all example code and start with a blank Vue project?
│ Yes

Scaffolding project in D:\unicorn\main\YiyiCoding…
│
└ Done. Now run:

cd YiyiCoding
npm install
npm run format
npm run dev

VITE v7.3.1 ready in 954 ms

➜ Local: http://localhost:5173/
➜ Network: use --host to expose
➜ Vue DevTools: Open http://localhost:5173/devtools/ as a separate window
➜ Vue DevTools: Press Alt(⌥)+Shift(⇧)+D in App to toggle the Vue DevTools
➜ press h + enter to show help

Ctrl + 点击 http://localhost:5173/ 打开网站页面。

VUE 官网 ： https://cn.vuejs.org

VUE 官网参考文档：https://cn.vuejs.org/guide/quick-start.html

④. 用git管理项目

打开一个新的TERMINAL 请输入：

git init && git add -A && git commit -m “initial commit” （这是三条命令）

cd YiyiCoding
git init
git add -A
git commit -m "initial commit"

PS D:\unicorn\main\YiyiCoding> git commit -m “initial commit”
[master (root-commit) a1e0de1] initial commit
17 files changed, 4266 insertions(+)
create mode 100644 .editorconfig
create mode 100644 .gitattributes
create mode 100644 .gitignore
create mode 100644 .prettierrc.json
create mode 100644 .vscode/extensions.json
create mode 100644 README.md
create mode 100644 eslint.config.js
create mode 100644 index.html
create mode 100644 jsconfig.json
create mode 100644 package-lock.json
create mode 100644 package.json
create mode 100644 public/favicon.ico
create mode 100644 src/App.vue
create mode 100644 src/main.js
create mode 100644 src/router/index.js
create mode 100644 src/stores/counter.js
create mode 100644 vite.config.js

⑤. 最后观察一下项目的目录结构：