Vue + TypeScript全栈项目实战指南

Vue + TypeScript全栈项目实战指南

引用

腾讯

等

8

来源

1.

https://m.journal.qq.com/read/1036700122/35

2.

https://blog.csdn.net/dashenfeng1/article/details/131041697

3.

https://blog.csdn.net/gyfghh/article/details/131930371

4.

https://vuejs.org/guide/typescript/overview

5.

http://docs.vikingship.xyz/deploy.html

6.

https://vuejs.org/guide/typescript/overview#project-setup

7.

https://bbchin.com/archives/vite2-vue3-ts

8.

https://www.php.cn/faq/496820.html

在现代Web开发中，Vue.js以其简洁易用的特点广受欢迎，而TypeScript则提供了强大的类型检查支持。Vue.js 3.0版本开始，官方就提供了对TypeScript的全面支持，这使得开发者能够更好地利用TypeScript的特性，提高代码质量和开发效率。本文将手把手教你如何从零开始构建一个Vue + TypeScript全栈项目，包括数据库准备、项目初始化与运行等步骤，帮助你快速上手这一高效的技术栈。

为什么选择Vue + TypeScript？

Vue.js是一个渐进式的JavaScript框架，易于上手且功能强大。TypeScript作为JavaScript的超集，提供了静态类型检查，能够帮助开发者在编码阶段就发现潜在的错误，减少运行时错误的发生。Vue官方团队非常重视TypeScript的集成，Vue 3的核心代码就是用TypeScript编写的，这保证了两者之间的无缝衔接。

环境准备

在开始之前，确保你的开发环境已经安装了以下工具：

• Node.js（建议使用LTS版本）
• npm或pnpm（推荐使用pnpm）
• MySQL数据库服务器
• VS Code或WebStorm等支持TypeScript的IDE

前端项目搭建

1. 创建Vue项目

Vue官方推荐使用Vite作为项目脚手架，它提供了更快的开发服务器启动速度和更好的开发体验。使用以下命令创建Vue + TypeScript项目：

pnpm create vite

在创建过程中，选择Vue模板并选择TypeScript作为语言选项。项目创建完成后，进入项目目录：

cd vue-ts-project

2. 配置tsconfig.json

Vite创建的项目已经包含了基本的TypeScript配置，但你可以根据需要进行调整。打开tsconfig.json文件，确保以下配置项正确：

{
  "compilerOptions": {
    "target": "ESNext",
    "module": "ESNext",
    "moduleResolution": "Node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "types": ["vite/client"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

3. 安装必要依赖

为了更好地支持Vue单文件组件（SFC）中的TypeScript，我们需要安装vue-tsc：

pnpm add -D vue-tsc

4. 设置IDE支持

推荐使用VS Code配合Vue官方插件（Vue - Official）来获得最佳的开发体验。安装插件后，确保在settings.json中配置了以下内容：

{
  "typescript.tsdk": "node_modules/typescript/lib",
  "vetur.experimental.templateInterpolationService": true,
  "vetur.useWorkspaceDependencies": true,
  "vetur.validation.template": false,
  "vetur.validation.script": false,
  "vetur.validation.style": false
}

后端项目搭建

后端我们将使用Node.js + Express + MySQL的组合。首先创建一个新的项目目录：

mkdir backend
cd backend
pnpm init -y

然后安装必要的依赖：

pnpm add express mysql2 sequelize bcryptjs jsonwebtoken
pnpm add -D nodemon

创建一个基本的Express服务器：

// server.js
const express = require('express');
const sequelize = require('./db');
const userRoutes = require('./routes/userRoutes');

const app = express();
const port = process.env.PORT || 3000;

app.use(express.json());
app.use('/api/users', userRoutes);

sequelize.sync().then(() => {
  app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
  });
});

数据库配置

使用Sequelize作为ORM工具来管理数据库。首先创建数据库连接：

// db.js
const { Sequelize } = require('sequelize');
const sequelize = new Sequelize('your_db', 'user', 'password', {
  host: 'localhost',
  dialect: 'mysql',
});

module.exports = sequelize;

然后定义用户模型：

// models/User.js
const { DataTypes } = require('sequelize');
const sequelize = require('../db');

const User = sequelize.define('User', {
  username: {
    type: DataTypes.STRING,
    unique: true,
    allowNull: false,
  },
  password: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  role: {
    type: DataTypes.ENUM('admin', 'user'),
    defaultValue: 'user',
  },
});

module.exports = User;

核心功能实现

用户认证模块

使用bcryptjs进行密码加密，jsonwebtoken进行身份验证。

// controllers/authController.js
const bcrypt = require('bcryptjs');
const jwt = require('jsonwebtoken');
const User = require('../models/User');

const register = async (req, res) => {
  try {
    const { username, password } = req.body;
    const hashedPassword = await bcrypt.hash(password, 10);
    const user = await User.create({
      username,
      password: hashedPassword,
    });
    res.status(201).json(user);
  } catch (error) {
    res.status(400).json({ error: 'Registration failed' });
  }
};

const login = async (req, res) => {
  const { username, password } = req.body;
  const user = await User.findOne({ where: { username } });
  if (user && await bcrypt.compare(password, user.password)) {
    const token = jwt.sign(
      { id: user.id, role: user.role },
      'your_secret_key',
      { expiresIn: '1h' }
    );
    res.json({ token, role: user.role });
  } else {
    res.status(401).json({ error: 'Invalid credentials' });
  }
};

module.exports = {
  register,
  login,
};

权限管理

在路由中添加权限验证中间件：

// middleware/authMiddleware.js
const jwt = require('jsonwebtoken');

const authenticateToken = (req, res, next) => {
  const authHeader = req.headers['authorization'];
  const token = authHeader && authHeader.split(' ')[1];
  if (token == null) return res.sendStatus(401);

  jwt.verify(token, 'your_secret_key', (err, user) => {
    if (err) return res.sendStatus(403);
    req.user = user;
    next();
  });
};

const isAdmin = (req, res, next) => {
  if (req.user.role !== 'admin') {
    return res.status(403).json({ error: 'Unauthorized' });
  }
  next();
};

module.exports = {
  authenticateToken,
  isAdmin,
};

后台管理功能

创建管理员路由：

// routes/adminRoutes.js
const express = require('express');
const router = express.Router();
const { authenticateToken, isAdmin } = require('../middleware/authMiddleware');
const adminController = require('../controllers/adminController');

router.use(authenticateToken);
router.use(isAdmin);

router.get('/users', adminController.getUsers);
router.put('/users/:id', adminController.updateUser);
router.delete('/users/:id', adminController.deleteUser);

module.exports = router;

TypeScript的优势

在整个开发过程中，TypeScript展现出了以下优势：

1. 静态类型检查：在编译阶段就能发现类型错误，避免了运行时错误。
2. 代码可维护性：清晰的类型定义使得代码更易于理解和维护。
3. 开发效率：IDE的智能提示和自动完成功能大大提高了编码效率。

常见问题与解决方案

1. 依赖版本不兼容：确保所有依赖包的版本兼容，必要时升级到最新版本。
2. 类型声明问题：使用vue-tsc进行类型检查，确保类型声明正确。
3. 跨域问题：在Express中使用cors中间件来解决跨域问题。

通过以上步骤，你已经成功搭建了一个Vue + TypeScript的全栈项目。这个项目不仅包含了基本的用户认证和权限管理功能，还通过TypeScript的类型检查提升了代码质量和开发效率。希望这篇文章能帮助你更好地理解和应用Vue + TypeScript技术栈。