用vue作完項目的一些用法，技巧總結（很實用）

時間  2019-11-09
標籤 vue 項目 一些 用法 技巧 總結 實用 简体版
原文   原文鏈接

一.vue.js 添加 fastclick的支持

fastclick：處理移動端click事件300毫秒延遲css

1) 安裝

npm install fastclick -S

2) 引入

以後，在main.js中引入，並綁定到bodyhtml

import FastClick from 'fastclick

FastClick.attach(document.body);

二.引用border.css解決1px邊框問題，覺得是border.css代碼，若是有須要能夠加我扣扣(449245882):

1) boder.css

@charset "utf-8";
.border,
.border-top,
.border-right,
.border-bottom,
.border-left,
.border-topbottom,
.border-rightleft,
.border-topleft,
.border-rightbottom,
.border-topright,
.border-bottomleft {
    position: relative;
 }
.border::before,
.border-top::before,
.border-right::before,
.border-bottom::before,
.border-left::before,
.border-topbottom::before,
.border-topbottom::after,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::before,
.border-topleft::after,
.border-rightbottom::before,
.border-rightbottom::after,
.border-topright::before,
.border-topright::after,
.border-bottomleft::before,

.border-bottomleft::after {
    content: "\0020";
    overflow: hidden;
    position: absolute;
}

/* border
 * 因，邊框是由僞元素區域遮蓋在父級
 * 故，子級如有交互，須要對子級設置
 * 定位 及 z軸
 */
 
 .border::before {
    box-sizing: border-box;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    border: 1px solid #eaeaea;
    transform-origin: 0 0;
}

.border-top::before,
.border-bottom::before,
.border-topbottom::before,
.border-topbottom::after,
.border-topleft::before,
.border-rightbottom::after,
.border-topright::before,
.border-bottomleft::before {
    left: 0;
    width: 100%;
    height: 1px;
}

.border-right::before,
.border-left::before,
.border-rightleft::before,
.border-rightleft::after,
.border-topleft::after,
.border-rightbottom::before,
.border-topright::after,
.border-bottomleft::after {
    top: 0;
    width: 1px;
    height: 100%;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    border-top: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-right::before,
.border-rightbottom::before,
.border-rightleft::before,
.border-topright::after {
    border-right: 1px solid #eaeaea;
    transform-origin: 100% 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::before {
    border-bottom: 1px solid #eaeaea;
    transform-origin: 0 100%;
}
.border-left::before,
.border-topleft::after,
.border-rightleft::after,
.border-bottomleft::after {
    border-left: 1px solid #eaeaea;
    transform-origin: 0 0;
}
.border-top::before,
.border-topbottom::before,
.border-topleft::before,
.border-topright::before {
    top: 0;
}
.border-right::before,
.border-rightleft::after,
.border-rightbottom::before,
.border-topright::after {
    right: 0;
}
.border-bottom::before,
.border-topbottom::after,
.border-rightbottom::after,
.border-bottomleft::after {
    bottom: 0;
}
.border-left::before,
.border-rightleft::before,
.border-topleft::after,
.border-bottomleft::before {
    left: 0;
}
@media (max--moz-device-pixel-ratio: 1.49), (-webkit-max-device-pixel-ratio: 1.49), (max-device-pixel-ratio: 1.49), (max-resolution: 143dpi), (max-resolution: 1.49dppx) {
    /* 默認值，無需重置 */
}
@media (min--moz-device-pixel-ratio: 1.5) and (max--moz-device-pixel-ratio: 2.49), (-webkit-min-device-pixel-ratio: 1.5) and (-webkit-max-device-pixel-ratio: 2.49), (min-device-pixel-ratio: 1.5) and (max-device-pixel-ratio: 2.49), (min-resolution: 144dpi) and (max-resolution: 239dpi), (min-resolution: 1.5dppx) and (max-resolution: 2.49dppx) {
    .border::before {
        width: 200%;
        height: 200%;
        transform: scale(.5);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.5);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.5);
    }
}
@media (min--moz-device-pixel-ratio: 2.5), (-webkit-min-device-pixel-ratio: 2.5), (min-device-pixel-ratio: 2.5), (min-resolution: 240dpi), (min-resolution: 2.5dppx) {
    .border::before {
        width: 300%;
        height: 300%;
        transform: scale(.33333);
    }
    .border-top::before,
    .border-bottom::before,
    .border-topbottom::before,
    .border-topbottom::after,
    .border-topleft::before,
    .border-rightbottom::after,
    .border-topright::before,
    .border-bottomleft::before {
        transform: scaleY(.33333);
    }
    .border-right::before,
    .border-left::before,
    .border-rightleft::before,
    .border-rightleft::after,
    .border-topleft::after,
    .border-rightbottom::before,
    .border-topright::after,
    .border-bottomleft::after {
        transform: scaleX(.33333);
    }
}

