成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

使用vue開發(fā)pc前端及后臺的項目總結(jié)(陸續(xù)更新)

Baoyuan / 467人閱讀

摘要：所以只有寫完整，才是正確的。具體可查看這里愿你成為終身學(xué)習(xí)者

1.讓img標(biāo)簽適應(yīng)比例縮放

項目中做圖片預(yù)覽，如下圖，效果要隨著屏幕的大小來做自適應(yīng)比例縮放，一開始用background-size:cover來做是可行的，但這里有包括上傳圖片的操作，而上傳圖片的文件流是blob流，用background-url blob流是顯示不出來的，所以這里需要用img標(biāo)簽，但標(biāo)簽我們通過指定寬度圖片容易變形，所以在想 css3 有沒有提供像background-size這樣的功能，果然查了一下，查到了 object-fit，只要設(shè)置值為 cover 就行啦，具體可查看鑫大神寫的文章 https://www.zhangxinxu.com/wo...

2.讓img 加載好后在執(zhí)行其它操作

項目中圖片的展示要獲取圖片真實的寬度，然后通過等比縮放在通過阿里oss圖片進行裁剪，這時我們有一組圖片，需要全部獲取到寬高才能展示并且處理，不然會報找不到圖片的寬高錯誤，這時我們會選擇promise ，但是多帶帶用一個 promise是滿足不了需求的（是指我的能力），所以可以通過 promisee.all 來實現(xiàn)，具體流程就是 每次new img 時候生成對應(yīng)的一個 promise, 最后可能通過 promise.all來判斷是否所有的 promise都執(zhí)行完成，最后返回 promise.all,以下是我具體的代碼：

具體用法可以參考: https://www.jianshu.com/p/7e6...

3. npm build 根據(jù)傳入?yún)?shù)來指定編譯正式環(huán)境還是測試環(huán)境

我們一般開發(fā)中都有正式跟測試環(huán)境的，但是正式跟測試的API是不太一樣的，vue 2.x以上在 config文件下有提供兩個文件dev.evn.js和prod.ven.js分別是打包和運行的全局變量，可以通過設(shè)置里面的變量來達到我們想要的值。但對于我做的項目來說，因為我打包出來一個要放在測試的服務(wù)器，一個是正式的，因為正式的靜態(tài)資源要入在阿里的服務(wù)器，這樣我每次打包都是通過手動配置還實現(xiàn)，這樣顯然很麻煩，所以我在buid的時候分別傳入test 或者 prod 表示測試和正式的意思，然后可以在config下的index里面獲取然后判斷，代碼如下：

config/index.js

package.json

4.vue項目--favicon設(shè)置以及動態(tài)修改favicon

再index.html中添加：(我這邊是靜態(tài)資源都是入在阿里下的，所以直接指定到那個地址)

設(shè)置 favicon的更多設(shè)置可查看 http://www.cnblogs.com/chinab...

5. router.beforeEach 返回頂部，提升用戶體驗

一個頁面較長，滾動到某個位置，再跳轉(zhuǎn)到另外一個頁面，滾動務(wù)默認(rèn)是在上一個頁面停留的位置，而好的體驗肯定是能返回頂部，通過鉤子 afterEach 就可以實現(xiàn)：

router.afterEach((to, from, next) => {

window.scrollTo(0, 0);

})

6. router 模擬“滾動到錨點”的行為

有時我們需要在路由上指定個錨點，當(dāng)頁面指定到這個地址時會自動滾動到這個錨點，vue-router 為我們提供了一個 scrollBehavior 的鉤子，具體用法如下：

// xx.vue
跳到指定錨點




// router/index.js

scrollBehavior (to, from, savedPosition) {
  if (to.hash) {
    return {
      selector: to.hash
    }
  }
}

具體可參考這里

7. transition 過濾的兩種模式

transition 有一個 mode 屬性，文檔好像沒找到，這里簡要說明一下：

in-out:新元素先進行過濾，完成之后當(dāng)前過渡離開

out-in:當(dāng)前元素先進行過渡，完成之后新元素過渡進入

具體例子:
8.所有 Vue.js 的模板都是合法的 HTML。

vue官網(wǎng)說模板都是合法的 HTML，這個是什么意思呢，就是自定義組件沒有自閉合的功能，因為自閉合的功能是 xml 語法，這個經(jīng)常很出現(xiàn)奇怪的現(xiàn)象如下：

// xxx.vue

上中 g-input 是自定義一個input,我們采用自閉合的方法，結(jié)果運行頁面是看不到 button 這個標(biāo)簽的，因為 Vue.js 的模板都是合法的 HTML。所以只有寫完整，才是正確的。

具體可查看 這里

愿你成為終身學(xué)習(xí)者

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/96955.html

相關(guān)文章

  • 前端負(fù)責(zé)人不得不考慮的前端技術(shù)選型及構(gòu)架（一）

    摘要：不光發(fā)展方向多，同一個方向的技術(shù)選型也同樣多，比如的。那么問題來了，在項目中，我們到底應(yīng)該如何展開我們的技術(shù)選型呢，我就結(jié)合我的經(jīng)歷講一講。但是最終還是選擇的包比較大，不利于前端快速加載，相比于那一套的出活率高。 現(xiàn)在前端，都往大前端方向發(fā)展，pc, wapApp, 小程序，混合開發(fā)，桌面開發(fā)，node 后臺。不光發(fā)展方向多，同一個方向的技術(shù)選型也同樣多，比如wapApp的 vue,r...

    geekzhou 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    sutaking 評論0 收藏0

  • 關(guān)于Vue2一些值得推薦的文章 -- 五、六月份

    摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風(fēng)荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。 五、六月份推薦集合 查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。 蘇...

    khs1994 評論0 收藏0

  • 前端最實用書簽(持續(xù)更新)

    摘要：前言一直混跡社區(qū)突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂所以將前端主流技術(shù)做了一個書簽整理不求最多最全但求最實用。 前言 一直混跡社區(qū),突然發(fā)現(xiàn)自己收藏了不少好文但是管理起來有點混亂; 所以將前端主流技術(shù)做了一個書簽整理,不求最多最全,但求最實用。 書簽源碼 書簽導(dǎo)入瀏覽器效果截圖showImg(https://segmentfault.com/img/bVbg41b?w=107...

    sshe 評論0 收藏0

發(fā)表評論

0條評論

Baoyuan

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<