脚本宝典收集整理的这篇文章主要介绍了

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

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

032bd3557a5abcd0000018c1b74486e.jpg

前言

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

待续。。。

总结

以上是脚本宝典为你收集整理的

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

全部内容,希望文章能够帮你解决

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

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过