# oScope

**Repository Path**: sjtunimo/oscope

## Basic Information

- **Project Name**: oScope
- **Description**: ka‧lei‧do‧scope
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: dev
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 4
- **Forks**: 1
- **Created**: 2017-06-03
- **Last Updated**: 2025-12-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# oScope

> Network and Information Management Organization - SJTU

## 安装环境

- `Node v8.9.4 LTS` JavaScript 运行时

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

  - Windows官网下载安装

  - Linux可先安装[nvm](https://github.com/creationix/nvm)，再使用nvm安装node

  - 更新记录

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

## 构建项目

### 使用当前项目

- 把这个项目clone到本地

- 进入项目目录

  ```shell
  cd oscope
  ```

- Build Setup

  ``` bash
  # 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](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).


### 构建一个新项目

- 安装`vue-cli`
  - 安装方法见`Vue.js`[官方文档](https://cn.vuejs.org/v2/guide/installation.html#%E5%91%BD%E4%BB%A4%E8%A1%8C%E5%B7%A5%E5%85%B7-CLI)

  > 开发时使用的版本为`v2.9.2`，已经出现`v3.0.0-alpha`，具体差异不详。但开发过程中曾重新构建过一次项目，产生的差异包括：
  >
  > - Windows下热更新不稳定问题得到解决
  > - ESlint增加了对不规则空格的检查（见下文项目配置-ESLint）
  >
  > 但产生差异的具体原因不详（LuminousXLB@2018-2-6）

- 运行`vue init webpack oscope`
  - 使用vue提供的一个基于webpack的项目模板初始化项目，详细说明见[vue-js template - Webpack](http://vuejs-templates.github.io/webpack/)
- 模板配置
  ```bash
  ? 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.2`UI框架
    - `material-design-icons v3.0.1`图标库
      - Element UI本身提供了扩展图标库的方式，但实际操作中没有使用，而是选择了material自带的使用方法
    - `clipboard v2.0.4`复制到剪贴板
    - `marked v0.3.16`markdown渲染引擎，用于公告渲染
    - `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`

  ```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环境下使用懒加载

  ```javascript
  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

- `.eslintignore`ESLint忽略的文件

  - 增加`/src/components/Experiment/`

    > `Experiment`模块是在开发过程中用于尝试的playground
    >
    > 即使不加也没啥关系，只是会在尝试的过程中保留各种格式上的限制

- `.eslintrc.js`ESLint配置

  在`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

- 配置

  ```json
  {
      "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