返回

中后台开发从零入门（二）：项目配置及依赖管理

前端

大家好，我是你们的「中后台开发小能手」！在上一篇中，我们简单地介绍了中后台开发，并搭建了一个简单的 Demo 项目。然而，那个项目毕竟不是一个正式的项目，在写那个 Demo 项目时，Vue3 还没有出来。现在我们可以好好玩玩 Vue3 和 TypeScript 了。先来初始化我们的项目吧~~

项目初始化

首先，我们使用 Vue CLI 来初始化一个新的 Vue3 项目：

vue create <project-name>

选择 default 预设，然后选择使用 TypeScript。

项目配置

项目初始化完成后，我们可以对项目进行一些配置。

在 package.json 文件中，我们可以修改 scripts 部分，添加以下脚本：

"scripts": {
  "start": "vue-tsc --noEmit --watch",
  "build": "vue-tsc --noEmit && vue-cli-service build"
}

这些脚本用于在开发和构建时使用 TypeScript。

在 tsconfig.json 文件中，我们可以添加以下配置：

{
  "compilerOptions": {
    "target": "es2020",
    "module": "es2020",
    "lib": ["es2020"],
    "allowJs": true,
    "checkJs": true,
    "sourceMap": true,
    "baseUrl": "./",
    "paths": {
      "@/*": ["./src/*"]
    }
  },
  "include": [
    "./src/**/*.ts",
    "./src/**/*.vue"
  ],
  "exclude": [
    "node_modules"
  ]
}

这个配置用于配置 TypeScript 编译器。

依赖管理

在中后台开发中，我们需要使用到很多第三方库。我们可以使用 npm 或 yarn 来管理这些依赖。

在项目根目录下，我们可以使用以下命令安装依赖：

npm install --save-dev @vue/cli-plugin-typescript @vue/cli-plugin-babel

这些依赖用于支持 TypeScript 和 Babel。

我们还可以安装其他需要的依赖，例如：

npm install --save axios vue-router vuex

这些依赖用于网络请求、路由和状态管理。

总结

通过以上步骤，我们就完成了中后台项目的初始化和配置。下一篇，我们将开始编写我们的第一个页面。