使用vue開發pc前端及後臺的項目總結(陸續更新)

1.讓img標籤適應比例縮放

項目中作圖片預覽，以下圖，效果要隨着屏幕的大小來作自適應比例縮放，一開始用background-size:cover來作是可行的，但這裏有包括上傳圖片的操做，而上傳圖片的文件流是blob流，用background-url blob流是顯示不出來的，因此這裏須要用img標籤，但標籤咱們經過指定寬度圖片容易變形，因此在想 css3 有沒有提供像background-size這樣的功能，果真查了一下，查到了 object-fit，只要設置值爲 cover 就行啦，具體可查看鑫大神寫的文章 https://www.zhangxinxu.com/wo...

2.讓img 加載好後在執行其它操做

項目中圖片的展現要獲取圖片真實的寬度，而後經過等比縮放在經過阿里oss圖片進行裁剪，這時咱們有一組圖片，須要所有獲取到寬高才能展現而且處理，否則會報找不到圖片的寬高錯誤，這時咱們會選擇promise ，可是單獨用一個 promise是知足不了需求的（是指個人能力），因此能夠經過 promisee.all 來實現，具體流程就是 每次new img 時候生成對應的一個 promise, 最後可能經過 promise.all來判斷是否全部的 promise都執行完成，最後返回 promise.all,如下是我具體的代碼：

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

3. npm build 根據傳入參數來指定編譯正式環境仍是測試環境

咱們通常開發中都有正式跟測試環境的，可是正式跟測試的API是不太同樣的，vue 2.x以上在 config文件下有提供兩個文件dev.evn.js和prod.ven.js分別是打包和運行的全局變量，能夠經過設置裏面的變量來達到咱們想要的值。但對於我作的項目來講，由於我打包出來一個要放在測試的服務器，一個是正式的，由於正式的靜態資源要入在阿里的服務器，這樣我每次打包都是經過手動配置還實現，這樣顯然很麻煩，因此我在buid的時候分別傳入test 或者 prod 表示測試和正式的意思，而後能夠在config下的index裏面獲取而後判斷，代碼以下：

config/index.js

package.json

4.vue項目--favicon設置以及動態修改favicon

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

<link rel="shortcut icon" type="image/x-icon" href="https://static.nvwang.com/favicon.png">

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

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

一個頁面較長，滾動到某個位置，再跳轉到另一個頁面，滾動務默認是在上一個頁面停留的位置，而好的體驗確定是能返回頂部，經過鉤子 afterEach 就能夠實現：

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

window.scrollTo(0, 0);

})

6. router 模擬「滾動到錨點」的行爲

有時咱們須要在路由上指定個錨點，當頁面指定到這個地址時會自動滾動到這個錨點，vue-router 爲咱們提供了一個 scrollBehavior 的鉤子，具體用法以下：

// xx.vue
<router-link :to="path: '/document#abc'">跳到指定錨點</router-link>

<p id='abc'></p>

// router/index.js

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

具體可參考這裏

7. transition 過濾的兩種模式

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

1. in-out:新元素先進行過濾，完成以後當前過渡離開
2. out-in:當前元素先進行過渡，完成以後新元素過渡進入

具體例子:

<transition name="fade" mode="out-in">
    <router-view class="view"></router-view>
  </transition>

8.全部 Vue.js 的模板都是合法的 HTML。

vue官網說模板都是合法的 HTML，這個是什麼意思呢，就是自定義組件沒有自閉合的功能，由於自閉合的功能是 xml 語法，這個常常很出現奇怪的現象以下：

// xxx.vue
<g-input />
<button>我是一個按鍵</button>

上中 g-input 是自定義一個input,咱們採用自閉合的方法，結果運行頁面是看不到 button 這個標籤的，由於 Vue.js 的模板都是合法的 HTML。因此只有寫完整，纔是正確的。

<g-input><g-input>

具體可查看 這裏

願你成爲終身學習者