vue項目實踐@樹洞（一）

時間 2019-11-13

標籤 vue 項目實踐樹洞简体版

原文原文鏈接

項目名稱

樹洞（tree-hole）javascript

項目背景

有些話不適合對任何人說，何不對着樹洞發泄一下。css

樹洞的想法源自於一個朋友對知己的見解，最初設計有一點像漂流瓶。不過，這樣的想法有一點傻。若是要嚴格匹配出一個知己須要大量的用戶，須要大數據支持，一個初級產品是不可能有如此的用戶羣。因而，我聯想到了電影《解憂雜貨鋪》，這樣就能夠避開大數據，同時對不法行爲也是一種攔截。固然，若是要作成一個成型的產品須要一個漫長的過程。html

這樣的產品在市面上是存在的，有成功的，也有失敗的。當我開始作個項目的時候也並無要把它作完整，畢竟想法不完整，同時還須要進行一些必要的知識補救。也就是說這只是一個Demo，並不完整的東西，僅僅是爲了練習一下技術。最初也想作成一個完整的項目，並且也彙集了一些朋友，不過作到後面有些不盡人意了。你們抱着不掙錢練技術的心態是建設不出好的項目來，並且我以爲主要工做在後端。另外，你們也彷佛都很忙，溝通成本也過高了，只好做罷。前端

因此，在這兒也就不作項目的結構介紹，等作成完整項目以後再作一個全面的輸出。畢竟只有一我的弄，還要去學後端，這是又一個漫長的過程。vue

技術選型

近期主要研究的是vue，以前對比過vue-cli2和vue-cli3的差別，vue-cli3更簡潔。可是以前沒有研究明白，所以此次選用vue-cli3腳手架來進行研究。爲何研究vue？畢竟是中國人本身搞出來的，必須支持一下。html5

因爲沒有UI作圖，因而選用一個UI組件庫來解決這個難題。相對來講，我我的以爲vux更適合一些，其他的大可能是基於商城，組件也並沒那麼豐富。可是它的缺點就是在某些狀況下由於scoped的緣由修改內置樣式修改不了，因而改用vant。vant應該基於ant-design，設計漂亮，組件易用。java

移動端適配以前一直用的rem，rem的適配一般是經過JS動態改變根字體大小來完成，這就須要多一個JS的流程。固然，能夠經過css的方式來固定根字體大小，缺點也很明顯。淘寶前端emfe團隊給了一個相對成熟的適配方式flexible，配合px2rem-loader(px2rem)使用也是至關方便的。關於flexible適配，能夠閱讀一下《使用Flexible實現手淘H5頁面的終端適配》。react

我並沒使用它們作過實際開發，只是研究的時候發現flexible的適配方式我沒搞懂。當viewport縮放動態修改的時候，rem根值也同時動態更改，最後效果和預想的不太同樣。因而我只好寫死viewport，這樣才能恢復我要的效果。多是我配置的方式沒對，之後有空再研究。px2rem我比較喜歡它將特定的樣式根據dpr生成適配樣式，不過它貌似不能處理行內樣式，固然vue極少用行內樣式。webpack

另外，emfe在準備更新flexible 2.0版本的時候放棄了更新，改成推薦vw實現適配。rem適配並不完美，能夠閱讀下大漠老師的文章《再聊移動端頁面的適配》。vw是否是就完美呢，也不是，px換成vw會產生像素差。我以前講過，浮點數始終是不精確的，浮點數還原回px就會發現少了一點。這在移動端仍是能夠忍受的，關於使用詳細能夠查閱《如何在Vue項目中使用vw實現移動端適配》。因而，適配我選用vw，感覺一下效果。git

準備工做

## 構建項目 ##

以前使用的是vue-cli 2，卸掉它，換成vue-cli 3。第一個差異是vue-cli的包名稱改成了@vue/cli。若是須要繼續使用vue-cli 2的工做方式，須要安裝@vue/cli-init包，項目構建命令和vue-cli 2相同。vue-cli其實就是一個模版拷貝的過程，大量的配置會致使模版難以維護，因而重構了vue-cli 3，作了一些初步的封裝，開箱即用。你不作任何配置就能夠進行開發工做，若是要折騰，能夠去修改配置項。

vue-cli 3更換完成，使用vue create命令生成項目，接下來根據須要勾選默認配置。具體的就不囉嗦了，官網文檔對配置項作了大體的說明，再不明白能夠搜索網上教程。我不太喜歡ESLint這個東西，由於在使用非ES寫法的時候就會提示，很煩躁，明明就是正確的JS語法。對比一下，vue-cli 2和vue-cli 3構建的項目，如圖：

從結構上看3.x更加簡潔，將2.x的build目錄、config目錄隱藏了起來，改成了使用vue.config.js來完成配置，默認是沒有這個文件的，須要本身在項目目錄下新建。相似這種配置方式在不少地方都有用到，好比環境變量、測試工具的配置等等。相對於2.x在配置文件內部去作手腳要高明得多，統一管理便於維護。3.x將不須要編譯的資源統一放到了public文件夾，包括index.html文件，去掉了2.x的static目錄。3.x去掉了router目錄，將路由直接放到src下（router.js）。

3.x在src下默認新增了store.js、registerServiceWorker.js兩個文件。store.js自沒必要說，vuex文件，管理vue狀態。registerServiceWorker.js說實話，我沒有在網上查到太多的資料，大多講解是針對react的這個文件。vue-cli 3的構建方式是學習了react的腳手架，原理上它們應該是相通的，它的目的是使項目變成一個PWA（Progressive Web Application）。也就是說，註冊一個服務來進行緩存，下一次即便沒有網絡，這個應用依然能夠訪問。

