仿"米丫天气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'

---

待续。。。