仿"米丫天氣App"-Vue項目總結

pakolagij 發布于2019-08-26 12:00 / 1834人閱讀

摘要：主要是通過這個項目來練習一個完整的項目所需要考慮到的地方。目前項目還有不少，先發了，后面再慢慢優化。目前正在打算準備使用。米丫天氣注意我試過把寫在路由屬性中而不是里，發現是不可行多寫一層也沒啥大問題。

前言

先說說寫這個項目的動機。之前工作的時候，雖然做過不少項目，但是因為簽了保密協議，沒法把代碼放出來。后來跳槽的時候，拿不出一個完整的個人項目，只能把平時寫的一些小demo拿出來遛遛。所以打算寫一個自己的項目。
這個項目仿的是“米丫天氣”APP。也不知道會不會侵權，反正先放上來再說。功能部分其實很簡單，只是一般的數據獲取，還有用戶管理這一塊的功能。主要是通過這個項目來練習一個完整的項目所需要考慮到的地方。例如：項目文件架構，邏輯組件和公共組件應該如何安排；vuex部分該怎樣劃分和組合；router部分該怎樣配置；前臺和后臺應該如果關聯。
目前項目還有不少bug，先發了，后面再慢慢優化。
這篇文章將把我做這個項目的過程和一些想法描述出來，給自己總結一下。當然，如果可以幫助到也在寫vue的朋友就更好了。

技術棧

vue

vue-router

vuex

axios

stylus

easy-mock

項目鏈接：weather-webapp

項目結構

按字母順序

api：請求數據時使用到的方法

assets：靜態資源。主要包括一些圖標和全局樣式之類的文件

components：公共組件

router：路由配置

store：集中數據管理（vuex）

tools：工具函數

view：邏輯頁面組件

App.vue：根組件

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"

待續。。。

GPU云服務器云服務器 Quote quoted quot python b&quot&quot

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107994.html

VSCode使React Vue代碼調試變得更愉悅

　　VSCode使ReactVue代碼調試變得更爽　　在前段開發中，大家會遇見調試 Vue/React 代碼，現在就給大家總結都有哪幾種：　　先找代碼問題，在console.log 打印日志，用 Chrome Devtools 的 debugger 來調試，用 VSCode 的 debugger 來調試。　　看到是不是不同，不僅效率大大提升就連體驗也是超級幫的，這種體驗讓人超級爽到爆炸。　　很多...

3403771864 2022-09-07 22:27 評論0 收藏0
python如何采集天氣數據并做數據可視化操作呢？

　　小編寫這篇文章的主要目的，主要是給大家去做出一個解答，解答的是關于python的一些事情，解答的內容包括如何使用python去進行采集，采集的內容主要是天氣數據，但是數據內容還是比較的多的，采集完成之后，怎么去做可視化操作呢？下面給大家解答。　　前言　　最近天氣好像有了點小脾氣，總是在萬分晴朗得時候耍點小性子~　　陰會天，下上一會的雨~提醒我們時刻記得帶傘哦，不然會被雨淋或者被太陽公公曬到??...

89542767 2022-11-11 11:07 評論0 收藏0
解析uni-app和原生小程序混合開發的具體實現過程

　　在微信小程序開發中用新功能利用uni-app來開發，我們看看都有哪些優缺？　　首選我們看看官網給出的解決思路方案　　https://uniapp.dcloud.io/hybrid　　方式1：把原生小程序轉換為uni-app源碼。有各種轉換工具，詳見　　方式2：新建一個uni-app項目，把原生小程序的代碼變成小程序組件，進而整合到uni-app項目下。uni-app支持使用小程序wxml組件，...

3403771864 2022-10-10 22:46 評論0 收藏0
微前端qiankun安裝使用

一、前言大型中后臺項目一般包括10個以上的子項目，如果維護在一個單頁面應用中，項目就會越來越大，而且不利于版本的迭代，微前端就很好的解決了這些問題。這篇文章主要來體驗下螞蟻的微前端：qiankun，雖然比較成熟了，但在體驗過程中還是有一些問題，記錄總結下，項目代碼實踐項目以react單頁面應用為主應用，然后構建了三個微應用：react、vue3、node靜態頁面二、前期準備微前端要求多個前端服務，...

社區管理員 2022-10-08 14:59 評論0 收藏0