3.x還多了一個叫作插件的東西，經過vue add命令來添加，在src下會多一個plugins目錄。個人理解插件就像被二次封裝的模板庫，執行添加命令，這個庫按照生成器規定的方式被部署到對應的文件中，從而是vue-cli獲得擴展。於是vue add並不能取代npm install，具體的介紹能夠查看官方文檔。只不過，到底有些什麼已經可用的插件在官網上看不到，只能經過vue ui在圖形界面上查看安裝。我是不太喜歡這種傻瓜式的構建方式，特別中二。再加上插件開發者水平良莠不齊，不見得符合本身開發的意願。除了特殊的狀況，我更喜歡本身去安裝，編寫須要的文件。

再來看看，package.json文件，3.x簡潔了不少，2.x很多依賴包都不見了。（ps：圖中vue3的dependencies中vant是爲了展現插件這個目錄添加進去的，不是3.x新增內容。）編譯運行命令變成了一個名爲vue-cli-service的命令，它的底層仍是啓動一個webpack-dev-server，只不過附帶了一些其它功能。換句話說，它其實也是一個插件。若是要更深層次地瞭解它的工做原理，那麼只有去翻源碼。此外，2.x中好比browserslist這個字段，在3.x也是存在的，因爲我選擇配成的文件.browserslistrc。有不少配置文件均可以放入package.json中，我的認爲，放在單個文件更加直觀更利於維護。

關於vue-cli 3其餘相關的介紹，只有移步官網，裏面講解更全面。不得不吐槽，咱啥時候能完全和IE說拜拜，簡直是bull shit，這給前端開發增長了太多的難題！

## 引入UI組件庫 ##

前面介紹插件已經引入了vant，引入方式：執行vue ui啓動GUI，導入項目。切換到插件 -> 添加插件，選中並安裝插件vue-cli-plugin-vant。接下來在plugins目錄下就會出現vant.js文件，該文件已將vant引入，並且這個文件也在main.js上引入。vant.js引入有一個Locale變量，我開了代碼提示，這時就開始報錯了。這並非什麼大問題，但時常會讓人莫名其妙。

經過插件安裝是其中一種方式，另外一種一樣經過GUI圖形界面，切換到依賴 -> 安裝依賴，切換依賴包的環境，選中並安裝vant。

這不是程序員的操做方式，因而我選擇命令行安裝依賴。

# 經過 npm 安裝
npm i vant -S

有四種方式引入組件，第一種：老方法，這彷佛是不太美麗的作法。

<!-- 引入樣式 -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.2/lib/index.css">

<!-- 引入組件 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vant@2.2/lib/vant.min.js"></script>

<script>
var Vue = window.Vue;
var vant = window.vant;

// 註冊 Lazyload 組件
Vue.use(vant.Lazyload);

// 調用函數式組件
vant.Toast('提示');
</script>

第二種：在main.js導入全部組件，固然也能夠像插件那樣提一個文件出來。

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

第三種：手動按需引入組件。

import Button from 'vant/lib/button';
import 'vant/lib/button/style';

第四種：自動按需引入組件，這纔是工程化的作法。

# 安裝插件
npm i babel-plugin-import -D

// 在 babel.config.js 中配置
module.exports = {
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
};

// 插件會自動將代碼轉化爲按需引入形式
import { Button } from 'vant';

因爲我全項目依靠vant，因此，我使用了第二種方式，但這是不科學的，關於這個後面會提到。

## vw適配 ##

前面介紹技術選型已經作了介紹，下面直接操做。

# 安裝依賴包
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano cssnano-preset-advanced postcss-import postcss-url --S

// 配置postcss.config.js
module.exports = {
  plugins: {
    "postcss-import": {},
    "postcss-url": {},
    "postcss-aspect-ratio-mini": {},
    "postcss-write-svg": {
      uft8: false
    },
    "postcss-cssnext": {},
    "postcss-px-to-viewport": {
      viewportWidth: 375,
      unitPrecision: 3,
      viewportUnit: 'vw',
      selectorBlackList: ['.ignore', '.hairlines'],
      minPixelValue: 1,
      mediaQuery: false
    },
    "postcss-viewport-units": {
      "silence": true
    },
    "cssnano": {
      preset: 'advanced',
      autoprefixer: false,
      "postcss-zindex": false
    }
  }
}

viewportWidth我配置的375，iphone6設計圖，按1倍圖處理，由於不少庫是使用的1倍圖的實際像素來進行適配的。若是不想轉換直接使用1倍圖像素，能夠在selectorBlackList加入'van'來屏蔽轉換，'van'是vant庫全部樣式的前綴。

最後解決vw適配的兼容問題，這個polyfill原理很簡單，至關於將vw單位還原爲該分辨率的實際像素。

<script src="<%= BASE_URL %>js/viewport-units-buggyfill.min.js"></script>
<script src="<%= BASE_URL %>js/viewport-units-buggyfill.hacks.min.js"></script>
<script>window.onload=function(){window.viewportUnitsBuggyfill.init({hacks:window.viewportUnitsBuggyfillHacks})}</script>

這兒須要注意的是不能使用字體圖標，字體圖標使用content來完成的，這個polyfill也使用了content。我不解的是postcss-px-to-viewport也使用了，卻沒有影響。其實，並不建議使用字體圖標，字體圖標一般包含很大的資源。