# 平台简介 ## 项目架构 ### 技术选型 - [Vue3](https://v3.cn.vuejs.org/api/)：开发框架 - [Vite](https://cn.vitejs.dev)：开发环境 - [Element Plus](https://element-plus.org/zh-CN)：UI 控件库 - [Vue Router 是 Vue.js 的官方路由。它与 Vue.js 核心深度集成，让用 Vue.js 构建单页应用变得轻而易举。](https://router.vuejs.org/zh/installation.html) - [Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。](https://pinia.web3doc.top/introduction.html) - [Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。](https://www.axios-http.cn/docs/intro) - [sass css预处理器](https://www.sass.hk/ 、https://vitejs.bootcss.com/guide/features.html#css-pre-processors) - [Es6+](http://es6.ruanyifeng.com/) - 熟悉 es6 基本语法 - ES6是JS的语言规范,就是JS下一代的语法标准,6.0版本的JS。TS是JS的超集,TS比JS更强大,“功能更全”,但是TS多了一个编译的步骤，最后，还是编译成JS代码。 - const是es6语法中来定义常量,let用定义变量,es6语法之前,统一使用var来定义。 ### 主要目录说明 |-- dist -- 存放打包后的代码文件 |-- node_modules -- npm加载的项目依赖包的目录 |-- public -- 项目公共资源目录，静态资源，不会被vue编译 | |-- favicon.ico -- 网站地址栏前面的小图标 |-- src -- 源文件目录，程序员主要工作的地方 | |-- api -- 占位，存接口请求 | |-- assets -- 存放静态文件 | | |-- fonts -- 存放fonts字体，如阿里巴巴字体、icons | | | |-- iconfont -- 阿里巴巴字体 | | |-- images -- 存放images图片，如logo | | |-- mock -- 存放.json测试数据 | | |-- scripts -- 存放.js | | |-- styles -- 存放.css、CSS 预处理器【Sass(.scss、.sass)、Less(.less)、Stylus(.styl、stylus)】 npm add -D sass | | | |-- index.scss -- 全局样式 | | | |-- variables.scss -- 全局变量 | | |-- templates -- 存放公共的模板文件 | |-- components -- 存放vue组件（全局公共组件） | |-- config -- 存放配置相关 | |-- layouts -- 存放布局相关vue | | |-- backend -- 存放后端布局相关vue | | |-- frontend -- 存放前端布局相关vue | | |-- redirect -- 存放重定向 | |-- router -- 存放vue-router路由相关，npm install vue-router --save | |-- store -- 状态管理库，存放pinia相关，Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。npm install pinia --save | |-- utils -- 存放request,存放axios相关，Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。npm install axios | |-- views -- 存放vue组件（具体业务模块） | |-- App.vue -- 项目的根组件，单页应用都需要的 | |-- main.js -- 项目入口文件 |-- .gitignore -- git的管理配置文件，设置哪些目录或文件不管理 |-- index.html -- 项目的默认首页，Vue的组件需要挂载到这个文件上 |-- package.json -- 项目配置文件，包管理、项目名称、版本和命令 |-- package-lock.json -- 项目包的锁定文件，用于防止包版本不一样导致的错误 |-- README.md -- 自述文件 |-- vite.config.js -- 项目配置文件，启动、编译 通用目录名开始第一个字母为小写，比如common，tools 组件目录名开始第一个字母为大写，比如Checkbox，组件目录下默认的组件实现是 index.vue 组件vue开始第一个字母为大写，如ColorPicker.vue ### 初始化项目 ``` npm install ``` ### 编译打包 ``` npm run build ``` ### 开发运行 ``` npm run dev ``` ### 开发运行 ``` npm run serve ``` ### 安装element-plus ``` npm install element-plus --save npm install @element-plus/icons-vue 字体包 需单独引用，此项目用的是阿里巴巴字体 ``` ### 安装vue-router ``` npm install vue-router --save ``` ### 安装pinia,Pinia是vue生态里Vuex的替代者，一个全新的vue状态管理库。Pinia的优势就是，更加简洁的语法，完美支持Vue3的Composition api 和 对TypesCcript的完美支持。 ``` npm install pinia --save ``` ### 安装CSS预处理器 ``` # .scss and .sass 通过服务端处理 npm add -D sass # .less npm add -D less 通过客户端处理的，相比较之下解析会比慢一点。 # .styl and .stylus npm add -D stylus ``` ### 安装axios，Axios 是一个基于 promise 网络请求库，作用于node.js 和浏览器中。 ``` npm install axios ``` ### 安装qs，qs是axios中自带的，也是npm仓库所管理的包。qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。 ``` npm install qs ``` ### 安装nprogress，Nprogress是一个比较简单的页面加载用进度条 ``` npm install --save nprogress ``` ### 安装echarts ``` npm i echarts -s ``` ### 坐标转换 ``` npm install proj4 --save ``` ### 打印，视角缩略图 ``` npm i html2canvas -S ``` ### 比例尺、指南针 ``` npm i cesium-navigation-es6 -S ``` ### 全屏 ``` npm i screenfull ``` ### 各种计算 ``` npm i -S @turf/turf npm uninstall @turf/turf --save ``` ### kriging 克里金插值 ``` npm i @sakitam-gis/kriging npm uninstall @sakitam-gis/kriging --save kriging.js ``` ### md5加密 ``` npm install js-md5 --save ``` ### 前端项目打包出的 js，css资源，非常适合使用 gzip 进行压缩。 ``` npm add -D vite-plugin-compression ``` ### ``` npm install html2canvas ``` ### ``` npm install vue3-print-nb ``` ### 坐标转换 ``` cnpm install proj4 --save ```