跳至主要內容

使用 create-vue 脚手架创建 Vue3 项目

Happilys2025/7/14大约 6 分钟前端Vue

使用 create-vue 脚手架创建 Vue3 项目

根据官方文档，使用 Vue3 脚手架能够很轻松地搭建起 Vue 项目。唯一遇到的问题就是 yarn 对 node module 处理方式上的问题（如果使用其他包管理工具请忽略）。

yarn4+ 默认使用 PnP 模式来处理 node modules ，但是这样在执行 package.json 的脚本和 IDE 错误提示都存在问题。最简单的解决方法就是——在项目根目录下添加 .yarnrc.yml 文件并添内容如下：

nodeLinker: node-modules

以下是项目搭建说明。

安装 nodejs

Windows 直接在官网下载最新的 LTS 版本安装。

download-node-js
download-node-js

Mac 可以使用 Homebrew 安装，但需要「魔法」就不提供具体说明了——各显神通吧。

Linux 的不同发行版本有 apt、yum 或 pacman 等包管理器，根据具体系统版本使用相应的包管理器安装即可。另外，如果考虑需要用到不同的 node 版本可以选择 nvm。

下面是 Linux 使用 nvm 安装 nodejs 的说明：

# 如果没有 git 先安装 git
#   apt install -y git
#   pacman -Syu git
#   dnf install -y git
yum install -y git

# 下载并安装 nvm:
export NVM_DIR="$HOME/.nvm" && (
  git clone https://gitee.com/mirrors/nvm-sh.git "$NVM_DIR"
  cd "$NVM_DIR"
  git checkout `git describe --abbrev=0 --tags --match "v[0-9]*" $(git rev-list --tags --max-count=1)`
) && \. "$NVM_DIR/nvm.sh"

# 安装 Node.js:
nvm install 22

# 验证 node 版本
node -v
nvm current

# 启用 yarn:
corepack enable yarn

# 验证 yarn 版本
yarn -v

安装完成后，添加如下内容到 ~/.bashrc、 ~/.bash_profile、 ~/.zshrc 或 ~/.profile 。仅需要添加内容到其中某一个文件末尾即可，主要目的是为了 Shell 重启后 nvm 命令还能够正常使用（类似于 Windows 中配置 Path 环境变量）。

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm
[ -s "$NVM_DIR/bash_completion" ] && \. "$NVM_DIR/bash_completion"

这种方式适用于大多数 Linux 发行版本（也支持 Mac ），除了安装步骤有点麻烦外暂未发现其他问题。

由于某些原因不能使用默认的安装脚本，只好采用克隆镜像仓库的方式进行安装了。

更换 yarn 源

这算是前端工程化，首次创建工程前的基操了。

yarn4+ 版本命令：

# 查询当前使用的镜像源
yarn config get npmRegistryServer

# 设置为淘宝镜像源
yarn config set npmRegistryServer -H https://registry.npmmirror.com

# 还原为官方镜像源
yarn config set npmRegistryServer -H https://registry.yarnpkg.com

yarn 1.x 版本命令：

# 查询当前使用的镜像源
yarn config get registry  

# 设置为淘宝镜像源
yarn config set registry https://registry.npmmirror.com/  

# 还原为官方镜像源
yarn config set registry https://registry.yarnpkg.com/

create-vue 创建工程

yarn dlx create-vue@latest

执行命令后需要根据提示完成以下几个步骤：

  1. 设置项目名称
    • 名称：vboxes-ui
  2. 功能选择
    • TypeScript
      • 用于提供 TypeScript 语言支持。
      • 会 Ts 肯定要选的，要不然就原生 JS 了
      • 我直接选上了，边用边学
    • JSX Support
      • JavaScript 语法扩展，可以在 JavaScript 文件中书写类似 HTML 的标签
      • 为 React 用户准备的
        • 有 React 开发经验的话，可以选择该项
        • 要不然还是直接学习 Vue 语法来的方便
    • Router (SPA development)
      • 单页应用 (SPA) 中将浏览器的 URL 和用户看到的内容绑定起来。当用户在应用中浏览不同页面时，URL 会随之更新，但页面不需要从服务器重新加载。
      • 个人项目以 SPA 为主，随着功能的丰富，必然会用到
    • Pinia (state management)
    • Vitest (unit testing)
    • End-to-End Testing
    • ESLint (error prevention)
      • 静态分析工具
        • 「问题越早发现，越容易被解决」
      • 要选上
    • Prettier (code formatting)
      • 代码格式化工具，统一代码风格——需要
      • 仅针对代码文本格式，并不能统一编码风格[笑]
      • 编码风格还是需要统一的编码规范来协调
        • 需求都赶不完，谁还有精力管代码规范，能跑就行[笑哭]
  3. 试验功能

