第2章前端项目初始化

第2章：前端项目初始化——Vite + Vue3 + Element Plus + Axios

好，咱们正式开始动手了。

这一章，我会带你从零搭建一个前端项目。说白了，就是先把「工地」清理好，脚手架搭起来。我见过太多新手一上来就写业务代码，写到一半发现目录乱成一锅粥，依赖冲突报错一堆——嗯，那种感觉，真的很酸爽。

2.1 为什么选Vite？

你可能听说过Webpack。没错，它很强大，但启动一个项目要等十几秒甚至更久。Vite不一样，它基于ES Module，开发时按需编译，秒开。

我个人习惯是：新项目一律用Vite。除非是老项目维护，否则我不会再碰Webpack。你想想看，每次改一行代码都要等两三秒热更新，多影响心情？

核心优势：

开发服务器启动极快（毫秒级）
热更新几乎无感
构建基于Rollup，生产包体积更小

2.2 使用Vite创建Vue3项目

打开终端，执行下面这条命令：

npm create vite@latest my-vue-project -- --template vue

这里我解释一下参数：

my-vue-project 是你的项目名，可以随便改
--template vue 表示使用Vue模板

执行完后，你会看到类似这样的输出：

✔ Project created.
  cd my-vue-project
  npm install
  npm run dev

按提示操作：

cd my-vue-project
npm install
npm run dev

浏览器打开 http://localhost:5173，看到Vue的默认欢迎页，就说明成功了。

小技巧： 如果你用的是pnpm或yarn，也可以把npm换成对应的命令。我个人更推荐pnpm，安装速度快，还省磁盘空间。

2.3 项目目录结构解析

创建完成后，咱们看看目录长什么样：

my-vue-project/
├── public/
│   └── favicon.ico
├── src/
│   ├── assets/
│   ├── components/
│   ├── App.vue
│   └── main.js
├── index.html
├── package.json
├── vite.config.js
└── README.md

我来逐个说一下：

目录/文件	作用
`public/`	存放静态资源，不会被Vite处理，直接复制到构建目录
`src/`	源代码目录，咱们主要在这里干活
`src/assets/`	存放图片、字体等资源，会被Vite处理（压缩、哈希等）
`src/components/`	存放Vue组件，比如按钮、弹窗、表格等
`App.vue`	根组件，整个应用的入口组件
`main.js`	应用入口文件，负责创建Vue实例、挂载路由、注册插件
`index.html`	HTML模板，Vite会注入脚本到这里
`vite.config.js`	Vite的配置文件，可以配置代理、插件、路径别名等

这里有个点我想强调一下：public和assets的区别。我在项目中遇到过有人把图片放public里，结果打包后路径不对。其实很简单——public里的文件会原封不动地复制过去，适合放favicon.ico、robots.txt这类文件；而assets里的文件会被Vite处理，适合放组件里引用的图片。

2.4 安装Element Plus

Element Plus是Vue3的UI组件库，说白了就是一套现成的按钮、表格、表单等组件，不用自己手写样式。

安装命令：

npm install element-plus

安装完成后，在 main.js 中引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

这样，整个项目就能使用Element Plus的组件了。比如在 App.vue 里写个按钮试试：

<template>
  <el-button type="primary">点我试试</el-button>
</template>

注意： 如果你按需引入（比如只引入Button和Input），需要额外安装 unplugin-vue-components 和 unplugin-auto-import 两个插件。不过对于新手，我建议先全量引入，等熟悉了再优化。

2.5 安装Axios

Axios是前端发HTTP请求的工具。说白了，就是用来和后端接口打交道的。

安装命令：

npm install axios

安装后，我习惯在 src 目录下新建一个 utils 文件夹，里面放 request.js 文件，用来封装Axios实例：

// src/utils/request.js
import axios from 'axios'

const request = axios.create({
  baseURL: 'http://localhost:3000/api', // 后端接口地址
  timeout: 5000 // 请求超时时间
})

// 请求拦截器
request.interceptors.request.use(
  config => {
    // 可以在这里加token
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

// 响应拦截器
request.interceptors.response.use(
  response => {
    return response.data
  },
  error => {
    // 统一处理错误
    console.error('请求出错：', error)
    return Promise.reject(error)
  }
)

export default request

为什么要封装？我在项目中遇到过，如果不封装，每个页面都要写一遍 axios.get，而且token、错误处理这些逻辑散落在各处，维护起来很痛苦。封装之后，所有请求都走同一个通道，改起来也方便。

避坑指南： 我曾经在响应拦截器里忘了 return response.data，结果每个页面拿到的都是 { data: {...} } 这种嵌套结构，排查了半天。所以记得，响应拦截器里把数据解构一层，页面里用起来更清爽。

2.6 验证安装是否成功

咱们写个简单的测试页面，验证Element Plus和Axios是否正常工作：

<template>
  <div>
    <el-button type="success" @click="fetchData">请求数据</el-button>
    <p v-if="data">返回数据：{{ data }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import request from './utils/request'

const data = ref(null)

const fetchData = async () => {
  try {
    const res = await request.get('/test')
    data.value = res
  } catch (err) {
    console.error('请求失败', err)
  }
}
</script>

如果按钮能正常显示，点击后控制台没有报错，说明环境搭建成功了。

2.7 本章小结

这一章我们做了三件事：

用Vite创建了Vue3项目
搞清楚了项目目录结构
安装了Element Plus和Axios，并做了基础配置

嗯，到这里，前端项目的「地基」已经打好了。下一章，咱们开始搭建后端项目，把前后端真正连起来。

对了，如果你在安装过程中遇到任何报错，先检查Node.js版本——Vite要求Node.js 16以上。我遇到过有人用Node 12装了半天装不上，最后发现是版本问题。

📚 课程目录