仿"米丫天气App"-Vue项目总结

pakolagij 发布于2019-08-26 12:00 / 1729人阅读

摘要：主要是通过这个项目来练习一个完整的项目所需要考虑到的地方。目前项目还有不少，先发了，后面再慢慢优化。目前正在打算准备使用。米丫天气注意我试过把写在路由属性中而不是里，发现是不可行多写一层也没啥大问题。

前言

先说说写这个项目的动机。之前工作的时候，虽然做过不少项目，但是因为签了保密协议，没法把代码放出来。后来跳槽的时候，拿不出一个完整的个人项目，只能把平时写的一些小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"

待续。。。

超融合服务器专线服务 Quote quoted quot python b&quot&quot

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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
app - 收藏集 - 掘金

摘要：掘金该应用内容灵感来源于应用。理财计算器掘金理财计算器本文原创，转载请注明出处。前言最云阅一个仿网易云音乐，使用及豆瓣开发的开源项目掘金一款基于网易云音乐，使用及豆瓣开发的符合阅读类的开源项目。 [[源码] Android 不要错过的 7 个完整项目学习 - Android - 掘金](https://juejin.im/entry/58ba1...上周推荐了一个商业课程，很多人由于没...

Rango 2019-06-25 11:22 评论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