一、確定專案技術堆疊
vue2.0 + vue-cli3/4 + vue-router + axios + vuex + vant + rem + sass + webpack
二、搭建
推薦使用yarn
yarn，npm(cnpm) 包管理工具
yarn add axios -S
cnpm install axios -S
-S: --save-dev 生產環境的依賴 （dependencies）
-D: --dev 開發環境的依賴 （devDependencies）
- 從0開始搭建
首先我們要創建一個專案，使用以下：
指令：
vue create demo
.....
cd demo
yarn install
npm run serve //專案啟動
或者我們可以使用可視化安裝、配置、安裝插件、啟動專案，
在命令視窗中使用vue ui，彈出頁面
- 使用模塊
- 多環境變數配置（開發、測驗、生產）
- axios 請求攔截，回應攔截 (API統一管理)
- sass 預編譯
- rem移動端適配方案
- vant-ui 按需匯入
- 本地跨域
- vuex
- 300毫秒延遲問題 （較老設備點擊事件有300ms延遲問題）
- 1px 邊框像素問題
- 初始化樣式問題 (reset.css引入專案)
- js工具檔案 （防抖、節流、日期處理、資料型別檢測）
- 字體圖示引入
1.多環境變數首先配置我們的開發環境下的，生產環境下的，測驗環境下的，再運行 npm run build ,或者是test
2.配置axios時，我們寫入請求攔截和回應攔截，進行API的統一管理，請求分兩種形式：分別為get , post 形式進行傳參
3.sass預決議：意思就是說將瀏覽器不能識別的css代碼轉換成瀏覽器能識別的
4.rem：針對于移動端的適配問題，是根據手機螢屏進行適配的–也就是回應式的
5.vue ui 的按需引入
6.本地跨域-- 通常我們使用jsonp跨域
7.vuex–vuex是vue的狀態管理工具，我們可以存放公共資料
8.300毫秒延遲問題 --我們可以下載插件，如下↓
yarn add fastclick -S
//main.js
import fastclick from "fastclick";
fastclick.attach(document.body);
9.1px像素問題 --螢屏的占比不同像素也不同
// aseets/css/border.css
/* 2倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.5);
transform: scaleY(0.5);
}
}
/* 3倍屏 */
@media only screen and (-webkit-min-device-pixel-ratio: 3.0) {
.border-bottom::after {
-webkit-transform: scaleY(0.33);
transform: scaleY(0.33);
}
}
------------------------------------
// main.js
import './aseets/css/border.css'
10.初始化樣式問題 —我們可以在(reset.css中引入專案) 例如 box-sizing:border-box
三、路由
我們經常用的有
- 路由嵌套
- 路由傳參
- 路由守衛
- keep-alive
四、組件化開發
1.組件拆分問題：我們可以封裝公共組件、功能性組件
2.組件開發：父傳子、子傳父、兄弟傳值
五、webpack配置的打包優化（vue.config.js）
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/286411.html
標籤：其他
上一篇：fw問題修改
下一篇：【Makefile】宏控