简介

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

开发环境

nodejs

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

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

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
  },
}
最后编辑: admin  文档更新时间: 2024-08-21 10:58   作者:呼丽华