【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

修改為

即可：

傳回頂部

三、項目頁面架構搭建

1、設定背景圖

将圖檔放入

assets

檔案夾中在

app.vue

中設定背景圖:

<template>

  <router-view/>
</template>

<style lang="less">*{
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;//border-box 告訴浏覽器去了解你設定的邊框和内邊距的值是包含在width内的。
 }
 body {
   background: url("~@/assets/bg.jpg") top center no-repeat;
 }</style>

傳回頂部

2、設定标題文字

在

homePage.vue

中設定頁面的頂部标題欄并進行相應的

css樣式

：

<template>
  <div>
      <!-- 頂部标題欄 -->
      <header>
          <h1>大資料可視化--vue3.0與echarts</h1>
      </header>
  </div>
</template>

<script>export default {}</script>

<style lang="less">header{
        height: 1rem;
        width: 100%;
        /* 設定一個半透明淡藍色背景 */
        background-color: rgba(0, 0, 255, .2);
        /* 把标題文字樣式設定 */
        h1{
            font-size: .375rem;
            color:#fff;
            text-align: center;
            line-height: 1rem;
        }
    }</style>

傳回頂部

3、頁面主體部分

（1）section 主體部分

<template>
  <div>
    <!-- 頂部标題欄 -->
    <header>
      <h1>大資料可視化 - Vue3.0&echarts</h1>
    </header>
    <!-- 中間容器 -->
    <section class="container">
        
    </section>
  </div>
</template>

<style lang='less'>/* 中間容器 */
.container{
    // 最大最小的寬度
    min-width: 1200px;
    max-width: 2048px;
    margin: 0 auto;
    // 盒子上10px 左右10px 下0的外邊距
    padding: .125rem .125rem 0;
    // 測試
    height: 10rem;
    background-color: grey;
}</style>

出去頭部标題欄部分，我們需要設定主體的圖表展示部分，建立一個類名為

container

的

section

容器，并為其設定

css樣式

（測試）：

傳回頂部

（2）左、中、右布局

建立左中右這三個部分,分别進行圖型的展示。這個時候我們可以使用

flex布局

來分割他們所占的區塊大小，那麼他們的占比分别是

。首先建立三個

section

容器，分别表示

左

、

中

、

右

部分，然後對其應用

flex布局

，并設定占比。

<template>
  <div>
      <header>
          <h1>大資料可視化--vue3.0與echarts</h1>
      </header>
      <!-- 大容器 -->
      <section class='container'>
          <!-- 左容器 -->
          <section class='itemLeft'>1</section>
          <!-- 中容器 -->
          <section class='itemCenter'>2</section>
          <!-- 右容器 -->
          <section class='itemRight'>3</section>
      </section>
  </div>
</template>

<style lang='less'>/* 中間容器 */
.container {
  // 最大最小的寬度
  min-width: 1200px;
  max-width: 2048px;
  margin: 0 auto;
  // 盒子上10px 左右10px 下0的外邊距
  padding: 0.125rem 0.125rem 0;

  display: flex; //父容器設定flex布局才能在子元素使用
  // 設定左中右的占比 但是不要忘了在父容器要設定flex
  .itemLeft,
  .itemRight {
    flex: 3;
    background-color: pink;    // 測試後注釋掉
  }
  .itemCenter {
    flex: 5;
    background-color: orange;  // 測試後注釋掉
  }
}</style>

效果如圖所示：

傳回頂部

（3）左、右圖表容器整體插槽

大家會發現我們要展示的左、右4個區域的容器效果是一樣的。是以我們可以剝離成一個元件然後重複調用即可。并且在其中放置

slot 槽口

,後期友善向容器内插入圖表。

在

components

檔案夾下建立

itemPage.vue

建立容器元件：

<template>
  <div class="item">
      <!-- 設定插槽 -->
      <slot></slot>
  </div>
</template>

<script>export default {};</script>

<style>.item {
  /* 高度410px */
  height: 5.125rem;
  border: 1px solid blue;
  /* 外邊距20px */
  margin: 0.25rem;
  background-color: rgba(13, 130, 255, 0.851);
}</style>

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

<template>
  <div>
    <!-- 頂部标題欄 -->
    <header>
      <h1>大資料可視化 - Vue3.0&echarts</h1>
    </header>
    <!-- 中間容器 -->
    <section class="container">
      <!-- 左容器 -->
      <section class="itemLeft">
        <!-- 調用插槽元件 -->
        <ItemPage />
        <ItemPage />
      </section>
      <!-- 中容器 -->
      <section class="itemCenter">2</section>
      <!-- 右容器 -->
      <section class="itemRight">
        <ItemPage />
        <ItemPage />
      </section>
    </section>
  </div>
