VUE 编写后台常用的组件

Posted 2023-05-17

参考技术A 前几篇文章我们已经把后台的基础搭建好了，感兴趣的朋友可以点击一些链接，查看之前的基础搭建

我们先看看传统的form表单（这里以element ui为例）

下面开始搜索组件的编写

在src/components/下创建FilterForm.vue组件

以上就是我们的主体部分了，下面我们就来看看怎么使用吧。

我们在src/home.vue页面引入

这样我们的搜索组件就已经完成了。下面我们就可以使用最少的代码进行组件的调用了。下一章我们一起完成table组件的编写。让我们的table简单。

每天学习一点，进步一点。加油

基于vue element-ui整理了一套Web后台的基础架构代码

 

项目参考 vue-element-admin

• 项目地址
• 在线访问
• 文档

目标

为解决前端开发当中部分重复性劳动力,把更多的精力放在交互上。

后台管理可以分为几个模块

• layout(整体布局)
  • Header头部
  • Menu菜单
  • Main页面

细化Main可分为

• 搜索栏

  

• 工具栏

  

• 表格/图表

  

• 分页

  

• 模态框

  

实现

常用功能都以抽象成组件。实际开发当中只需要按照固定格式， 编写少量的配置文件即可实现页面的搭建。为开发节省了大量的 布局时间。实现敏捷式开发。

目录

│  favicon.ico
│  index.html
│  LICENSE
│  package.json
│  README.md
├─build 
├─config      
├─node_modules                   
├─src
│  │  App.vue
│  │  main.js           主入口
│  │  permission.js     全局路由守卫
│  ├─api                服务端接口文件
│  ├─assets             资源文件（包括icon）
│  │  └─icon        
│  ├─components         抽象出来的组件
│  ├─mock               模拟服务端请求数据
│  ├─router             路由配置文件
│  ├─store              vuex文件
│  ├─styles             全局样式集合
│  ├─utils              抽象出来的常用工具
│  └─views              模板页面
└─static                静态资源文件

总结

多数都是实际开发过程当中总结出来的经验。很多场景实际上还没有覆盖， 后续会持续迭代。

准备工作

git clone [email protected]:gjwork/base-admin.git

安装&运行

• 推荐使用 yarn 安装，执行以下命令

yarn
yarn dev

• 如果你坚持用 npm，可执行 npm install && npm run dev，效果一致。