摘要：主要是通過(guò)這個(gè)項(xiàng)目來(lái)練習(xí)一個(gè)完整的項(xiàng)目所需要考慮到的地方。目前項(xiàng)目還有不少，先發(fā)了，后面再慢慢優(yōu)化。目前正在打算準(zhǔn)備使用。米丫天氣注意我試過(guò)把寫(xiě)在路由屬性中而不是里，發(fā)現(xiàn)是不可行多寫(xiě)一層也沒(méi)啥大問(wèn)題。

先說(shuō)說(shuō)寫(xiě)這個(gè)項(xiàng)目的動(dòng)機(jī)。之前工作的時(shí)候，雖然做過(guò)不少項(xiàng)目，但是因?yàn)楹灹吮Ｃ軈f(xié)議，沒(méi)法把代碼放出來(lái)。后來(lái)跳槽的時(shí)候，拿不出一個(gè)完整的個(gè)人項(xiàng)目，只能把平時(shí)寫(xiě)的一些小demo拿出來(lái)遛遛。所以打算寫(xiě)一個(gè)自己的項(xiàng)目。
這個(gè)項(xiàng)目仿的是“米丫天氣”APP。也不知道會(huì)不會(huì)侵權(quán)，反正先放上來(lái)再說(shuō)。功能部分其實(shí)很簡(jiǎn)單，只是一般的數(shù)據(jù)獲取，還有用戶(hù)管理這一塊的功能。主要是通過(guò)這個(gè)項(xiàng)目來(lái)練習(xí)一個(gè)完整的項(xiàng)目所需要考慮到的地方。例如：項(xiàng)目文件架構(gòu)，邏輯組件和公共組件應(yīng)該如何安排；vuex部分該怎樣劃分和組合；router部分該怎樣配置；前臺(tái)和后臺(tái)應(yīng)該如果關(guān)聯(lián)。
目前項(xiàng)目還有不少bug，先發(fā)了，后面再慢慢優(yōu)化。
這篇文章將把我做這個(gè)項(xiàng)目的過(guò)程和一些想法描述出來(lái)，給自己總結(jié)一下。當(dāng)然，如果可以幫助到也在寫(xiě)vue的朋友就更好了。

vue

vue-router

vuex

axios

stylus

easy-mock

項(xiàng)目鏈接：weather-webapp

按字母順序

api：請(qǐng)求數(shù)據(jù)時(shí)使用到的方法

assets：靜態(tài)資源。主要包括一些圖標(biāo)和全局樣式之類(lèi)的文件

components：公共組件

router：路由配置

store：集中數(shù)據(jù)管理（vuex）

tools：工具函數(shù)

view：邏輯頁(yè)面組件

App.vue：根組件

main.js：入口文件

這里稍微提一下css的解決方案。
之前一直都在使用sass，只是node-sass很難安裝成功，所以就改用stylus。兩者的差別我感覺(jué)不是很大。另外是.vue文件中的style部分,即使添加scoped屬性,還是會(huì)有可能發(fā)生沖突。例如父子組件的樣式中都擁有同一個(gè)類(lèi)名，這時(shí)就會(huì)發(fā)生沖突。目前正在打算準(zhǔn)備使用css-modules。

對(duì)于路由，各位寫(xiě)過(guò)vue的朋友應(yīng)該都不陌生了。這里主要講一下路由的結(jié)構(gòu)，我把它理解為“分層”，也就是router-view組件的位置。之前在看一個(gè)ui框架的時(shí)候（忘了是啥框架了），留意到它的頁(yè)面分層的概念。大概是這樣的：
1.遮罩層（loading之類(lèi)的） 2.交互層（模態(tài)框什么的） 3.消息提示層（本項(xiàng)目中的toast組件） 4.主內(nèi)容界面 5.嵌套的子路由
目前就只想到這些了。

另外是router.js文件的寫(xiě)法。在本項(xiàng)目中，我把所有的路由寫(xiě)在同一個(gè)文件，是因?yàn)槁酚杀容^少，如果在路由結(jié)構(gòu)多而復(fù)雜的項(xiàng)目，這種寫(xiě)法會(huì)很頭疼。建議的寫(xiě)法是將各個(gè)邏輯模塊的路由分開(kāi)，最后在主路由里引入。大概是這樣的：

// router/module-a.js

const View1 = () => import("@/view/view-1")
const View2 = () => import("@/view/view-2")

