教程老了，被吐槽了！

大家好，我是程序员鱼皮。很多朋友都知道，我从 22 年开始带大家做项目，至今已经练习两年半、带做了 10 多套项目。虽然不断产出新项目，但随着时间的流逝和技术的更新，早期录制的项目教程的含金量也会慢慢减少。

比如之前就有小伙伴吐槽：用户中心项目的 React 前端根本看不懂啊，入不了门啊！

的确，当时我考虑到用户中心项目的主要目的是帮没做过项目的朋友了解项目前后端的标准开发流程，所以前端直接使用了 Ant Design Pro 脚手架，可以尽量少写代码、快速完成页面开发。但没想到，这个脚手架更新地太特么快了！以至于对版本号不太敏感的同学，安装了跟教程中不一致的版本，就会出现一些小问题。

虽然改个版本号就能解决，但很多新手就是不知道、也不看文档。不过这也没办法，我刚开始学的时候也不知道看文档哈哈。

所以，我选择录制一套全新的、更适合入门的前端项目教程，目标是让没有前端项目经验、或者基础较差的同学也能快速入门前端项目的开发，同时补充一些网站开发的知识。

⭐️ 推荐观看视频教程：https://bilibili.com/video/BV1MHSMYvEJq/

下面是文字教程，内容较长，大家可以先收藏再阅读~

本文重点

本次的前端教程中，会假设已经完成了用户中心项目后端，并提供了 API 接口，在此基础上去开发前端项目，功能和特性与之前的前端教程（React 框架）保持一致，因此可以单独学习。

一般企业中开发，前后端是同时开发的，但如果想保证前端的运行效果，最好是后端先完成开发，独立开发全栈项目时也建议先开发后端。（当然前端同学也可以使用 Mock 技术模拟后端接口，不用干等着后端）

大纲：

• 需求分析

• Web 前端技术选型

• Web 前端项目初始化（简易 Vue 前端万用模板开发）

• 脚手架
• 通用布局
• 路由
• 请求

• 前端页面开发

• 用户登录（Cookie / Session 讲解）
• 用户注册
• 用户管理

• 项目部署（多环境）

一、Web 前端技术选型

• Vue 3：主流前端框架
• Vue-CLI 脚手架：快速启动项目
• Ant Design 组件库：快速开发 UI 界面
• Axios 请求库：向后端发送请求
• Pinia 状态管理：维护前端全局数据
• ⭐️ 前端工程化：ESLint + Prettier + TypeScript，保证前端项目开发规范

这里解释一下为什么用 Vue-CLI？

Vue CLI 已经进入了稳定维护版本，不会出现未来因为版本号升级导致和教程不一致的情况，【更适合新手入门】；而且会一个脚手架，其他的也都会了，比如使用打包更快的 Vite。

二、Web 前端项目初始化

自主打造一套简易的前端开发项目模板

确认环境！！！

nodeJS 版本 >= 10 均可

检测命令：

node -v

推荐使用快速切换和管理 node 版本的工具 NVM ，可以参考 该视频 配置前端环境。

创建项目

使用 Vue-CLI 脚手架快速创建 Vue3 的项目：https://cli.vuejs.org/zh/

为什么选择该脚手架？

1. 常用的标准脚手架，开源、并且 star 数多
2. 目前进入维护模式，相对稳定，对低版本的 Node 兼容性好，不容易出现因为环境不同而导致的问题
3. 相对轻量，整合了一些前端项目开发常用的工具，并且可以按需选取

该脚手架自动整合了 vue-router 路由、TypeScript、前端工程化等库：

可以 参考官方文档 来安装脚手架工具：

npm install -g @vue/cli

检测是否安装成功：

vue -V

如图，鱼皮的版本是 5.0.8，尽量保持一致：

如果找不到命令，那么建议重新到官网安装 npm，会自动帮你配置环境变量。

创建项目：

vue create user-center-frontend-vue

手动选择特性：

选择如下特性：

会自动生成代码并安装依赖：

然后用 WebStorm 打开项目，在终端执行 npm run serve，能访问网页就成功了。

前端工程化配置

脚手架已经帮我们配置了 Prettier 代码美化、ESLint 自动校验、TypeScript 类型校验、格式化插件等，无需再自行配置。

但是需要在 webstorm 里开启代码美化插件：

在 vue 文件中执行格式化快捷键，不报错，表示配置工程化成功。

如果发现格式化效果不好，也没关系，之后可以使用另外一种格式化快捷键：

如果想关闭 ESLint 校验导致的编译错误（项目无法运行），可以修改 vue.config.js 来 关闭 lintOnsave ：

const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: "warning",
});

修改 .eslintrc.js 和 tsconfig.json 可以改变校验规则。

如果不使用脚手架，就需要自己整合这些工具，比较麻烦。

引入组件库

引入 Ant Design Vue 组件库，参考 官方文档 快速上手。

注意，本教程使用的是 v4.2.6 的组件库版本，如果后续阅读本教程中发现有组件或语法不一致，以官方文档为主，或者在网站右上角切换对应版本的文档即可：

执行安装：

npm i --save [email protected]

改变主入口文件 main.ts，全局注册组件（为了方便）：

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import Antd from "ant-design-vue";
import "ant-design-vue/dist/reset.css";

createApp(App).use(Antd).use(router).mount("#app");

随便引入一个组件，如果显示出来，就表示引入成功。

比如引入按钮：

type="primary">Primary Button</a-button>

效果如图：

开发规范

个人建议遵循 Vue3 的组合式 API (Composition API)，而不是 选项式 API，开发更自由高效一些。

示例代码：

全局通用布局

1、基础布局结构

在 layouts 目录下新建一个布局 BasicLayout.vue， 在 App.vue 全局页面入口文件中引入。

App.vue 代码如下：