Vue.js實訓【基礎理論(5天)+項目實戰(5天)】博客匯總表【詳細筆記】

實戰項目源碼【鏈接：https://pan.baidu.com/s/1r0Mje3Xnh8x4F1HyG4aQTA? ?提取碼：n6ol】

目? ?錄

1、移動端響應式

1.1、響應式尺寸

1.2、解決方案

1.2.1、視口問題

1.2.2、rem思路

1.2.3、如何實現rem的變化！

1.2.4、默認rem是設計為多少呢？

1.2.5、實現

2、項目搭建

2.1、初始化項目

2.2、處理rem

2.3、搭建路由

---

1、移動端響應式

1.1、響應式尺寸

• 移動端屏幕的尺?是特別多的，所以不可能像pc端那樣，將尺?固定死。移動端開發的時候，尺寸是不建議寫死單位的，如：固定值為多少px。因為多少px?論在哪種設備上?都是?樣的效果， 所以??尺?不同的設備給?戶的界?效果是不?樣的！
• 希望有?種單位可以實現屏幕尺?的?個動態變化！

1.2、解決方案

rem單位是?種解決?案。

1.2.1、視口問題

<!-- 移動端，響應式開發必須具備的！ --> <meta name="viewport"content="width=device-width, initial-scale=1.0, maximumscale=1.0, minimum-scale=1.0, user-scalable=0"/>

1.2.2、rem思路

rem是?個相對單位！1rem 的?? 等于 html標簽的font-size??！

默認html標簽 的font-size是16px. 也就是說 1rem 默認等于 16px.

默認：

html{font-size: 16px; /* 默認 */ } .box{width: 10rem; /* 160px */height: 10rem; }

修改：

html{font-size: 20px; /* 默認 */ } .box{width: 10rem; /* 200px */height: 10rem; }

如果說????的所有單位都使?了rem去實現，就是說：所有的尺???都依賴于html標簽的font-size??。可以通過js去實現控制：在不同屏幕尺?下，修改 html標簽的font-size??！這樣就可以實現不同屏幕下所有??內容的??動態變 化。

1.2.3、如何實現rem的變化！

UI設計師在設計移動端的，寬度是以 375位尺?（iPhoneX），?度是根據內容決定 的。

設計師新建的畫布是 750px的。因為設計師設計移動端的時候?般都是2倍圖！

1.2.4、默認rem是設計為多少呢？

• 1rem = 100px 呢？？？
• ?的： 為了換算容易！

1.2.5、實現

function setRem() {// iphone6var defaultRem = 100; // 基準默認rem大小 使用100的原因是想 計算方便！var designWith = 750; // 基準屏幕設計圖尺寸大小// 當前設備信息var screenWidth = window.innerWidth; // 獲取屏幕寬度！// 推出當前設備的rem尺寸大小是多少px// 基準默認rem大小/基準屏幕設計圖尺寸大小 = 當前的rem大小/當前屏幕尺寸大小var curRem = window.innerWidth * (defaultRem / designWith);document.getElementsByTagName("html")[0].style = "font-size:" + curRem + "px" }setRem();// 屏幕尺寸發生變化的時候！【onresize 事件會在窗口或框架被調整大小時發生。】 window.onresize = setRem

2、項目搭建

2.1、初始化項目

• vue init webpack meituan
• ...
• cd meituan // 進??錄
• cnpm i // 安裝依賴
• npm run dev // 啟動項?

2.2、處理rem

將rem.js 放在 static?錄下?的js?錄??，然后在index.html??引?。

<script src="./static/js/rem.js"></script>

修改index.html????的 meta viewport。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximumscale=1.0,minimum-scale=1.0,user-scalable=0"/>

2.3、搭建路由

1、刪除helloWorld.vue ?件

2、創建pages?錄，創建???件

3、路由配置

import Vue from 'vue' import Router from 'vue-router'Vue.use(Router)// 導入頁面組件 import index from "../pages/index" import user from "../pages/user" import tuangou from "../pages/tuangou" import pay from "../pages/pay" import notfound from "../pages/notfound"var router = new Router({routes: [{path: '/',meta: { title: "美團首頁" },component: index},{path: '/user',meta: { title: "用戶中心" },component: user},{path: '/tuangou/:id', // 動態路由！meta: { title: "團購詳情" },component: tuangou},{path: '/pay',meta: { title: "支付頁面" },component: pay},{path: '*',meta: { title: "404頁面" },component: notfound}] })// 路由攔截 router.beforeEach(function (to, from, next) {// 設計標題document.title = to.meta.title;next(); })// 暴露路由！ export default router;

2.4、處理靜態圖片

井img文件夾放在static目錄下面。

2.5、編寫css樣式

• 方式1： 在vue文件里面的style標簽里面書寫。

• 方式2： 在assets目錄下，創建css文件夾，然后在里面創建對應的css文件，然后在.vue的組件里面引入它。

/* 引入css */ @import url(../assets/css/index.css);

?

多謝觀看~

總結

以上是生活随笔為你收集整理的Vue.js-Day06-AM【项目实战(附带 完整项目源码)-day01-am：移动端响应式（响应式尺寸、视口问题、实现rem变化、rem设计）、实战项目搭建（初始化项目、处理rem、搭建路由）】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。