Vue 項(xiàng)目前端響應(yīng)式布局及框架搭建

• 一、flexible 插件
• • 1、引用 flexible 插件
  • 2、修改 flexible 默認(rèn)配置
  • 3、展示效果
• 二、cssrem 插件 (px -> rem)
• 三、項(xiàng)目搭建
• • 1、設(shè)置背景圖
  • 2、設(shè)置標(biāo)題文字
• 四、圖表環(huán)境搭建
• • 1、Echarts 全局引用
  • 2、Axios 全局引用

---

一、flexible 插件

項(xiàng)目是需要根據(jù)頁面的大小改變 做出響應(yīng)式改變的 所以我們可以使用第三方插件flexible.js幫助我們修改html根節(jié)點(diǎn)的font-size大小,從而控制當(dāng)前頁面的rem(會(huì)根據(jù)頁面的html根節(jié)點(diǎn)font-size大小改變而改變)樣式改變

flexible.js: web自適應(yīng)方案 ,阿里團(tuán)隊(duì)開源的一個(gè)庫。使用flexible.js輕松搞定各種不同的移動(dòng)端設(shè)備兼容自適應(yīng)問題。

1、引用 flexible 插件

下載
cnpm install --save lib-flexible

下載完成后找到 src 下的 main.js 進(jìn)行配置，import導(dǎo)入

// 引用 flexible 插件 import "lib-flexible/flexible.js";

2、修改 flexible 默認(rèn)配置

默認(rèn)情況下只會(huì)在 540px分辨率 下生效 所以我們需要根據(jù)我們的項(xiàng)目分辨率進(jìn)行調(diào)整,在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 最小值：400if (width / dpr < 400) {width = 400 * dpr;} else if (width / dpr > 2560) {width = 2560 * dpr;}// 設(shè)置成24分 1920px設(shè)計(jì)稿 1rem=80pxvar rem = width / 24;docEl.style.fontSize = rem + 'px';flexible.rem = win.rem = rem;}

3、展示效果

這個(gè)時(shí)候重啟項(xiàng)目大家打開瀏覽器調(diào)試器 即可發(fā)現(xiàn)在瀏覽器大小改變的時(shí)候 在html根節(jié)點(diǎn)上會(huì)自動(dòng)設(shè)置一個(gè)font-size，當(dāng)我們拖動(dòng)窗口大小的時(shí)候，其值會(huì)自動(dòng)改變。

二、cssrem 插件 (px -> rem)

我們在寫代碼的時(shí)候發(fā)現(xiàn)如果我們都根據(jù)80px為1rem在編寫代碼的時(shí)候轉(zhuǎn)換非常的麻煩 所以我們可以在vscode中安裝一個(gè)cssrem的插件幫助我們進(jìn)行轉(zhuǎn)換 ,這樣一來開發(fā)過程中會(huì)更加的方便：

添加一個(gè)測試的 div 樣式， font-size 設(shè)置為 50px，可以發(fā)現(xiàn)提示中自動(dòng)幫我們轉(zhuǎn)換成了 3.125rem：

如果不能夠換成對應(yīng)的比例，可能cssrem還使用的默認(rèn) 16px -> 1rem,找到安裝的插件，打開設(shè)置，設(shè)置 Root Font Size 修改為 80 即可：

三、項(xiàng)目搭建

1、設(shè)置背景圖

將圖片放入assets文件夾中 在app.vue中設(shè)置背景圖:

