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

1. 前言

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

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

• 《PMP知识系统（01）- 系统介绍》
• 《PMP知识系统（02）- 原型设计》

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

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 来源：掘金

• 《手摸手，带你用vue撸后台 系列一（基础篇）》
• 《手摸手，带你用 vue 撸后台 系列二(登录权限篇)》
• 《手摸手，带你用 vue 撸后台 系列三 (实战篇)》
• 《手摸手，带你用 vue 撸后台 系列四(vueAdmin 一个极简的后台基础模板)》
• 《手摸手，带你用 vue 撸后台 系列五(v4.0 新版本)》
• 《手摸手，带你封装一个 vue component》
• 《手摸手，带你优雅的使用 icon》
• 《手摸手，带你用合理的姿势使用 webpack4（上）》
• 《手摸手，带你用合理的姿势使用 webpack4（下）》

2.2 开发必备技能

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

• 《Java程序员从零开始学Vue（01）- 前端发展史》
• 《Java程序员从零开始学Vue（02）- Vue环境搭建、项目创建及运行》
• 《Java程序员从零开始学Vue（03）- Vue开发利器VsCode》
• 《Java程序员从零开始学Vue（04）- VsCode断点调试》
• 《Java程序员从零开始学Vue（05）- 基础知识快速补充（html、css、js）》
• 《Java程序员从零开始学Vue（06）- Vue调试神器（vue-devtools）》
• 《Java程序员从零开始学Vue（07）- Vue第一个程序（MVVM模式的引入）》
• 《Java程序员从零开始学Vue（08）- 基本语法》
• 《Java程序员从零开始学Vue（09）- 事件绑定》
• 《Java程序员从零开始学Vue（10）- Model数据内容双向绑定》
• 《Java程序员从零开始学Vue（11）- 组件详解》
• 《Java程序员从零开始学Vue（12）- Axios异步通信》
• 《Java程序员从零开始学Vue（13）- 计算属性（computed）》
• 《Java程序员从零开始学Vue（14）- 插槽（slot）》
• 《Java程序员从零开始学Vue（15）- 事件内容分发（$emit）》
• 《Java程序员从零开始学Vue（16）- 模块打包器（webpack）》
• 《Java程序员从零开始学Vue（17）- 路由（vue-router）》
• 《Java程序员从零开始学Vue（18）- 集成UI框架（ElementUI）》
• 《Java程序员从零开始学Vue（19）- 嵌套路由（ElementUI）》
• 《Java程序员从零开始学Vue（20）- 参数传递（:to）》
• 《Java程序员从零开始学Vue（21）- 自定义404页面&路由模式》
• 《Java程序员从零开始学Vue（22）- 路由钩子》
• 《Java程序员从零开始学Vue（23）- npm小结》

3. 创建前端项目 3.1 拉取项目模板

首先我们使用vscode先去Github clone项目（地址：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的过程中可能会出现问题，统一的解决方案：

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

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

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

4. 总结

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