如何从零创建 Vue 项目

Vue.js 是一个流行的前端框架，可以用于构建现代化的 Web 应用。本文将介绍如何从零创建一个 Vue 项目。

1. 安装 Node.js

在创建 Vue 项目前，需要先安装 Node.js，因为 Vue 依赖 npm（或 yarn）来管理包。

• 访问 Node.js 官网 下载并安装最新版。
• 安装完成后，可以运行以下命令检查安装是否成功：

node -v
npm -v

如果成功安装，会输出 Node.js 和 npm 的版本号。

2. 使用 npm 创建 Vue 项目

Vue 官方提供了 create-vue 工具来快速创建 Vue 3 项目。

运行以下命令创建一个新的 Vue 项目：

npm create vue@latest

在执行命令后，终端会提示你选择一些选项，例如是否使用 TypeScript、Pinia、Vue Router 等。根据需要进行选择。

如果希望直接指定项目名称，例如 my-vue-app，可以使用：

npm create vue@latest my-vue-app

然后进入项目目录：

cd my-vue-app

3. 安装依赖

Vue 创建完成后，需要安装项目依赖：

npm install

如果你使用 yarn 或 pnpm，也可以使用：

yarn install
# 或
pnpm install

4. 启动开发服务器

安装依赖后，运行以下命令启动本地开发服务器：

npm run dev

终端会输出一个本地访问地址，例如：

Local: http://localhost:5173/

打开浏览器访问该地址，即可看到 Vue 应用的默认页面。

5. 目录结构介绍

Vue 项目生成后，基本的目录结构如下：

my-vue-app/
├── node_modules/       # 依赖包目录
├── public/             # 静态资源
├── src/                # 源代码
│   ├── assets/         # 资源文件
│   ├── components/     # 组件
│   ├── App.vue         # 根组件
│   ├── main.js         # 入口文件
├── .gitignore          # Git 忽略文件
├── package.json        # 项目配置文件
├── README.md           # 项目说明文件

6. 构建生产环境代码

当开发完成后，可以运行以下命令打包生产环境代码：

npm run build

生成的静态文件会被放在 dist/ 目录下，可以部署到服务器。

7. 其他常用命令

• 运行测试：npm run test
• 格式化代码：npm run lint

至此，你已经成功从零创建了一个 Vue 项目，并可以进行开发和部署。希望这篇教程对你有所帮助！