# vue3+vite+arcgis for api **Repository Path**: cheng_qing_wang/vue3-vite-arcgis-for-api ## Basic Information - **Project Name**: vue3+vite+arcgis for api - **Description**: vue3+vite+arcgis for api - **Primary Language**: JavaScript - **License**: MIT - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 1 - **Forks**: 3 - **Created**: 2023-05-04 - **Last Updated**: 2024-07-17 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # park-system-web 00 ## Project setup ``` npm install ``` ### Compiles and hot-reloads for development ``` npm run dev ``` ### Compiles and minifies for production ``` npm run build:prod ``` ### Lints and fixes files ``` npm run lint ``` ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). outside "dev": "npm run serve --url=http://218.6.69.30:7000", target: 'http://218.6.69.30:11001', ### vscode 工具类 ``` Vue Language Features (Volar): vue3必装 https://marketplace.visualstudio.com/items?itemName=Vue.volar 简介:vue3必装 koroFileHeader: https://marketplace.visualstudio.com/items?itemName=OBKoro1.korofileheader 简介:页面头部自动加注释 Prettier - Code formatter: https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode 简介:代码规范 ESLint: https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint 简介: 代码规范 javascript console utils: https://marketplace.visualstudio.com/items?itemName=whtouche.vscode-js-console-utils 简介:console.log() 快捷键: ctrl+Shift+L Stylelint: https://marketplace.visualstudio.com/items?itemName=stylelint.vscode-stylelint 简介: 样式格式化插件 Tailwind CSS IntelliSense https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss 简介: tailwindcss插件 ``` ``` ### QS 插件 ``` qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'indices'}) //形式： ids[0]=1&ids[1]=2&ids[2]=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'brackets'}) //形式：ids[]=1&ids[]=2&ids[]=3 qs.stringify({ids: [1, 2, 3]}, {arrayFormat: 'repeat'}) //形式： ids=1&ids=2&ids=3 ```` ## 目录结构 ```sh ├── .vscode ├── .vscode.example │ ├── node_modules ├── public # 开放目录，该目录下的文件，编译后将输出至根目录 │ ├── src │ ├── api # 接口定义、模拟数据(参照api->_demo.ts) 命名 (来源与接口一致，正常中横线写法xx-xx) │ ├── assets # 内嵌资源目录，从该目录引用的文件，编译后由脚本处理导入 │ ├── components # 全局组件封装（命名方式：大驼峰） │ ├── composables # 业务逻辑封装 │ ├── config # 项目配置（静态变量配置在这里） │ ├── dict # 全局字典库 │ ├── directives # 指令 │ ├── enums # 枚举 │ ├── hooks # 钩子函数（所有项目通用写这里、其他写在 composables） │ ├── layout # 布局组件 │ ├── plugins # 插件 │ ├── router # 路由 │ ├── settings # 项目设置（禁止随意调整） │ ├── store # 全局状态管理（pinia库） │ ├── styles # 全局样式配置 │ ├── types # 项目内部ts类型配置（仅本项目使用的ts类型） │ ├── utils # 工具库 │ │ ├── base # 项目工具写在这里 │ ├── views # 页面（1.文件夹命名中横线xxx-xxx） │ │ ├── components # 项目内部组件 │ ├── .env # 环境变量 - 通用（会被下列文件覆盖、优先级最小） ├── .env.development # 环境变量 - 本地开发 ├── .env.production # 环境变量 - 线上生产 ├── .env.qa # 环境变量 - 线上测试 # ├── .env.example ├── .gitignore ├── .gitmodules ├── index.html ├── pnpm-lock.yaml ├── package-lock.json ├── package.json ├── postcss.config.js ├── README.md │ │ ├── #规范类 start ├── .eslintignore ├── .eslintrc-auto-import.json ├── .eslintrc.js │ ├── .prettierignore ├── prettier.config.js │ ├── .stylelintignore ├── tailwind.config.js │ ├── commitlint.config.js ├── #规范类 end │ ├── types # 全局通用的ts类型库 ├── tsconfig.json # typescript 配置 └── vite.config.ts # vite 配置 ```` ## 前端工具 https://tinypng.com/ 图片压缩 https://www.tailwindcss.cn/docs tailwindcss 插件中文文档