Hippy 开源项目使用教程-优快云博客

Hippy 开源项目使用教程

HippyHippy is designed to easily build cross-platform dynamic apps. 👏项目地址:https://gitcode.com/gh_mirrors/hi/Hippy

1. 项目的目录结构及介绍

Hippy 项目的目录结构如下：

Hippy
├── devtools # 开发工具
├── dom # DOM 层
├── driver # 不同 UI 驱动层
│   └── js # JS 驱动层
│       ├── examples # JS 驱动层相关示例
│       ├── include
│       ├── packages # JS 驱动层相关包
│       │   ├── hippy-react
│       │   ├── hippy-react-web
│       │   ├── hippy-vue
│       │   ├── hippy-vue-css-loader
│       │   ├── hippy-vue-loader
│       │   ├── hippy-vue-native-components
│       │   └── hippy-vue-router

目录结构介绍

devtools: 包含开发工具的相关文件。
dom: 包含 DOM 层的实现。
driver: 包含不同 UI 驱动层的实现。
- js: JS 驱动层的实现。
  - examples: 包含 JS 驱动层的示例。
  - include: 包含相关头文件。
  - packages: 包含 JS 驱动层的各个包。
    - hippy-react: 针对 React 的 Hippy 实现。
    - hippy-react-web: 针对 React Web 的 Hippy 实现。
    - hippy-vue: 针对 Vue 的 Hippy 实现。
    - hippy-vue-css-loader: Vue 的 CSS 加载器。
    - hippy-vue-loader: Vue 的加载器。
    - hippy-vue-native-components: Vue 的原生组件。
    - hippy-vue-router: Vue 的路由。

2. 项目的启动文件介绍

Hippy 项目的启动文件通常位于 packages 目录下的各个子包中。例如，hippy-vue 包中的启动文件可能是 index.js 或 main.js。

启动文件示例

// hippy-vue/index.js
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$start();

启动文件介绍

index.js 或 main.js: 通常是项目的入口文件，负责初始化 Vue 或 React 实例并启动应用。

3. 项目的配置文件介绍

Hippy 项目的配置文件通常包括 package.json、webpack.config.js 等。

配置文件示例

// package.json
{
  "name": "hippy-vue",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "start": "webpack-dev-server",
    "build": "webpack"
  },
  "dependencies": {
    "vue": "^2.6.12",
    "hippy-vue": "^2.0.0"
  },
  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-dev-server": "^3.11.0"
  }
}