</template>

<script>// 導入插槽元件
import ItemPage from "@/components/itemPage.vue";
export default {
  components: {
    ItemPage,
  },
};</script>

傳回頂部

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

左、右一共4個圖示使用一個公共的元件容器是以我們編寫這4個不同圖表的元件并且分别顯示。然後在4個檔案中分别設定相關内容與樣式（每個圖表的标題不一樣要修改）：

<template>
  <div>
      <h2>圖表一</h2>
      <div class="chart">
          <!-- 圖示容器 -->
      </div>
  </div>
</template>

<script>export default {

}</script>

<style>
</style>

在

homePage.vue

中引用調用使用這4個元件：

<template>
  <div>
    <!-- 頂部标題欄 -->
    <header>
      <h1>大資料可視化 - 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";
// 左右4個小元件的引用
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>

傳回頂部

（5）中間圖表容器布局

在

views

檔案夾下的

homePage.vue

中設定中間區域容器樣式，設定容器高度、内外邊距、邊框：

<!-- 中間容器 -->
<section class="itemCenter"><h2>地圖展示</h2></section>

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

傳回頂部

四、圖表環境搭建

1、Echarts 全局引用

下載下傳

npm install --save echarts

在

vue2.0

中使用如下寫法把

echarts

挂載在

vue執行個體

上,但是這招在

3.0

行不通了:

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

在

vue3.0

中，在

App.vue

中導入全局的

echarts

元件：

<template>
  <router-view />
</template>
<script>import { provide } from "vue";
// 引用echarts
import * as echarts from "echarts";
export default {
  setup() {
    //第一個參數是名字  第二個參數是你傳遞的内容
    provide("echarts", echarts);   // 不是provider，否則會出現下面報錯
  },
};</script>

在

homePage.vue

中進行引用和調用:

<script>// 導入插槽元件
import ItemPage from "@/components/itemPage.vue";
// 左右4個小元件的引用
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import { inject } from '@vue/runtime-core';

export default {
  components: {
    ItemPage,itemOne,itemTwo,itemThree,itemFour,
  },
  // 導入echarts元件 
  setup(){
    let $echarts = inject("echarts");
    // 控制台列印資訊
    console.log($echarts);
  }
};</script>

重新運作項目檢視控制台的輸出，發現報錯，原因是函數名稱寫錯了（見上面

App.vue

的注釋）：

修改後重新運作，可以看到控制台列印了所有的

echarts

屬性資訊：

傳回頂部

2、Axios 全局引用

下載下傳

npm install --save axios

在

vue3.0

中，在

App.vue

中導入全局的

echarts

元件：

<template>
  <router-view />
</template>
<script>import { provide } from "vue";
// 引用echarts
import * as echarts from "echarts";
// 引用axios
import axios from 'axios';
export default {
  setup() {
    //第一個參數是名字  第二個參數是你傳遞的内容
    provide("echarts", echarts);  
    provide("axios", axios);
  },
};</script>

在

homePage.vue

中進行引用和調用:

<script>// 導入插槽元件
import ItemPage from "@/components/itemPage.vue";
// 左右4個小元件的引用
import itemOne from "@/components/itemOne.vue";
import itemTwo from "@/components/itemTwo.vue";
import itemThree from "@/components/itemThree.vue";
import itemFour from "@/components/itemFour.vue";
import { inject } from '@vue/runtime-core';

export default {
  components: {
    ItemPage,itemOne,itemTwo,itemThree,itemFour,
  },
  // 導入echarts元件 
  setup(){
    let $echarts = inject("echarts");
    let $axios = inject("axios");
    console.log($echarts);
    // 控制台列印資訊
    console.log($axios);
  }
};</script>

【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 全局引用

繼續閱讀

PAT (Advanced Level) Practise 1066 Root of AVL Tree (25)

CSU 1806 Toll

CodeChef PALPROB Palindromeness

ZOJ 1032 Area 2

UVA 590 Always on the run

FZU 1978 Repair the brackets

UVA 10344- 23 out of 5

POJ 2115 C Looooops

ZOJ 3700 Ever Dream

UVA 620 Cellular Structure

vue3 transitionvue3 transition元件和vue2 transition元件

swift資料合集

蘋果稽核 Guideline 2.1 - Information Needed

vue學習筆記day12 vue的生命周期

父子元件間傳值的實作父子元件間傳值的實作

手把手教你配置：Jenkins+Github+Webhook +Nginx自動化打包部署Vue項目