vue專案實戰《電影快訊》專案總結

建立新的元件、路由、js等檔案時，應該首先建立乙個對應名字的資料夾，然後在資料夾裡面建立的乙個名為index的對應檔案，這樣既能夠避免將所有的**寫在一起，而引起的**複雜的問題，又能避免引入檔案的路徑複雜（只用找到對應名字的資料夾即可，系統會預設尋找當前目錄下名為index的檔案）

當乙個頁面在註冊公共的元件時，我們可以使用component: () => import('[元件路徑]')這種方式按需匯入，可以優化一定的效能。

在匯入外部檔案時，由於當前專案的資源過多且目錄結構複雜而引起的相對路徑較為複雜的問題，我們可以通過@來解決，@表示的是當前專案src目錄，因此我們可以通過@來使用絕對路徑，引入外部檔案。

我們應該為一些路由增添重定向，例如首頁重定向

關於跨域問題的解決方法：利用axios使用反向**來進行跨域，具體做法如下：

在進行資料繫結的時候，有些資料的形式並不是我們期望的。這時，我們需要使用過濾器來生成需要的資料【全域性/區域性過濾器的選擇方式：此過濾器是否被專案中的多個地方共用，是則選用全域性過濾器，否則選用區域性過濾器】，需要注意的是：對於一些資料不同，而最終呈現的樣式不同的情況，我們也可以使用過濾器。

當需要根據輸入的內容進行查詢時，我們應該使用watch來監聽屬性【此屬性是輸入框雙向繫結的資料】。

在輸入框中一直輸入內容時，立即查詢是非常消耗效能【函式防抖現象】，常見的解決方式有兩種：

this
.$nexttick((
)=>);
})

注意：

對於專案中的一些資料，在被多個不相關的頁面共享時，我們可以採用狀態管理（vuex）的方式來管理這些資料。

使用狀態管理時，也推薦採用模組化開發的方式，即在store資料夾下單獨建立乙個資料夾（city），在資料夾下新建乙個index.js。store資料夾下的index.js新增內容如下：

import vue from
'vue'
import vuex from
'vuex'
import city from
'./city'
vue.
use(vuex)
export
default
newvuex.store(,
mutations:
, actions:
, modules:
})

在city/index.js寫入一下結構：

const state =
const mutations =
const actions =
export
default

在其他元件中訪問資料方式：

this.$store.state.[模組名字city].[state中的屬性名]

this.$store.commit(city/[mutations中的方法名], [引數])


<
/div>
<
/template>
export
default
<
/script>
<
/style>

import vue from
'vue'
import messagebox from
'./messagebox'
//引入剛剛建立的js元件模組
export
let messagebox =
(function()
//js元件中需要的一些data/methods及預設值
return
(options)
=>
let messageboxcom = vue.
extend
(messagebox)
;let vm =
newmessageboxcom(,
//將defaults中的資料項註冊到元件的data中，即可以在html結構中使用
methods:
//將defaults中的方法註冊到元件的methods中，可以在html結構中繫結相應的事件})
; document.body.
(vm.$el)
;//將元件的html結構追加到頁面中}}
)();

import from

'@/components/js'

messagebox(}
);

+ 如果沒有設定`default`【預設顯示的元件】，它會不顯示任何內容，即空白展示，因此我們最好時設定一下。

vue專案實戰《電影快訊》專案總結

Vue專案總結

vue專案總結

Vue2仿錘子商城實戰專案專案實戰

vue專案實戰《電影快訊》 專案總結

Vue專案總結

vue專案總結

Vue2仿錘子商城實戰專案專案實戰

相關推薦

vue專案實戰《電影快訊》專案總結