vite + vue3 —— vue地图大屏项目

​回顾  前期  ​       

前端利器 —— 提升《500倍开发效率》 传一张设计稿，点击一建生成项目 好牛_0.活在风浪里的博客-CSDN博客如果非要说它有什么缺点，那么我觉得就是它会，让你cv大法都没处使！！！比如：公司让你写一个小程序、或h5web页面、UI给了你30张UI图，说让你自己切图，你当时就准备拍案而起，拳棒相加，但突然想起来她好像是你老婆，所以 你忍了！你进入到网站，这个时候犹如战神附体，几秒钟搞定一张设计稿（包括透明图），祝大家2022 越来越强。https://blog.csdn.net/m0_57904695/article/details/126976940?csdn_share_tail=%7B%22type%22%3A%22blog%22%2C%22rType%22%3A%22article%22%2C%22rId%22%3A%22126976940%22%2C%22source%22%3A%22m0_57904695%22%7D

目录

项目开始时： 

如何选择rem设配项目 （六步骤）

一：安装

二：根据设计稿修改配置 

 三：在main引入

四：cssrem插件

cssrem插件配置

 五：页面使用

​

六：卸载依赖，复制 flexible.js

配置最小最大宽高 

 下面写入地图

china.vue

 city.vue

home.vue

province.vue

---

---

 

 

 

项目开始时： 

 首先大屏需要自适应！要设置最大最小宽高！最大最小宽高要是用px单位！其他所有使用rem单位！

念及此！项目开始

如何选择rem设配项目 （六步骤）

这里分享一种轻量极简的方式 

一：安装

cnpm i -S lib-flexible

二：根据设计稿修改配置 

 因为默认情况下只会在540px分辨率一下生效 所以我们需要根据我们的项目分辨率进行调整

在node_module/lib-flexible/flexible.js中修改代码如下

        // 修改原始的
        // if (width / dpr > 540) {
        //     width = 540 * dpr;
        // }
        // var rem = width / 10;
--------------------------------------------------
        // 修改成为
          // 最小400px，最大适配2560px
        if (width / dpr < 400) {
            width = 400 * dpr;
        } else if (width / dpr > 2560) {
            width = 2560 * dpr;
        }
        // 设置成24等份，设计稿时1920px的，这样1rem就是80px （1920/24=80）方便使用
        var rem = width / 24;

 三：在main引入

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
// 引用
import 'lib-flexible/flexible.js'

createApp(App).use(store).use(router).mount('#app')

这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个font-size

四：cssrem插件

我们在写代码的时候发现如果我们都根据80px为1rem，在编写代码的时候手动转换，非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便

cssrem插件配置

在vscode扩展中找到 cssrem插件 最新名字叫px to rem & rpx 安装到vscode中 点击右下角设置

修改Root Font Size（基准font-size） 配置项为80即可

 

 五：页面使用

 至此自适应  px转rem 前期已经完成！！！

六：卸载依赖，复制 flexible.js

但是你想一下，我们修改了 node_module ，你将上传到git仓库，别人在拉下来，下载依赖安装，是不是有回到默认的node_module/lib-flexible/flexible.js 配置了，所以我们直接将flexible.js这个文件复制，放在项目中，在将 npm uninstall lib-flexible 卸载了

 配置完成！！！

配置最小最大宽高 

现在就可以在页面开始书写代码了，注意最大最小宽高需要配合@media,最大最小宽高 只能使用px单位，

比如：我需要小于我笔记本宽/高度就不在缩小，

 记录此时到宽高和font-size

最大的外层容器设置最大最小宽高

app.vue设置font-size，不然 虽然限制了最大最小宽但是页面比例还会缩小

 

 大屏模板clone地址https://gitee.com/zhang-kun8888/large-screen-adaptive-template

 下面写入地图

                                                  

 第一：地图是由点组成线！线组成图！

 第二：如果每块的地图区域标识的文字不在居中位置可以在对应的地图json中调节cp ！

 第三：地图数据在 DataV.GeoAtlas地理小工具系列 可以下载 ！

 第四：目前地图全是静态json文件，假如要打包，可能会路径不对，所以放置的位置建议在publick中

 第五：省、城、乡镇地图基于中国地图的json，所以第一步要有中国地图的json！

念及此！我将一步步展示地图，必须一遍回，一边懂

 路由如下

因为地图里所有页面是home的children ，所以在页面使用用于展示地地图

每行重要的地方都有注释，总结：将所需的地图文件准备好，配好路由，建好页面，基本就成了，到此也就基本结束了，最后祝大家2022 越来越强 我会吧项目上传，也把代码全部贴到博文中，希望大家bug减少，早早下班

china.vue

 city.vue

home.vue

province.vue