export default [
  { path: "/home/module-a/view-1", name: "view-1", component: View1 },
  { path: "/home/module-a/view-2", name: "view-2", component: View2 }
]

// router/index.js

import Vue from "vue"
import Router from "vue-router"
import ModuleA from "./module-a"

Vue.use(Router)

const router = new Router({
  routes: [
    ...ModuleA
  ]
})

export default router

噢，對(duì)了。之前還在sf找到一個(gè)小技巧：如何在切換路由時(shí)，修改瀏覽器標(biāo)簽的標(biāo)題。

router.beforeEach((to, from, next) => {
  window.document.title = to.meta.title || "米丫天氣"
  next()
})

注意：我試過(guò)把title寫(xiě)在路由屬性中而不是meta里，發(fā)現(xiàn)是不可行（多寫(xiě)一層也沒(méi)啥大問(wèn)題）。

在項(xiàng)目的store里面，只有modules，沒(méi)有根層的state，這個(gè)主要是受redux的一些影響吧。把所有需要緩存的數(shù)據(jù)放在一個(gè)store樹(shù)里面，每個(gè)模塊多帶帶控制。另外在store/index.js里面會(huì)看到setState這個(gè)方法。這個(gè)也是受react的影響（this.setState 方法），也是一個(gè)小技巧吧。vuex里面提到mutations只處理同步的操作，actions處理異步操作。那么基本上每個(gè)action都會(huì)commit一個(gè)或者多個(gè)mutation。而mutation是應(yīng)該只修改一個(gè)state還是多個(gè)？這個(gè)問(wèn)題根據(jù)不同的業(yè)務(wù)邏輯會(huì)有不同的結(jié)果。所以定義了setState這個(gè)通用的方法。至于action的寫(xiě)法，本項(xiàng)目里的寫(xiě)法我感覺(jué)還是有點(diǎn)問(wèn)題的。下面是最近找到的關(guān)于async函數(shù)的寫(xiě)法：

async function getSomething() {
    try{
       const result = await apiGetSomething()
       if(result.status === "ok") {
           // some code
       }
    } catch(err) { console.error(err) }
}

關(guān)于這種寫(xiě)法目前還在思考中，后續(xù)會(huì)進(jìn)行修改。

上述提到的action里使用到請(qǐng)求數(shù)據(jù)的api方法。api方法都會(huì)返回一個(gè)promise對(duì)象，同時(shí)也是一個(gè)異步函數(shù)。
說(shuō)到api就要提一下easy-mock。這個(gè)網(wǎng)站是基于mock.js，可以很方便生成自定義接口，就算你不會(huì)后臺(tái)，也可以很快速簡(jiǎn)單的編輯自己想要的接口。使用方法嘛，還是直接看官方教程吧。
因?yàn)楸卷?xiàng)目要使用的數(shù)據(jù)比較簡(jiǎn)單，所以接口部分沒(méi)有什么好說(shuō)的了。

assets部分的圖標(biāo)會(huì)被當(dāng)作依賴(lài)，引用的時(shí)候使用import引入，然后還不能直接使用，必須放到配置項(xiàng)里面，一般是放在data。
然后是style，這里主要是配置全局樣式變量，例如主題色之類(lèi)的。
具體方法：
在build/utils.js的generateLoaders中修改.
添加全局變量的文件配置

const stylusOptions = {
  import: [path.join(__dirname, "../src/assets/style/theme.styl")],
  paths: [path.join(__dirname, "../src/assets/style/"), path.join(__dirname, "../")]
}

其中的theme.styl定義全局變量的文件

修改stylus的配置

stylus: generateLoaders("stylus", stylusOptions),
styl: generateLoaders("stylus", stylusOptions)

基本上我把可以多帶帶提出來(lái)的內(nèi)容都寫(xiě)成公共組件。另外多帶帶寫(xiě)了一個(gè)index.js文件。里面將所有的公共組件引入然后打包導(dǎo)出，這樣在使用的時(shí)候就可以少寫(xiě)很多代碼，這個(gè)技巧是之前看vux-ui里面的組件定義學(xué)到的。

// components/index.js

const TabBar = () => import("./TabBar")
const AddressBar = () => import("./AddressBar")
const TmpPanel = () => import("./TmpPanel")
// ...
export { TabBar, AddressBar, TmpPanel //... }

// 邏輯頁(yè)面引入
import { TabBar, AddressBar, TmpPanel } from "@/components"

待續(xù)。。。