Vue 從入門到放棄

HimmaHorde發表於2019-12-30
Vue

最近因為工作需求學了下 Vue 並擼了個簡單的商城。

學習經歷

最開始沒正經去學，只是作為一個興趣去了解的 Vue，很久以前算是有點 HTML 和 js 的底子。

  • 第一步先百度下 Vue，查到了 vue.js 的官方文件，看了一通，很多語法似曾相識，例如 {{ value}} 。
  • 起步篇：。。。你一個 js 檔案還需要 nmp 安裝，還有 Vue Cli，至於嗎？這不是增加入門難度嗎？這是我的第一個想法，有點方。。。。
  • 語法使用 ES6，挺好的，就是不知道相容性怎麼樣。。後來發現自己的擔心多餘了。。
  • 再就是 template 模板， if show 判斷
  • 然後是事件處理v-on:click 可以簡寫為 @click
  • 觸發子元件的點選事件 :click.native
  • 子元件傳遞事件給父元件 this.$emit()
  • 還有 for 迴圈需要設定 key 作為複用標識
  • v-model 雙向繫結一般用於輸入框

好了 vue.js 看完了，好像還是缺點什麼啊，看人家的 Vue 專案很高大上啊，為什麼我這裡還只是多引用了一個 js 啊。

Vue Cli

第一次接觸這種形式的 web 開發，以前印象中 web 就是 html + css + js + 記事本。 不得不說我對 web 的認知已經太過時了。

在使用 VueCli 的這一刻我覺的我是在寫一個 web 專案而不是寫個網頁。 逼格瞬間不一樣了啊

假裝科普下安裝命令 npm install -g @vue/cli 不能安裝請經國家批准使用正版翻牆服務安裝

這是個什麼東西那

包含三個關鍵字吧

  • node
  • webpack
  • 生成預設模板的工具

別問我 node 是什麼，webpack 是什麼，我也不知道，我也是百度的（學習成本太不友好了）。。。。

新手可以先略過他們專心學一下 Vue 怎麼用

Vue ui 命令可以使用圖形化管理介面

  • 介面還是很友好的，就是命令執行的速度慢了點，新手友好，另外還有依賴和外掛管理。
  • 看到這裡我就來疑問了，這個依賴和外掛又是什麼關係？
  • 個人看法（這瓜不包熟）：依賴就是正常 npm 包，外掛就是針對 Vue 又寫了點配置，怎麼選擇還是很清晰的。

開啟建立的專案

.vue檔案

  • vue 檔案內寫 html css js
  • main.js 是入口
  • index.html 是承載真個專案的主體

為什麼只有一個 html 檔案。。。 因為預設這是一個單頁面應用，所有是頁面跳轉實際是基於替換指定節點實現的。

以前寫 web 都是用 jQuery，但是網上大神都說不推薦用在 Vue 裡面了，所以就沒有引用。 實際使用中發現 Vue 的資料驅動和繫結確實好使，省去很多的 js 邏輯程式碼，爽。

問題

頁面跳轉

。。。。怎麼跳頁面這是一個問題，百度之！

vue-router 官方的路由管理器

坑： 由於是單頁面應用，在（假）頁面跳轉後返回頁面會重置，使用<keep-alive> 快取之前的頁面，但是對於一些複雜操作有坑，建議根據實際情況慢慢爬。

頁面傳值

兩種模式

params 和 query

類似 post 請求和 get 請求 params 傳參地址不可見，重新整理頁面後會丟失 query 傳引數會拼在地址上。

全域性變數和儲存

vuex localStorage

vuex 記憶體級別的全域性變數，不重新整理就不會丟失，儲存和讀取略顯麻煩。 localStorage 作為的 vuex 持久化儲存

選擇合適的三方

css 樣式實在不適合生擼，找個三方吧 Vant 有讚的 UI，轉為 Vue 設計，可以元件化引用

吐槽下

元件化引用這個東西真心是煩，寫個頁面先引一堆東西。。。。心累 當前也有全域性引用，但是慎用。如果你使用本地載入的話全部引用吧。

網路請求

還是選擇官方的 axios 這地方就遇到一個坑，不知道和我們後臺有麼有關係

// 引數轉化  剔除 null
let formData = new FormData();
for (let key in newOptions.params) {
    if (newOptions.params[key] == null) {
         continue
    }
    formData.append(key, newOptions.params[key])
}
複製程式碼

單位問題

這個問題因為前期沒有百度，所以選了 rem 作為單位（好像現在很多用 vw 做適配單位的），並且很偷懶的把 375 設計稿下 html 字型設定為了 10

很多低版本的谷歌核心有最小字型的限制。。12 還是 14 來著，然後就悲劇了

於是花了半小時看了下 Python，在花了半小時寫個批處理 將 10px 改成了 20px

程式碼如下

import os
import re

path="/Users/****/WebstormProjects/***/src"
for root,dirs,files in os.walk(path):
    for name in files:
        if name.endswith("debug.vue"):
            print(root, dirs, name)
            filePath = root + '/' + name
            # 開啟 vue 檔案
            f=open(filePath,"r")
            # 讀取為一整個字串
            vueString = f.read()
            f.close()
            originalRems = re.findall(r"[0-9.]+[\d]{0,10}tt", vueString)
            originalRems = list(set(originalRems))
            # 更具長度進行排序，防止 replace 時出現錯誤
            originalRems.sort(key=lambda x: len(x), reverse=True)
            print(originalRems)
            nString = vueString
            # 單位 rem 測試用 tt
            unit = 'tt'
            for item in originalRems:
                value = float(item.split(unit)[0])/2
                nString = nString.replace(item, str(value) + 'Flag')

            nString = nString.replace('Flag', unit)
            print(nString)
            # 寫入操作
            # fw = open(filePath,"w")
            # fw.write(nString)
複製程式碼

vant 使用 rem

這地方我有把自己坑了，本來可以用外掛直接px轉 rem 的，但是我自己寫的程式碼已經手動用了 rem 單位，剩下的 px 做單位的都是我特意寫的不縮放的 UI。 但是 pxtorem 沒有忽略資料夾去配置，木得辦法自己手動打個補丁吧

if (css.source.input.file.indexOf("node_modules/vant") == -1) {
            return
}
複製程式碼

相關文章