oScope

Network and Information Management Organization - SJTU

安装环境

• Node v8.9.4 LTS JavaScript 运行时

  • 附带 npm v5.6.0 Node的包管理器

  • Windows官网下载安装

  • Linux可先安装nvm，再使用nvm安装node

  • 更新记录

    • 开发初期由于沟通不畅未使用统一的node版本，后从v7.10.1统一升至v8.9.4没有发现坑。升级后新增package-lock.json 用于锁定依赖版本。请注意升级node后需要运行npm install重新安装依赖

构建项目

使用当前项目

• 把这个项目clone到本地

• 进入项目目录

  cd oscope

• Build Setup

  # install dependencies
  npm install
  
  # serve with hot reload at localhost:8080
  npm run dev
  
  # build for production with minification
  npm run build
  
  # build for production and view the bundle analyzer report
  npm run build --report

  For a detailed explanation on how things work, check out the guide and docs for vue-loader.

构建一个新项目

• 安装vue-cli

  • 安装方法见Vue.js官方文档

  开发时使用的版本为v2.9.2，已经出现v3.0.0-alpha，具体差异不详。但开发过程中曾重新构建过一次项目，产生的差异包括：

  • Windows下热更新不稳定问题得到解决
  • ESlint增加了对不规则空格的检查（见下文项目配置-ESLint）

  但产生差异的具体原因不详（LuminousXLB@2018-2-6）

• 运行vue init webpack oscope

  • 使用vue提供的一个基于webpack的项目模板初始化项目，详细说明见vue-js template - Webpack

• 模板配置

  ? Project name          # 如实 oscope
  ? Project description   # 如实
  ? Author LuminousXLB    # 如实 NIMOweb2016
  ? Vue build             # 默认 Runtime + Compiler
  ? Install vue-router?   # 默认 Y
  ? Use ESLint to lint your code?     # 默认 Y
  ? Pick an ESLint preset (Use arrow keys)
                          # 默认 Standard
  ? Set up unit tests     # 取消 n 目前没有使用单元测试，如果认为有必要的话可以加装单元测试模块
  ? Setup e2e tests with Nightwatch?
                          # 取消 n 目前没有使用自动化测试，如果认为有必要的话可以加装自动化测试模块
  ? Should we run `npm install` for you after the project has been created?
                          # Yes, use NPM

项目依赖

参见package.json

在package.json中记录的依赖可以使用npm install自动安装

• dependencies
  • vue v2.6.10
  • vuex v3.0.1状态管理
  • vue-router v3.0.1路由管理
  • axios v0.17.1请求
  • promise.prototype.finally v3.1.0
  • element-ui v2.9.2UI框架
  • material-design-icons v3.0.1图标库
    • Element UI本身提供了扩展图标库的方式，但实际操作中没有使用，而是选择了material自带的使用方法
  • clipboard v2.0.4复制到剪贴板
  • marked v0.3.16markdown渲染引擎，用于公告渲染
  • moment v2.20.1日期时间处理
  • vue-cropperjs v2.2.0图片裁剪插件，用于头像处理
  • compressorjs v1.0.5压缩头像，防止上传时超出后端大小限制
• devDependencies
  • webpack v3.6.0
  • eslint v4.15.0

项目配置

Webpack

随着Webpack和Vue模板的升级，这里的配置可能产生差异，请以实际情况为准

• /flags.js

  module.exports = {
      // target: 'development' or 'production'
      target: 'development',
      // `console.log` will have no effect if `logger` is false
      logger: true,
      // dev-server warning will be enabled if set to true
      devserver: true,
      // lazy-load will be enabled if set to true
      lazyload: false,
      // host for backend dev server. `static` need to be linked first.
      backendDevServerHost: 'http://localhost:8000/'
  }
  • 项目状态配置文件
  • 由于项目开发过程中的不同需求，添加此文件至.gitignore，避免并线后项目状态混乱
  • target: development vs target: production

• /config/index.js

  修改dev中的poll键，可设置文件系统监视的轮询间隙（默认设置不使用轮询，经常出问题）； proxyTable键，可设置前端开发服务器对后端的代理，详见代码。

• /build/webpack.base.conf.js

  在development环境下同步加载全部的组件，在production环境下使用懒加载

  module.exports = {
    resolve: {
      alias: {
        '%load%': process.env.NODE_ENV === 'production'
          ? path.join(resolve('src'), 'router', 'lazyload')
          : path.join(resolve('src'), 'router', 'hotload')
      }
    }
  }

  具体的实现见/router/modules/

ESlint

• .eslintignoreESLint忽略的文件

  • 增加/src/components/Experiment/

    Experiment模块是在开发过程中用于尝试的playground

    即使不加也没啥关系，只是会在尝试的过程中保留各种格式上的限制

• .eslintrc.jsESLint配置

  在rules下增加

  • 'camelcase': 'off'

    ​ 取消js必须使用驼峰命名法的限制。原因是后端API的相应有很多字段使用了下划线命名法，在开发过程中强制使用驼峰命名法可能造成各种不便。但仍然建议在其他情况下使用驼峰命名法。

.gitignore

.DS_Store         # macOS的隐藏文件
node_modules/     # npm安装的包，不要加在git里面。文件又多又杂，不需要人为修改，可以自动构建
dist/             # 项目编译的输出文件
fixtures/*        # 已经弃用，此前准备用作测试用数据的储存
npm-debug.log*    # npm运行失败的log
yarn-debug.log*   # yarn的log，我们没用yarn，应该是早期自动生成的，现在已经没有了
yarn-error.log*   # 同上
!dist/app.py      # 开发初期曾经使用过flask作调试过程中的后端服务器。这就是之前做的
.vscode/*         # vscode配置文件
flags.js          # 项目配置文件

VSCode

• 插件

  • Vetur
  • vscode-element-helper
  • ESLint

• 配置

  {
      "editor.tabSize": 2,
      "files.eol": "\n",
      "files.insertFinalNewline": true,
      "files.trimFinalNewlines": true,
      "files.trimTrailingWhitespace": true,
      "element-helper.version": "2.5",
      "vetur.format.defaultFormatter.js": "vscode-typescript",
      "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
      "typescript.format.insertSpaceBeforeFunctionParenthesis": true
  }

vscode-element-helper可能尚不支持当前的element-ui版本，视情况设置一个较新的即可。

• 其他推荐插件

  • highlight-matching-tag
  • JavaScript (ES6) code snippets