Miew 3D Molecular Viewer 项目教程

1. 项目目录结构及介绍

Miew 项目的目录结构如下：

miew/
├── miew/
│   ├── docs/
│   ├── examples/
│   ├── demo/
│   └── ...
├── miew-react/
│   └── ...
├── miew-app/
│   └── ...
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE.md
├── README.md
├── README.png
├── babel.config.json
├── package.json
├── postcss.config.js
├── sonar-project.properties
├── yarn.lock
└── ...

目录结构介绍

• miew/: 核心 JavaScript 库，包含文档、示例和演示应用程序。
  • docs/: 项目文档。
  • examples/: 示例代码。
  • demo/: 演示应用程序。
• miew-react/: 一个简单的 React.js 包装组件。
• miew-app/: 一个新的演示应用程序（正在开发中）。
• CHANGELOG.md: 项目更新日志。
• CODE_OF_CONDUCT.md: 行为准则。
• CONTRIBUTING.md: 贡献指南。
• Dockerfile: Docker 配置文件。
• LICENSE.md: 项目许可证。
• README.md: 项目介绍和使用说明。
• README.png: 项目介绍图片。
• babel.config.json: Babel 配置文件。
• package.json: 项目依赖和脚本配置。
• postcss.config.js: PostCSS 配置文件。
• sonar-project.properties: SonarQube 配置文件。
• yarn.lock: Yarn 锁定文件。

2. 项目启动文件介绍

Miew 项目的启动文件主要包括 package.json 中的脚本配置和 README.md 中的启动说明。

package.json

{
  "name": "miew",
  "version": "0.11.0",
  "scripts": {
    "start": "yarn run serve",
    "build": "yarn run build",
    "test": "yarn run test",
    "lint": "yarn run lint"
  },
  "dependencies": {
    "lodash": "^4.17.21",
    "three": "^0.153.0"
  },
  "devDependencies": {
    ...
  }
}

启动说明

1. 安装依赖: 使用 yarn install 或 npm install 安装项目依赖。
2. 启动项目: 使用 yarn start 或 npm start 启动项目。

3. 项目配置文件介绍

Miew 项目的主要配置文件包括 babel.config.json、postcss.config.js 和 sonar-project.properties。

babel.config.json

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-proposal-class-properties"]
}

postcss.config.js

module.exports = {
  plugins: [
    require('autoprefixer'),
    require('cssnano')
  ]
}

sonar-project.properties

sonar.projectKey=miew
sonar.projectName=Miew
sonar.projectVersion=0.11.0
sonar.sources=src
sonar.language=js
sonar.sourceEncoding=UTF-8

这些配置文件分别用于 Babel 转译、PostCSS 处理和 SonarQube 代码质量分析。