【Vue】Vue 项目前端响应式布局及框架搭建

文章目录

​​Vue 项目前端响应式布局及框架搭建​​

​​一、项目基本结构​​​​二、项目分辨率响应式创建​​

​​1、flexible.js​​​​2、引用 flexible 插件​​​​3、修改 flexible 默认配置​​​​4、cssrem 插件 (px -> rem)​​

​​三、项目页面框架搭建​​

​​1、设置背景图​​​​2、设置标题文字​​​​3、页面主体部分​​

​​（1）section 主体部分​​​​（2）左、中、右布局​​​​（3）左、右图表容器整体插槽​​​​（4）左、右各图表容器插槽​​​​（5）中间图表容器布局​​

​​四、图表环境搭建​​

​​1、Echarts 全局引用​​​​2、Axios 全局引用​​

Vue 项目前端响应式布局及框架搭建

环境Vue 3.0+Vue-router+axios、flex布局、LESS、rem屏幕适配、echarts 5.0、nodejs+express

一、项目基本结构

​​返回顶部​​

二、项目分辨率响应式创建

项目是需要根据页面的大小改变 做出响应式改变的 所以我们可以使用第三方插件​​flexible.js​​帮助我们修改​​html​​根节点的​​font-size​​大小,从而控制当前页面的​​rem​​(会根据页面的​​html​​根节点​​font-size​​大小改变而改变)样式改变

1、flexible.js

​​flexible.js​​: web自适应方案 ,阿里团队开源的一个库。使用​​flexible.js​​轻松搞定各种不同的移动端设备兼容自适应问题。

下载 flexible：

G:\Projects\VsCodeProject\vue\app>npm install

​​返回顶部​​

2、引用 flexible 插件

下载完成后找到 ​​src​​ 下的 ​​main.js​​ 进行配置，import导入:

​​返回顶部​​

3、修改 flexible 默认配置

默认情况下只会在 ​​540px分辨率​​ 下生效 所以我们需要根据我们的项目分辨率进行调整,在​​node_module/lib-flexible/flexible.js​​中修改代码如下:

function refreshRem(){ var width = docEl.getBoundingClientRect().width; // if (width / dpr > 540) { // width = 540 * dpr; // } // var rem = width / 10; // 修改 最大值：2560 最小值：400 if (width /dpr < 400){ width = 400 * dpr; } else if(width /dpr > 2560){ width = 2560 * dpr; } // 设置成24分 1920px设计稿 1rem=80px var rem = width / 24; docEl.style.fontSize = rem + 'px'; flexible.rem = win.rem = rem;}

修改好了之后重启项目: ·​​G:\Projects\VsCodeProject\vue\app>npm run serve​​ ,这个时候重启项目大家打开浏览器调试器 即可发现在浏览器大小改变的时候 在html根节点上会自动设置一个​​font-size​​，当我们拖动窗口大小的时候，其值会自动改变。

​​返回顶部​​

4、cssrem 插件 (px -> rem)

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

我们打开 ​​homePage.vue​​ 页面，添加一个测试的 ​​div​​ 样式， ​​font-size​​ 设置为 ​​50px​​，可以发现提示中自动帮我们转换成了 ​​3.125rem​​：

如果不能够换成对应的比例，可能​​cssrem​​还使用的​​默认 16px -> 1rem​​,找到安装的插件，打开设置，设置 ​​Root Font Size​​ 修改为 ​​80​​ 即可：

​​返回顶部​​

三、项目页面框架搭建

1、设置背景图

将图片放入​​assets​​文件夹中 在​​app.vue​​中设置背景图:

​​返回顶部​​

2、设置标题文字

在 ​​homePage.vue​​ 中设置页面的顶部标题栏并进行相应的​​css样式​​：

​​返回顶部​​

3、页面主体部分

（1）section 主体部分

出去头部标题栏部分，我们需要设置主体的图表展示部分，创建一个类名为​​container​​的​​section​​容器，并为其设置​​css样式​​（测试）：

​​返回顶部​​

（2）左、中、右布局

创建左中右这三个部分,分别进行图型的展示。这个时候我们可以使用​​flex布局​​来分割他们所占的区块大小，那么他们的占比分别是 ​​3​​ ​​5​​ ​​3​​ 。首先创建三个​​section​​容器，分别表示​​左​​、​​中​​、​​右​​部分，然后对其应用 ​​flex布局​​，并设置占比。

效果如图所示：

​​返回顶部​​

（3）左、右图表容器整体插槽

大家会发现我们要展示的左、右4个区域的容器效果是一样的。所以我们可以剥离成一个组件 然后重复调用即可。并且在其中放置​​slot 槽口​​,后期方便向容器内插入图表。

在​​components​​文件夹下创建 ​​itemPage.vue​​ 创建容器组件：

在views下的homePage中引用调用使用:

​​返回顶部​​

（4）左、右各图表容器插槽

左、右一共4个图标 使用一个公共的组件容器 所以我们编写这4个不同图表的组件并且分别显示。然后在4个文件中分别设置相关内容与样式（每个图表的标题不一样要修改）：

在​​homePage.vue​​中引用调用使用这4个组件：

​​返回顶部​​

（5）中间图表容器布局

在​​views​​文件夹下的 ​​homePage.vue​​ 中设置中间区域容器样式，设置容器高度、内外边距、边框：

地图展示

/* 中间容器 */.container { .itemCenter { flex: 5; // 高度840px height: 10.5rem; border: 1px solid blue; // 内边距10px padding: 0.125rem; // 外边距20px margin: 0.25rem; }}

​​返回顶部​​

四、图表环境搭建

1、Echarts 全局引用

下载 ​​npm install --save echarts​​

在​​vue2.0​​中使用如下写法把​​echarts​​挂载在​​vue实例​​上,但是这招在​​3.0​​行不通了:

// 引用echartsimport * as echarts from "echarts"Vue.prototype.$echarts=echarts;

在 ​​vue3.0​​中，在​​App.vue​​ 中导入全局的​​echarts​​组件：

在​​homePage.vue​​中进行引用和调用:

重新运行项目查看控制台的输出，发现报错，原因是函数名称写错了（见上面​​App.vue​​的注释）：

修改后重新运行，可以看到控制台打印了所有的​​echarts​​属性信息：

​​返回顶部​​

2、Axios 全局引用

下载 ​​npm install --save axios​​

在 ​​vue3.0​​中，在​​App.vue​​ 中导入全局的​​echarts​​组件：

在​​homePage.vue​​中进行引用和调用:

​​返回顶部​​

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。