2) 使用方法

好比須要在 div 上加上一個底部1px的邊框，能夠這樣寫vue

<div class="borter-bottom">

對應其它的邊框，能夠查看css編寫。webpack

三.給路徑加別名

當項目比較複雜，文件層級多的時候，咱們引入文件可能須要這樣寫:web

import "../../../../components"

這樣寫其實很不方便的，也很差定位，vue 給咱們提供別，首先設置別名是在webpack.base.conf.js 的文件中設置。找到正則表達式

resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src'),
      'components': resolve('src/components')
    }
  },

設置的時候就能夠寫成我上面的 resolve('src/components') 。在引入這個文件下面的文件時，直接components/**就能夠了。npm

但對於樣式的圖片的別名，以下代碼json

alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}

<template>
  <img src="assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
  background: url(asset/images/bg.jpg)
}
</style>

上面的代碼, 你會發現只有引入style.css是成功的, 圖片地址和背景圖片地址都會解析失。數組

通過各類搜索找緣由(這時候, 你會發現百度搜索這些技術型的內容, 真是垃圾中的戰鬥機), 最終仍是找到緣由了...
vue-html-loader and css-loader translates non-root URLs to relative paths. In order to treat it like a module path, prefix it with ~
就是要在別名前面加一個~緩存

最終代碼寫成:

alias: {
  'src': path.resolve(__dirname, '../src'),
  'assets': path.resolve(__dirname, '../src/assets'),
  'components': path.resolve(__dirname, '../src/components')
}
<template>
    <img src="~assets/images/logo.jpg" />
</template>
<script>
import 'assets/css/style.css'
</script>
<style>
.logo {
    background: url(~asset/images/bg.jpg)
}
</style>

意思就是: 告訴加載器它是一個模塊，而不是相對路徑

注意: 只有在template中的靜態文件地址和style中的靜態文件地址須要加~, 在script裏的, 別名定義成什麼就寫什麼

四.使用 keep-alive 優化體驗

爲了增長用戶體驗，咱們可使用 keep-alive 來進行頁面的緩存，如

<keep-alive >
  <router-view/>
</keep-alive>

但有時候咱們可能要針對某個頁面緩存或者不緩存，咱們可使用vue 提供的兩個屬性

include - 字符串或正則表達式。只有匹配的組件會被緩存。
exclude - 字符串或正則表達式。任何匹配的組件都不會被緩存。 
<!-- 逗號分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正則表達式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 數組 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

匹配首先檢查組件自身的 name 選項，若是 name 選項不可用，則匹配它的局部註冊名稱 (父組件 components 選項的鍵值)。匿名組件不能被匹配。

五.router-link tag用法

<ul>
    <li>子item</li>
    <li>子item</li>
    <li>子item</li>
</ul>

如上，假如咱們需求是點擊Li 標籤進行跳轉，咱們可能就會在li 標籤上註冊一個點擊事件，用js時行動態跳轉，但假如咱們只在li時行跳轉呢？你可能會想到 router-link ，可是ul 下只能是 li標籤，這時 router-link 就提供了一個 tag 屬性，例如 <li>。 因而咱們使用 tag prop 類指定何種標籤，一樣它仍是會監聽點擊，觸發導航。

<router-link to="/foo" tag="li">foo</router-link>
<!-- 渲染結果 -->
<li>foo</li>
願你成爲終身學習者
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程