T系列部署教程3：前端项目的部署运行
T系列部署教程3：前端项目的部署运行
作者主页：Designer 小郑 作者简介：3年JAVA全栈开发经验，专注JAVA技术、系统定制、远程指导，致力于企业数字化转型，CSDN博客专家，阿里云社区专家博主，蓝桥云课讲师。
一、删除前端多余文件
同学们拿到的 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",
最终 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"
}
}二、安装 Vue 脚手架
请同学们新建一个终端，如下图所示。
终端新建完成后，如下图所示。
请同学们在终端数据以下命令，安装 Vue 脚手架，如下图所示。
npm i -g @vue/cli
提示：根据多次部署的经验，晚上 8点后部分区域会出现下载超时的情况，不是我们的原因，同学们可以开热点或者第二天早上再试。
脚手架安装完成后，如下图所示。
三、拉取前端依赖
请同学们输入 npm i 命令，拉取项目前端依赖，如下图所示。
npm i
提示：根据多次部署的经验，晚上 8 点后部分区域会出现下载超时的情况，不是我们的原因，同学们可以开热点或者第二天早上再试。
前端依赖拉取完成后，如下图所示。
四、/deep/ 全局替换
最后，需要同学们将 /deep/ 全局替换成 ::v-deep，如下图所示。
/deep/
全局替换成
::v-deep
输入完成后，请同学们点击全局替换按钮，完成替换，如下图所示。
五、前端项目的运行
最后，同学们就可以输入 npm run serve 命令，运行前端项目了，如下图所示。
npm run build
前端项目默认是 8081端口，运行成功后如下图所示。
最后，请同学们打开浏览器，输入 http://localhost:8081，就可以进入系统了，如下图所示。
提示：因为项目后端还没启动，系统是无法登录进去的，请同学们继续按照教程启动后端。