PMP知识系统（03）- 前端架构-阿里云开发者社区

PMP知识系统（03）- 前端架构

2023-11-16 37

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： PMP知识系统（03）- 前端架构

1. 前言

注意：本项目所有的项目涉及到内容及代码已开源，Gitee开源地址：https://gitee.com/19931024/pmp.git

在前面的章节，已经做好了需求分析以及系统原型的设计了，有兴趣的童鞋可以参考下：

本章开始讲解前端用到的技术栈。

2. 前端技术栈

网上已经有很多vue的现成模板，为了快速开发前端，这里使用的是主流的前端框架：vue + elementUi。

2.1 vue-element-admin

我之所以选取这套框架，是因为vue-element-admin是一套现成的前端框架，其基本涵盖我们日常开发的所有需求（Github地址：https://github.com/PanJiaChen/vue-element-admin）。

而且也有相关的讲解教程：

作者：花裤衩

链接：https://juejin.cn/post/6844903476661583880

来源：掘金

2.2 开发必备技能

当然，要做到前后端分离，一些前端的技能是必须掌握的，在之前的文章已经有详细讲述，内容如下（已懂的童鞋可以直接跳过）：

3. 创建前端项目

3.1 拉取项目模板

首先我们使用vscode先去Githubclone项目（地址：https://github.com/PanJiaChen/vue-element-admin），展开目录结构如下：

3.2 创建项目

① 首先我们进入文件夹，使用命令创建项目：

cd 项目路径..

② 创建项目（项目名为front-end）:

vue create front-end

③ 这里选用的是默认的vue2.x，回车就会自动创建好：

可以看到自动生成好的文件目录如下：

3.3 修改package.json配置

packege.json是整个项目核心的配置文件（类似于maven项目的pom.xml文件），里面定义了版本号、项目名、依赖项等。

这里参考 vue-element-admin 的package.json文件，根据自己的需要裁剪，项目完整的package.json内容如下：

{
  "name": "pmp-system",
  "version": "1.0.0",
  "description": "PMP Knowledge Management System",
  "author": "https://yanglinwei.blog.csdn.net/",
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "axios": "0.18.1",
    "clipboard": "2.0.4",
    "codemirror": "5.45.0",
    "core-js": "3.6.5",
    "driver.js": "0.9.5",
    "dropzone": "5.5.1",
    "echarts": "4.2.1",
    "element-ui": "2.13.2",
    "file-saver": "2.0.1",
    "fuse.js": "3.4.4",
    "js-cookie": "2.2.0",
    "jsonlint": "1.6.3",
    "jszip": "3.2.1",
    "normalize.css": "7.0.0",
    "nprogress": "0.2.0",
    "path-to-regexp": "2.4.0",
    "screenfull": "4.2.0",
    "script-loader": "0.7.2",
    "sortablejs": "1.8.4",
    "tui-editor": "1.3.3",
    "vue": "2.6.10",
    "vue-count-to": "1.0.13",
    "vue-router": "3.0.2",
    "vue-splitpane": "1.0.4",
    "vuedraggable": "2.20.0",
    "vuex": "3.1.0",
    "xlsx": "0.14.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "4.4.4",
    "@vue/cli-plugin-eslint": "4.4.4",
    "@vue/cli-plugin-unit-jest": "4.4.4",
    "@vue/cli-service": "4.4.4",
    "@vue/test-utils": "1.0.0-beta.29",
    "autoprefixer": "9.5.1",
    "babel-eslint": "10.1.0",
    "babel-jest": "23.6.0",
    "babel-plugin-dynamic-import-node": "2.3.3",
    "chalk": "2.4.2",
    "chokidar": "2.1.5",
    "connect": "3.6.6",
    "eslint": "6.7.2",
    "eslint-plugin-vue": "6.2.2",
    "html-webpack-plugin": "3.2.0",
    "husky": "1.3.1",
    "lint-staged": "8.1.5",
    "mockjs": "1.0.1-beta3",
    "plop": "2.3.0",
    "runjs": "4.3.2",
    "sass": "1.26.2",
    "sass-loader": "8.0.2",
    "script-ext-html-webpack-plugin": "2.1.3",
    "serve-static": "1.13.2",
    "svg-sprite-loader": "4.1.3",
    "svgo": "1.2.0",
    "vue-template-compiler": "2.6.10"
  },
  "engines": {
    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 2 versions"
  ],
  "repository": {
    "type": "git",
    "url": "git+https://gitee.com/19931024/pmp.git"
  }
}

3.4 验证程序

① 因为package.json文件已经修改了，为了避免出现冲突，所以把将node-modules文件夹删除：

② 安装依赖，执行一下命令：

cnpm install

③ 安装完毕后，运行：

npm run serve

浏览器输入：http://localhost:8080/ ，可以看到，项目已经创建成功：

3.5 其它

① 在npm install的过程中可能会出现问题，统一的解决方案：

先删除node_modules文件夹
然后执行命令cnpm install，然后就会根据package.json下载依赖到node_modules

② 在npm run serve的时候，可能会报eslint的错，具体解决方案可以参考：

新增.eslintrc.js文件（具体可以clone代码下来看）
删除错误文件的逗号：https://blog.csdn.net/qq_34037358/article/details/108247314

4. 总结

PMP系统至此已经创建好前端项目了，接下来的博客将讲解代码的实现，本文完！