Sketch Material 开源项目教程

Sketch Material 开源项目教程

sketch-materialSketch material is a sketch plugin that will help you generate complex material components like tables, chips, forms etc…项目地址:https://gitcode.com/gh_mirrors/sk/sketch-material

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

sketch-material/
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── app/
│   ├── assets/
│   ├── components/
│   ├── data/
│   ├── helpers/
│   ├── pages/
│   ├── styles/
│   └── templates/
├── config/
│   ├── default.json
│   ├── development.json
│   └── production.json
├── gulpfile.js
├── package.json
└── server.js

• CONTRIBUTING.md: 贡献指南文件。
• LICENSE: 项目许可证文件。
• README.md: 项目说明文件。
• app/: 应用的主要目录，包含前端资源、组件、数据、辅助函数、页面、样式和模板。
• config/: 配置文件目录，包含默认配置、开发环境配置和生产环境配置。
• gulpfile.js: Gulp 任务配置文件。
• package.json: 项目依赖和脚本配置文件。
• server.js: 项目启动文件。

2. 项目的启动文件介绍

server.js 是项目的启动文件，负责启动服务器并加载应用。以下是 server.js 的主要内容：

const express = require('express');
const path = require('path');
const app = express();

app.use(express.static(path.join(__dirname, 'app')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, 'app', 'index.html'));
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

• 引入 express 和 path 模块。
• 创建 express 应用实例。
• 设置静态文件目录为 app 目录。
• 配置路由，所有请求都返回 app/index.html 文件。
• 监听端口，默认端口为 3000。

3. 项目的配置文件介绍

config/ 目录包含项目的配置文件，主要有以下三个文件：

• default.json: 默认配置文件，包含所有环境的通用配置。
• development.json: 开发环境配置文件，覆盖默认配置中的部分设置。
• production.json: 生产环境配置文件，覆盖默认配置中的部分设置。

以下是 default.json 的一个示例：

{
  "server": {
    "port": 3000
  },
  "database": {
    "host": "localhost",
    "port": 27017,
    "name": "sketch-material"
  }
}

• server: 服务器配置，包含端口号。
• database: 数据库配置，包含主机、端口和数据库名称。

开发环境和生产环境的配置文件会根据需要覆盖这些默认设置。

sketch-materialSketch material is a sketch plugin that will help you generate complex material components like tables, chips, forms etc…项目地址:https://gitcode.com/gh_mirrors/sk/sketch-material