Skip to main content

Vue 初始化指南

本指南将帮助你快速搭建 Vue 3 项目，包括环境配置、项目结构说明以及开发规范建议，适用于初学者与前端开发者入门。

🛠️ 环境准备​

Vue 使用 Node.js 环境和 CLI 工具来初始化项目。

1. 安装 Node.js​

请访问 Node.js 官网 下载并安装 LTS 版本。

node -v
npm -v
info

建议使用 Node.js 18 或更高版本。

2. 安装 Vue CLI 或使用 Vite（推荐）​

Vue 3 官方推荐使用 Vite 工具进行快速开发。

npm create vite@latest

选择 Vue 作为框架，然后进入目录并安装依赖：

cd my-vue-app
npm install
npm run dev
tip

Vite 提供极快的启动速度和热更新体验。

📁 项目结构说明（基于 Vite）​

my-vue-app/
├── public/                 # 静态资源
├── src/
│   ├── assets/             # 静态图片、样式
│   ├── components/         # 组件目录
│   ├── App.vue             # 根组件
│   └── main.js             # 应用入口
├── index.html              # 页面模板
├── package.json            # 项目信息与依赖
└── vite.config.js          # Vite 配置文件
点击展开各目录说明
  • components/：用于组织可复用组件。
  • App.vue：Vue 根组件。
  • main.js：挂载 Vue 实例的入口文件。
  • vite.config.js：Vite 编译配置，如别名、插件等。

✍️ Vue 单文件组件示例​

<template>
  <div>
    <h1>Hello {{ name }}</h1>
  </div>
</template>

<script>
export default {
  data() {
    return {
      name: 'Vue 3'
    };
  }
};
</script>

<style scoped>
h1 {
  color: #42b983;
}
</style>

📦 常用命令​

npm run dev       # 本地开发服务器
npm run build     # 构建生产环境包
npm run preview   # 本地预览构建结果
caution

构建后生成的文件位于 dist/ 文件夹，部署时请确保服务器指向该目录。

📐 项目规范建议​

  • ✅ 文件名使用小写 + 中划线命名，如 user-card.vue
  • ✅ 使用组合式 API（<script setup>）提高逻辑复用性
  • ✅ 使用 ref/reactive 管理响应式状态
  • ✅ 组件内部尽量保持逻辑清晰，职责单一
  • ✅ 使用 ESLint + Prettier 保持统一代码风格
点击展开 ESLint + Prettier 安装示例
npm install -D eslint prettier eslint-plugin-vue eslint-config-prettier

.eslintrc.js 示例：

module.exports = {
  extends: ['plugin:vue/vue3-recommended', 'prettier'],
};

.prettierrc 示例：

{
  "singleQuote": true,
  "semi": false
}

✅ 总结​

你已了解 Vue 项目的基本流程：

  • 安装 Node 与 Vite 工具
  • 创建 Vue 项目并运行
  • 熟悉目录结构与核心文件
  • 编写组件与样式
  • 规范化开发风格

📚 推荐链接​