![](image/home/map.png)
![](image/home/link.png)
回顾 前期
前端利器 —— 提升《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单位!
念及此!项目开始
这里分享一种轻量极简的方式
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;
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
我们在写代码的时候发现如果我们都根据80px为1rem,在编写代码的时候手动转换,非常的麻烦 所以我们可以在vscode中安装一个cssrem的插件帮助我们进行转换 这样一来开发过程中会更加的方便
在vscode扩展中找到 cssrem插件 最新名字叫px to rem & rpx 安装到vscode中 点击右下角设置
修改Root Font Size(基准font-size) 配置项为80即可
至此自适应 px转rem 前期已经完成!!!
但是你想一下,我们修改了 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减少,早早下班
返回
敬请谅解,乡镇数据正在努力更新中...
头
1
2
3
4
5
6
返回