【亲测免费】 Element China Area Data 项目教程

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

Element China Area Data 项目的目录结构如下：

element-china-area-data/
├── dist/
│   ├── app.commonjs.js
│   ├── app.umd.js
│   └── app.umd.min.js
├── src/
│   ├── data/
│   │   ├── provinceAndCityData.js
│   │   ├── regionData.js
│   │   ├── provinceAndCityDataPlus.js
│   │   └── regionDataPlus.js
│   ├── index.js
│   └── utils.js
├── package.json
└── README.md

目录结构介绍

• dist/：包含编译后的文件，适用于不同的模块系统（CommonJS、UMD）。
• src/：源代码目录。
  • data/：包含省市区的数据文件。
    • provinceAndCityData.js：省市二级联动数据。
    • regionData.js：省市区三级联动数据。
    • provinceAndCityDataPlus.js：带“全部”选项的省市二级联动数据。
    • regionDataPlus.js：带“全部”选项的省市区三级联动数据。
  • index.js：入口文件。
  • utils.js：工具函数文件。
• package.json：项目的配置文件，包含依赖、脚本等信息。
• README.md：项目的说明文档。

2. 项目的启动文件介绍

项目的入口文件是 src/index.js，它导出了项目的主要功能：

import provinceAndCityData from './data/provinceAndCityData';
import regionData from './data/regionData';
import provinceAndCityDataPlus from './data/provinceAndCityDataPlus';
import regionDataPlus from './data/regionDataPlus';
import { CodeToText, TextToCode } from './utils';

export {
  provinceAndCityData,
  regionData,
  provinceAndCityDataPlus,
  regionDataPlus,
  CodeToText,
  TextToCode
};

启动文件介绍

• provinceAndCityData：省市二级联动数据。
• regionData：省市区三级联动数据。
• provinceAndCityDataPlus：带“全部”选项的省市二级联动数据。
• regionDataPlus：带“全部”选项的省市区三级联动数据。
• CodeToText：将区域码转换为汉字。
• TextToCode：将汉字转换为区域码。

3. 项目的配置文件介绍

项目的配置文件是 package.json，它包含了项目的基本信息、依赖和脚本等：

{
  "name": "element-china-area-data",
  "version": "5.0.2",
  "description": "Element UI && antd Cascader option data(Provice, city and district data)",
  "main": "dist/app.commonjs.js",
  "module": "dist/app.umd.js",
  "scripts": {
    "build": "rollup -c"
  },
  "keywords": [
    "element",
    "antd",
    "cascader",
    "china",
    "area",
    "data"
  ],
  "author": "Plortinus <[e-mail]>",
  "license": "MIT",
  "devDependencies": {
    "rollup": "^1.27.14",
    "rollup-plugin-commonjs": "^10.1.0",
    "rollup-plugin-node-resolve": "^5.2.0"
  }
}

配置文件介绍

• name：项目名称。
• version：项目版本。
• description：项目描述。
• main：CommonJS 模块的入口文件。
• module：UMD 模块的入口文件。
• scripts：脚本命令，如 build 用于构建项目。
• keywords：项目关键词。
• author：项目作者。
• license：项目许可证。
• devDependencies：开发依赖。

以上是 Element China Area Data 项目的详细