仿"米丫天色App"Vue項目總結

媒介

先說說寫這個項目的效果。之前事情的時刻，雖然做過不少項目，然則由於簽了保密協定，沒法把代碼放出來。厥後跳槽的時刻，拿不出一個完全的個人項目，只能把日常平凡寫的一些小demo拿出來遛遛。所以盤算寫一個本身的項目。

這個項目仿的是“米丫天色”APP。也不知道會不會侵權，橫豎先放上來再說。功用部份實在很簡樸，只是平常的數據獵取，另有用戶治理這一塊的功用。主假如經由歷程這個項目來演習一個完全的項目所須要考慮到的處所。比方：項目文件架構，邏輯組件和大眾組件應當如何部署；vuex部份該如何分別和組合；router部份該如何設置；前台和背景應當假如關聯。

現在項目另有不少bug，先發了，背面再逐步優化。

這篇文章將把我做這個項目的歷程和一些主意形貌出來，給本身總結一下。固然，假如能夠協助到也在寫vue的朋儕就更好了。

手藝棧

• vue
• vue-router
• vuex
• axios
• stylus
• easy-mock

項目鏈接：weather-webapp

項目構造

按字母遞次

1. api：要求數據時運用到的要領
2. assets：靜態資本。重要包含一些圖標和全局款式之類的文件
3. components：大眾組件
4. router：路由設置
5. store：集合數據治理（vuex）
6. tools：東西函數
7. view：邏輯頁面組件
8. App.vue：根組件
9. main.js：進口文件

這裏輕微提一下css的解決方案。

之前一向都在運用sass，只是node-sass很難裝置勝利，所以就改用stylus。二者的差異我覺得不是很大。別的是
.vue文件中的
style部份,縱然增加
scoped屬性,照樣會有能夠發生衝突。比方父子組件的款式中都具有同一個類名，這時候就會發生衝突。現在正在盤算預備運用
css-modules。

從路由最先吧

關於路由，列位寫過vue的朋儕應當都不陌生了。這裏重要講一下路由的構造，我把它理解為“分層”，也就是router-view組件的位置。之前在看一個ui框架的時刻（忘了是啥框架了），留意到它的頁面分層的觀點。大概是如許的：
1.遮罩層（loading之類的） 2.交互層（模態框什麼的） 3.音訊提醒層（本項目中的toast組件） 4.主內容界面 5.嵌套的子路由
現在就只想到這些了。

別的是router.js文件的寫法。在本項目中，我把一切的路由寫在同一個文件，是由於路由比較少，假如在路由構造多而龐雜的項目，這類寫法會很頭疼。發起的寫法是將各個邏輯模塊的路由離開，末了在主路由里引入。大概是如許的：

// 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


噢，對了。之前還在sf找到一個小技能：如安在切換路由時，修正瀏覽器標籤的題目。

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


注重：我試過把title寫在路由屬性中而不是meta里，發現是不可行（多寫一層也沒啥大題目）。

來說說store

在項目的store內里，只要modules，沒有根層的state，這個主假如受redux的一些影響吧。把一切須要緩存的數據放在一個store樹內里，每一個模塊零丁掌握。別的在store/index.js內里會看到setState這個要領。這個也是受react的影響（this.setState 要領），也是一個小技能吧。vuex內里提到mutations只處置懲罰同步的操縱，actions處置懲罰異步操縱。那末基本上每一個action都邑commit一個或許多個mutation。而mutation是應當只修正一個state照樣多個？這個題目依據差別的營業邏輯會有差別的效果。所以定義了setState這個通用的要領。至於action的寫法，本項目里的寫法我覺得照樣有點題目的。下面是近來找到的關於async函數的寫法：

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

關於這類寫法現在還在思考中，後續會舉行修正。

api文件

上述提到的action里運用到要求數據的api要領。api要領都邑返回一個promise對象，同時也是一個異步函數。
說到api就要提一下easy-mock。這個網站是基於mock.js，能夠很輕易天生自定義接口，就算你不會背景，也能夠很快速簡樸的編輯本身想要的接口。運用要領嘛，照樣直接看官方教程吧。
由於本項目要運用的數據比較簡樸，所以接口部份沒有什麼好說的了。

資本文件

assets部份的圖標會被看成依靠，援用的時刻運用import引入，然後還不能直接運用，必需放到設置項內里，平常是放在data。
然後是style，這裏主假如設置全局款式變量，比方主題色之類的。
具體要領：
在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)

大眾組件

基本上我把能夠零丁提出來的內容都寫成大眾組件。別的零丁寫了一個index.js文件。內里將一切的大眾組件引入然後打包導出，如許在運用的時刻就能夠少寫許多代碼，這個技能是之前看vux-ui內里的組件定義學到的。

// components/index.js
const TabBar = () => import('./TabBar')
const AddressBar = () => import('./AddressBar')
const TmpPanel = () => import('./TmpPanel')
// ...
export { TabBar, AddressBar, TmpPanel //... }

// 邏輯頁面引入
import { TabBar, AddressBar, TmpPanel } from '@/components'

待續。。。