摘要：主要是通过这个项目来练习一个完整的项目所需要考虑到的地方。目前项目还有不少，先发了，后面再慢慢优化。目前正在打算准备使用。米丫天气注意我试过把写在路由属性中而不是里，发现是不可行多写一层也没啥大问题。
前言
先说说写这个项目的动机。之前工作的时候，虽然做过不少项目，但是因为签了保密协议，没法把代码放出来。后来跳槽的时候，拿不出一个完整的个人项目，只能把平时写的一些小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"
待续。。。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107994.html
VSCode使ReactVue代码调试变得更爽 在前段开发中，大家会遇见调试 Vue/React 代码，现在就给大家总结都有哪几种： 先找代码问题，在console.log 打印日志，用 Chrome Devtools 的 debugger 来调试，用 VSCode 的 debugger 来调试。 看到是不是不同，不仅效率大大提升就连体验也是超级帮的，这种体验让人超级爽到爆炸。 很多...
小编写这篇文章的主要目的，主要是给大家去做出一个解答，解答的是关于python的一些事情，解答的内容包括如何使用python去进行采集，采集的内容主要是天气数据，但是数据内容还是比较的多的，采集完成之后，怎么去做可视化操作呢？下面给大家解答。 前言 最近天气好像有了点小脾气，总是在万分晴朗得时候耍点小性子~ 阴会天，下上一会的雨~提醒我们时刻记得带伞哦，不然会被雨淋或者被太阳公公晒到??...
在微信小程序开发中用新功能利用uni-app来开发，我们看看都有哪些优缺？ 首选我们看看官网给出的解决思路方案 https://uniapp.dcloud.io/hybrid 方式1：把原生小程序转换为uni-app源码。有各种转换工具，详见 方式2：新建一个uni-app项目，把原生小程序的代码变成小程序组件，进而整合到uni-app项目下。uni-app支持使用小程序wxml组件，...
一、前言大型中后台项目一般包括10个以上的子项目，如果维护在一个单页面应用中，项目就会越来越大，而且不利于版本的迭代，微前端就很好的解决了这些问题。这篇文章主要来体验下蚂蚁的微前端：qiankun，虽然比较成熟了，但在体验过程中还是有一些问题，记录总结下，项目代码实践项目以react单页面应用为主应用，然后构建了三个微应用：react、vue3、node静态页面二、前期准备微前端要求多个前端服务，...
阅读 3094·2021-09-22 15:50
阅读 3298·2021-09-10 10:51
阅读 3092·2019-08-29 17:10
阅读 2854·2019-08-26 12:14
阅读 1801·2019-08-26 12:00
阅读 837·2019-08-26 11:44
阅读 626·2019-08-26 11:44
阅读 2789·2019-08-26 11:41
