前端开发环境部署

简介

JEPaaS开发平台采用的是前后端分离的开发模式，所以本文主要介绍前端插件项目，以及插件开发的整体流程和示例，包含了PC端插件和APP端插件。使开发人员可以快速的上手，体验前端项目带来的快感！

开发环境

nodejs

Node.js 是一个开源与跨平台的 JavaScript 运行时环境。 它是一个可用于几乎任何项目的流行工具！
Node.js 在浏览器外运行 V8 JavaScript 引擎（Google Chrome 的内核）。这使 Node.js 表现得非常出色。

平台依赖的nodejs版本为：node-v10.15.3，安装包下载

• windows 安装包 64位：node-v10.15.3-x64.msi

• windows 安装包 32位：node-v10.15.3-x86.msi

• macOS 安装包：node-v10.15.3.pkg

• 全部安装包：node-v10.15.3

• 验证是否安装成功，命令提示符执行：

  $ node -v

npm / cnpm(推荐)

npm 是 Node.js 的包管理工具，用来安装各种 Node.js 的扩展。
cnpm(gzip 压缩支持) 是淘宝定制的命令行工具代替默认的 npm，由于npm属于国外仓库，所以有些依赖可能会被墙，cnpm会为我们处理这种问题。

• npm安装：node安装后，npm会自动安装。验证是否安装成功，命令提示符执行：

  $ npm -v

• cnpm安装：推荐使用

  # 安装文件
  $ npm install -g cnpm --registry=https://registry.npm.taobao.org
  # 验证是否安装成功
  $ cnpm -v

开发工具

vscode（推荐）

VSCode：是一款免费的、开源的、高性能的、跨平台的、轻量级的代码编辑器，同时，在性能，语言支持、开源社区方面也做的很不错！

• 下载地址

• 扩展插件：图中标红处为扩展插件，可以安装需要的所有插件

ESLint

ESLint最初是由Nicholas C. Zakas 于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

由于项目配置了Eslint格式化代码规则，统一编码规范，增加代码可读性，所以我们需要在vscode扩展插件中安装Eslint、prettier、vetur等相关格式化插件，并在设置中做好对应配置，安装插件如下：

• ESLint
• Prettier-Code formatter
• Vetur

vscode配置代码,自己针对喜好进行删减或者增加。菜单位置：文件 》首选项 》设置 》 打开配置json(右上角按钮)：

{
  "editor.fontSize": 20,
  "editor.formatOnPaste": false,
  "git.ignoreLegacyWarning": true,
  "gitlens.advanced.messages": {
    "suppressGitVersionWarning": true
  },
  "files.autoSave": "off",
  "editor.formatOnType": false,
  "eslint.options": {
    "extensions": [
      ".html",
      ".js",
      ".vue",
      ".jsx"
    ]
  },
  "git.confirmSync": false,
  "editor.tabSize": 2,
  "git.enableSmartCommit": true,
  "vsicons.dontShowNewVersionMessage": true,
  "explorer.confirmDelete": false,
  "git.autofetch": true,
  "files.eol": "\n",
  "terminal.integrated.rendererType": "dom",
  "diffEditor.ignoreTrimWhitespace": false,
  "workbench.statusBar.visible": true,
  "vsicons.presets.jsOfficial": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[javascript]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "[less]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  "javascript.updateImportsOnFileMove.enabled": "always",
  "explorer.confirmDragAndDrop": false,
  "editor.quickSuggestions": {
    "strings": true
  },
}