T系列部署教程3：前端项目的部署运行

本文讲解T系列项目的前端项目如何部署运行。

Designer 小郑

24728人浏览 · 2024-05-20 10:35:15

Designer 小郑 · 2024-05-20 10:35:15 发布

作者主页：Designer 小郑
作者简介：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN博客专家，阿里云社区专家博主，蓝桥云课讲师。

$\color{red}{前言：本教程配套博主发布的所有}$ T系列项目。

一、删除前端多余文件

同学们拿到的 T 系列前端项目架构，如下图所示。

在这里插入图片描述

请同学们删除红圈内的文件，如下图所示。

在这里插入图片描述

文件删除后，如下图所示。

在这里插入图片描述

接着请同学们打开 package.json 文件，删除 eslintConfig 和 browserslist 字段，删除所有 eslint 、node-sass、sass-loader的依赖，如下图所示。

在这里插入图片描述

eslint 是前端代码规范性的限制依赖，如果代码写的不规范会直接报错，对新手入门来说不太友好，所以需要删除。

node-sass、sass-loader 都是用于前端样式编写的依赖，相互之前版本有限制，为了让同学们更快捷的启动项目，博主使用更新的 sass
依赖替代。

删除完成后，如下图所示。

在这里插入图片描述

接着，我们添加上以下三个依赖，如下图所示。

"sass-loader": "8.0.2",
"sass": "1.26.5",
"webpack": "4.46.0",

在这里插入图片描述

如果缺少了部分依赖，直接 npm i 即可。

比如提示缺少了 vue-qr 依赖，则直接执行 npm i vue-qr --save 即可。

最终 package.json 文件的代码如下。

{
  "name": "mas-creator-admin",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
"svgo": "svgo -f src/icons/svg --config=src/icons/svgo.yml",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "^0.19.2",
    "core-js": "^3.4.4",
    "echarts": "^4.6.0",
    "element-ui": "^2.13.0",
    "js-md5": "^0.7.3",
    "print-js": "^1.5.0",
    "vue": "^2.6.10",
    "vue-quill-editor": "^3.0.6",
    "vue-amap": "^0.5.10",
    "vue-json-excel": "^0.3.0",
    "vue-router": "^3.1.5"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.1.0",
    "@vue/cli-service": "^4.1.0",
    "babel-plugin-component": "^1.1.1",
    "sass-loader": "8.0.2",
    "sass": "1.26.5",
    "webpack": "4.46.0",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.2",
    "vue-template-compiler": "^2.6.10"
  }
}