成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

仿"米丫天氣App"-Vue項目總結(jié)

pakolagij / 1848人閱讀

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

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

vue

vue-router

vuex

axios

stylus

easy-mock

項目鏈接：weather-webapp

項目結(jié)構(gòu)

按字母順序

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

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

components：公共組件

router：路由配置

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

tools：工具函數(shù)

view：邏輯頁面組件

App.vue：根組件

main.js：入口文件

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

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

另外是router.js文件的寫法。在本項目中，我把所有的路由寫在同一個文件，是因為路由比較少，如果在路由結(jié)構(gòu)多而復(fù)雜的項目，這種寫法會很頭疼。建議的寫法是將各個邏輯模塊的路由分開，最后在主路由里引入。大概是這樣的：

// 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里，發(fā)現(xiàn)是不可行（多寫一層也沒啥大問題）。

來說說store

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

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

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

api文件

上述提到的action里使用到請求數(shù)據(jù)的api方法。api方法都會返回一個promise對象，同時也是一個異步函數(shù)。
說到api就要提一下easy-mock。這個網(wǎng)站是基于mock.js，可以很方便生成自定義接口，就算你不會后臺，也可以很快速簡單的編輯自己想要的接口。使用方法嘛，還是直接看官方教程吧。
因為本項目要使用的數(shù)據(jù)比較簡單，所以接口部分沒有什么好說的了。

資源文件

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)
公共組件

基本上我把可以多帶帶提出來的內(nèi)容都寫成公共組件。另外多帶帶寫了一個index.js文件。里面將所有的公共組件引入然后打包導(dǎo)出，這樣在使用的時候就可以少寫很多代碼，這個技巧是之前看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"

待續(xù)。。。

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107994.html

相關(guān)文章

  • VSCode使React Vue代碼調(diào)試變得更愉悅

    　　VSCode使ReactVue代碼調(diào)試變得更爽　　在前段開發(fā)中，大家會遇見調(diào)試 Vue/React 代碼，現(xiàn)在就給大家總結(jié)都有哪幾種：　　先找代碼問題，在console.log 打印日志，用 Chrome Devtools 的 debugger 來調(diào)試，用 VSCode 的 debugger 來調(diào)試?！　】吹绞遣皇遣煌?，不僅效率大大提升就連體驗也是超級幫的，這種體驗讓人超級爽到爆炸?！　『芏?..

    3403771864 評論0 收藏0

  • python如何采集天氣數(shù)據(jù)并做數(shù)據(jù)可視化操作呢？

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

    89542767 評論0 收藏0

  • 解析uni-app和原生小程序混合開發(fā)的具體實現(xiàn)過程

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

    3403771864 評論0 收藏0

  • 微前端qiankun安裝使用

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

    社區(qū)管理員 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<