Vue單文件組件中的小技巧

如何設置路徑的別名

可以在build目錄下的webpack-base-config.js
在resolve進行配置如下

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

extensions是支持設置擴展名稱,上面可以是.js、.vue、.json,還可以在後面進行擴展
alias就是配置別名,列如我們想定位到src資源路徑下那麼就可以通過

{
    '@': resolve('src')
}
//在vue中如何使用 想下面這樣直接就可以使用了
import Detail from '@/pages/detail/Detail'

別名設置的好處是什麼?

有人可能會問,爲什麼設置別名,答案很簡單,設置別名是更加的方便,不用寫很長來引入資源

在vue中如何設置css和css的作用域?

{
    <style lang="stylus" scoped>
    </style>
}

其中lang指的是使用css語言,這裏我使用的是stylus,scoped指的是設置只在這個css作用域範圍

在vue中遍歷的key是從哪裏來?

在開發中,我們都會遍歷後端傳遞來的數據,一般這個key我們都是在用v-for進行循環遍歷data數據的時候,data裏面帶了數據庫唯一的key,列如數據庫中主鍵唯一的id,這個key是不能重複的。
下面我在data中自定義了一組對象屬性

{
    data () {
        return {
            list: [{
                id: '0001',
                username: 'jishu',
                password: '$abcndhfgdfjdjfjdbf3'
            }, {
                id: '0002',
                username: 'zhangsan',
                password: '$agdgfjdjgjfgjfjgjfj'
            }]
        }
    }
}

上面list中的數據我是模擬後端發來的數據,其中的id是唯一不會重複的,那麼key就使用list中的id

在vue中如何設置router?

router的設置在src路徑下router文件下的index.js
這裏注意的是要對其它組件進行路由設置,首先要導入這個組件如下

{
    import City from '@/pages/girs/Woman'
}

// 然後在Router中配置
export default new Router({
    routers: [{
        path: '/girl',
        name: 'Woman',
        component: Woman
    }, {
        path: 'xxxx',
        name: 'xxxxx',
        component: xxxx
    }, {
        path: 'xxxxx',
        name: 'xxxxxxx',
        component: xxxxxxx
    }]
})

routers是一組路由配置的名稱,就是一個數組,因爲路由有很多

path是訪問的路徑

name是名稱這裏最好填寫和組件名一樣

component是組件的名

配置好了我們就可以在vue中使用如下

{
    <router-link to="/girl">
    </router-link>
}

這裏強調的是router-link這個標籤包裹的一定是一個div或者其它的標籤,被它包裹的標籤就變成了一個a標籤當點擊時候就會跳轉到girl上

在vue中如何減少請求次數,優化網站?

我們可以使用vue自帶的標籤,我們在app.vue中進行配置如下

{
<template>
  <div id="app">
    <keep-alive>
      <router-view/>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style>
</style>
}

我們使用了keep-alive包裹了router-view這樣就緩存了請求,大大的降低了網站的頻繁請求,十分的方便

在vue中如何使用localStorage

使用localStorage來緩存用戶登錄的狀態或者記錄用戶的操作都是可以的,怎麼使用可以自定義一個js文件

{
    localStorage.xxxx =  xxxx
}

其中的xxxx是vuex中保存的字段,也可以是你要緩存的字段。

在vue中如何使用vuex?

當我們需要在各個組件傳遞數據的時候,就需要使用vuex

當然有些時候我們還是需要和localStorage配合使用,列如記錄用戶的操作記錄,當用戶將選好的產品加入購物車,一刷新頁面,之前選擇的商品就沒有了,一刷新就要重新添加,要藉助localStorage配合使用解決,將state對象放入localStorage中,再將localStorage中存的數據取出來給vuex中的state賦值。如果不存在，說明是第一次打開，則取vuex中定義的state初始值。

我們在src路徑下的store中創建一個index.js來使用vuex，在使用vuex之前需要安裝vuex

{
 import Vue from 'vue' //引入基本vue
 import Vuex from 'vuex'//引入vuex

 export default new Vuex.Store({
     //這裏就是你要保存的邏輯代碼
 })
}