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

原创

阿甘兄_ 2022-01-25 17:38:18 ©著作权

文章标签 vue.js node.js git visual studio code pmp 文章分类 架构后端开发

©著作权归作者所有：来自51CTO博客作者阿甘兄_的原创作品，请联系作者获取转载授权，否则将追究法律责任

文章目录

1. 前言
2. 前端技术栈

2.1 vue-element-admin
2.2 开发必备技能

3. 创建前端项目

3.1 拉取项目模板
3.2 创建项目
3.3 修改package.json配置
3.4 验证程序
3.5 其它

4. 总结

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）。

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

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

作者：花裤衩

2.2 开发必备技能

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

3. 创建前端项目

3.1 拉取项目模板

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

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

3.2 创建项目

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

cd 项目路径..

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

vue create front-end

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

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

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

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

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"
  "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"
  }
}