搭一个前端架构

又是半年没更新,最近研究了点新东西。今天我们来搭一个基于vue的前端架构。

当你跟着vue-cli的创建一个项目文档来创建一个项目时,你只能获得一个最简单的能使用npm run dev(或者是yarn serve)运行的项目。你会获得一个main.js和一个App.vue作为程序的入口,和一个叫做HelloWorld.vue的示例组件。想要完成一个组件完备的项目,还要靠我们自己搭建。如果不想要自己搭建,可以尝试一些组件库,例如element ui,或者是一些搭建好的后台,例如vue-element-admin

这里我们选择自己搭建,否则半年一次的更新到这里就结束了。

准备

首先我们需要总结一下,一个完备的前端项目都需要哪些组件。刚刚重新尝试了一下使用vue-cli创建项目,发现已经是使用yarn管理包了。我们构思好需要用到的包,然后用yarn组织在一起即可。

一个前端架构需要的yarn包:

  • vue
  • vuex
  • vue-router
  • axios
  • 组件库(element-ui或antd或其他)

使用yarn安装好需要用的组件,我们可以在package.json里看到安装好的组件列表。

1
2
3
4
5
6
7
8
9
10
11
12
……
"dependencies": {
"ant-design-vue": "^1.6.5",
"axios": "^0.21.0",
"core-js": "^3.6.5",
"less": "^3.12.2",
"less-loader": "^7.0.2",
"vue": "^2.6.11",
"vue-router": "^3.4.6",
"vuex": "^3.5.1"
},
……

接下来需要准备/src下的目录结构。根据安装好的组件,我们知道我们接下来要准备前端架构下的如下几个模块:

  • env 环境配置
  • config 配置
  • routers 路由
  • store 状态管理
  • utils 工具
  • layouts 图层
  • components 组件
  • views 视图
  • api 接口

于是我们的/src下的目录结构就变成了

1
2
3
4
➜  src git:(develop) pwd
/Volumes/dxever/admin.dxever.com/src
➜ src git:(develop) ls
App.vue api assets components config layouts main.js routers store utils views

接下来的工作就是依次编写这些模块,让各模块之间联动起来,组成一个整体。

env 环境配置

config 配置

routers 路由

store 状态管理

utils 工具

layouts 图层

components 组件

views 视图

api 接口