Form-Create-Designer 项目教程

Form-Create-Designer 项目教程

form-create-designer好用的vue可视化表单设计器项目地址:https://gitcode.com/gh_mirrors/fo/form-create-designer

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

Form-Create-Designer 项目的目录结构如下：

form-create-designer/
├── components/
├── packages/
├── tools/
├── types/
├── cz-config.js
├── eslintignore
├── eslintrc.js
├── gitignore
├── FORM_CREATE_OPERATION.md
├── LICENSE
├── README.md
├── babel.config.js
├── lerna.json
├── package.json
├── rollup.config.ts
└── tsconfig.json

目录介绍

• components/: 包含项目的主要组件。
• packages/: 包含项目的各个子包。
• tools/: 包含项目使用的工具脚本。
• types/: 包含 TypeScript 类型定义文件。
• cz-config.js: Commitizen 配置文件。
• eslintignore: ESLint 忽略文件。
• eslintrc.js: ESLint 配置文件。
• gitignore: Git 忽略文件。
• FORM_CREATE_OPERATION.md: 表单操作文档。
• LICENSE: 项目许可证。
• README.md: 项目说明文档。
• babel.config.js: Babel 配置文件。
• lerna.json: Lerna 多包管理配置文件。
• package.json: 项目依赖和脚本配置文件。
• rollup.config.ts: Rollup 打包配置文件。
• tsconfig.json: TypeScript 配置文件。

2. 项目的启动文件介绍

项目的启动文件主要是 package.json 中的 scripts 部分。以下是一些关键的启动脚本：

{
  "scripts": {
    "dev": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  }
}

启动脚本介绍

• dev: 启动开发服务器。
• build: 构建生产环境代码。
• lint: 运行代码风格检查。

3. 项目的配置文件介绍

babel.config.js

Babel 配置文件，用于配置 JavaScript 转译器 Babel：

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

eslintrc.js

ESLint 配置文件，用于配置代码风格检查：

module.exports = {
  root: true,
  env: {
    node: true
  },
  extends: [
    'plugin:vue/essential',
    '@vue/standard'
  ],
  parserOptions: {
    parser: 'babel-eslint'
  },
  rules: {
    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
  }
}

tsconfig.json

TypeScript 配置文件，用于配置 TypeScript 编译选项：

{
  "compilerOptions": {
    "target": "esnext",
    "module": "esnext",
    "strict": true,
    "jsx": "preserve",
    "importHelpers": true,
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "sourceMap": true,
    "baseUrl": ".",
    "types": [
      "webpack-env"
    ],
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "tests/**/*.ts",
    "tests/**/*.tsx"
  ],
  "exclude": [
    "node_modules"
  ]
}

form-create-designer好用的vue可视化表单设计器项目地址:https://gitcode.com/gh_mirrors/fo/form-create-designer