<template><router-view /> </template><style lang="scss"> * {margin: 0px;padding: 0px;box-sizing: border-box; //border-box 告訴瀏覽器去理解你設(shè)置的邊框和內(nèi)邊距的值是包含在width內(nèi)的。 } body {background: url("~@/assets/xiyang.jpg") top center no-repeat; } </style>

2、設(shè)置標(biāo)題文字

在 myPage.vue 中設(shè)置頁面的頂部標(biāo)題欄并進(jìn)行相應(yīng)的css樣式：

<template><div><!-- 頂部標(biāo)題欄 --><header><h1>頂部標(biāo)題欄</h1></header></div> </template><script> export default {}; </script> <style lang="scss"> header {height: 1rem;width: 100%;/* 設(shè)置一個(gè)半透明淡藍(lán)色背景 */background-color: rgba(240, 150, 213, 0.2);/* 把標(biāo)題文字樣式設(shè)置 */h1 {font-size: 0.375rem;color: #fff;text-align: center;line-height: 1rem;} } </style>

<template><div><!-- 頂部標(biāo)題欄 --><header><h1>頂部標(biāo)題欄</h1></header><!-- 中間容器 --><section class="container"></section></div> </template><script> export default {}; </script> <style lang="scss"> header {height: 1rem;width: 100%;/* 設(shè)置一個(gè)半透明淡藍(lán)色背景 */background-color: rgba(240, 150, 213, 0.2);/* 把標(biāo)題文字樣式設(shè)置 */h1 {font-size: 0.375rem;color: #fff;text-align: center;line-height: 1rem;} } /* 中間容器 */ .container {// 最大最小的寬度min-width: 1200px;max-width: 2048px;margin: 0 auto;// 盒子上10px 左右10px 下0的外邊距padding: 0.125rem 0.125rem 0;// 測試height: 10rem;background-color: rgb(228, 172, 211); } </style>

由于要?jiǎng)?chuàng)建五個(gè)的容器，并且在其中放置slot 槽口,后期方便向容器內(nèi)插入圖表。(Vue中的slot對于編寫可復(fù)用可擴(kuò)展的組件是再合適不過了)

在components文件夾下創(chuàng)建 itemPage.vue 等容器組件：

<template><div class="item"><!-- 設(shè)置插槽 --><slot></slot></div> </template><script> export default {}; </script><style> .item {/* 高度410px */height: 5.125rem;border: 1px solid rgb(255, 169, 243);/* 外邊距20px */margin: 0.25rem; } </style>

itemOne、itemTwo、itemThree、itemFour

<template><div><h2>圖表一</h2><div class="chart"><!-- 圖標(biāo)容器 --></div></div> </template><script> export default {}; </script><style></style>

在views下的myPage.vue中引用調(diào)用使用:

<template><div><!-- 頂部標(biāo)題欄 --><header><h1>大數(shù)據(jù)可視化 - Vue3.0和echarts</h1></header><!-- 中間容器 --><section class="container"><!-- 左容器 --><section class="itemLeft"><ItemPage><itemOne /></ItemPage><ItemPage><itemTwo /></ItemPage></section><!-- 中容器 --><section class="itemCenter"><h2>地圖展示</h2></section><!-- 右容器 --><section class="itemRight"><ItemPage><itemThree /></ItemPage><ItemPage><itemFour /></ItemPage></section></section></div> </template><script> import ItemPage from "@/components/itemPage.vue"; import itemOne from "@/components/itemOne.vue"; import itemTwo from "@/components/itemTwo.vue"; import itemThree from "@/components/itemThree.vue"; import itemFour from "@/components/itemFour.vue"; export default {components: {ItemPage,itemOne,itemTwo,itemThree,itemFour,}, }; </script> <style lang="scss"> header {height: 1rem;width: 100%;/* 設(shè)置一個(gè)半透明淡藍(lán)色背景 */background-color: rgba(240, 150, 213, 0.2);/* 把標(biāo)題文字樣式設(shè)置 */h1 {font-size: 0.375rem;color: #fff;text-align: center;line-height: 1rem;} } /* 中間容器 */ .container {// 最大最小的寬度min-width: 1200px;max-width: 2048px;margin: 0 auto;// 盒子上10px 左右10px 下0的外邊距padding: 0.125rem 0.125rem 0;background-color: rgba(226, 132, 233, 0.5);display: flex; //父容器設(shè)置flex布局才能在子元素使用// 設(shè)置左中右的占比 但是不要忘了在父容器要設(shè)置flex.itemLeft,.itemRight {flex: 3;}.itemCenter {flex: 5;// 高度840pxheight: 10.5rem;border: 1px solid rgb(255, 0, 140);// 內(nèi)邊距10pxpadding: 0.125rem;// 外邊距20pxmargin: 0.25rem;} } </style>

效果如圖所示：

四、圖表環(huán)境搭建

1、Echarts 全局引用

下載
cnpm install --save echarts

在vue2.0中使用如下寫法把echarts掛載在vue實(shí)例上,但是這招在3.0行不通了:

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

在 vue3.0中，在App.vue 中導(dǎo)入全局的echarts組件：

<script> import { provide } from "vue"; // 引用echarts import * as echarts from "echarts"; export default {setup() {//第一個(gè)參數(shù)是名字 第二個(gè)參數(shù)是你傳遞的內(nèi)容provide("echarts", echarts); // 不是provider，否則會(huì)出現(xiàn)下面報(bào)錯(cuò)}, }; </script>

在myPage.vue中進(jìn)行引用和調(diào)用:

<script> export default {// 導(dǎo)入echarts組件setup() {let $echarts = inject("echarts");// 控制臺(tái)打印信息console.log($echarts);}, }; </script>

2、Axios 全局引用

下載cnpm install --save axios

在 vue3.0中，在App.vue 中導(dǎo)入全局的echarts組件：

<script> import { provide } from "vue"; // 引用echarts import * as echarts from "echarts"; // 引用axios import axios from "axios"; export default {setup() {//第一個(gè)參數(shù)是名字 第二個(gè)參數(shù)是你傳遞的內(nèi)容provide("echarts", echarts);provide("axios", axios);}, }; </script>

在myPage.vue中進(jìn)行引用和調(diào)用:

<script> import { provide } from "vue"; // 引用echarts import * as echarts from "echarts"; // 引用axios import axios from "axios"; export default {setup() {//第一個(gè)參數(shù)是名字 第二個(gè)參數(shù)是你傳遞的內(nèi)容provide("echarts", echarts);provide("axios", axios);}, }; </script>

總結(jié)

以上是生活随笔為你收集整理的Vue 项目前端响应式布局及框架搭建的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。