测试并提交代码

切换到工程目录，使用命令或者打开 IDE 运行项目。

使用命令启动项目：

# 切换到工程目录
cd vboxes-ui

# 安装 npm 包
yarn

# 启动开发服务器
yarn dev

根据提示打开网页地址，如图：

vite-dev-server-output
vite-dev-server-output
vue3-start-up
vue3-start-up

没问题后就可以直接提交内容到 Git 仓库了。初始化 Git 仓库并创建提交：

# 初始化版本仓库
git init

# 添加项目下的文件到暂存区
git add -A

# 提交修改
git commit -m "Init: vboxes-ui"

推送内容到远程仓库：

Github、Gitee、GitCode、GitLab or Gitea ？

如果不考虑网络因素，当然首选 Github。Git 私有仓库方案 Gitea 比较好，GitLab 功能丰富，但也吃资源啊。

先在平台创建空的版本仓库，拷贝仓库地址，为本地仓库添加远程仓库，再推送本地分支

# 添加远程仓库
# git remote add <remote name> <remote url>
git remote add origin git@gitea.mtfh.cc:mtfhx/vboxes-ui.git


# 关联远程分支(当前分支首次推送时)
#   git push -u <remote name> <branch name>
#     同： git push --set-upstream <remote name> <branch name>
git push -u origin main 

# 推送当前分支
#   git push <remote name> <branch name>
#   git push <remote name> [<current branch>]
#   git push [<default remote>] [<current branch>]
git push

目录结构

tree -a -L 2 --prune -P 'node_modules|.*|*'

# 输出：
# .
# ├── .editorconfig
# ├── env.d.ts
# ├── eslint.config.ts
# ├── .gitattributes
# ├── .gitignore
# ├── index.html
# ├── node_modules
# │   └── .yarn-integrity
# ├── package.json
# ├── .prettierrc.json
# ├── public
# │   └── favicon.ico
# ├── README.md
# ├── src
# │   ├── App.vue
# │   └── main.ts
# ├── tsconfig.app.json
# ├── tsconfig.json
# ├── tsconfig.node.json
# ├── vite.config.ts
# ├── yarn.lock
# └── .yarnrc.yml

项目文件说明（由 ChatGPT 生成）：

路径 / 文件说明
.editorconfig编辑器配置文件，统一团队代码风格。
.eslint.config.tsESLint 配置，用于代码语法规范检查（TypeScript 格式）。
.gitattributesGit 属性配置，常用于行结束符统一等设置。
.gitignore指定 Git 应忽略的文件和目录，如 node_modules/。
.prettierrc.jsonPrettier 格式化工具的配置文件。
.yarnrc.ymlYarn v2+ 的配置文件。
env.d.tsTypeScript 环境变量声明文件。
index.html项目入口 HTML 文件，Vite 用来注入 Vue 应用的挂载点。
node_modules安装的依赖包目录（自动生成）。
package.json项目元信息及依赖管理文件。
yarn.lock锁定依赖版本，确保团队一致性。
public/favicon.ico静态资源，打包时原样复制到输出目录。
README.md项目说明文档。
src/App.vueVue 根组件，应用的主界面。
src/main.tsVue 应用入口文件，创建并挂载 Vue 实例。
tsconfig.jsonTypeScript 主配置文件。
tsconfig.app.json针对应用的 TS 配置扩展。
tsconfig.node.json针对 Node 环境的 TS 配置扩展（如用于脚本或工具）。
vite.config.tsVite 的项目构建配置文件。

参考

  1. ChatGPT
  2. 快速上手 | Vue.js
  3. 入门 | Vue Router
  4. 《Vue.js 3 + TypeScript 完全指南》
最近更新:
贡献者: Happilys