vue-element-admin的模板开发流程

weixin_43914197

已于 2022-04-06 19:27:38 修改

阅读量1.9k

点赞数

分类专栏： Java项目实战经历记录：尚医通文章标签：前端框架

于 2022-03-31 20:13:01 首次发布

本文链接：https://blog.csdn.net/weixin_43914197/article/details/123880814

版权

本文详细介绍了vue-element-admin项目的目录结构、开发流程，包括创建路由、设置页面跳转、定义API以及创建页面组件。同时，针对前端开发中常见的跨域问题，提供了从修改dev.env.js文件到利用Nginx配置解决的方案。

摘要由CSDN通过智能技术生成

前言

本项目前端template是基于vue-element-admin，项目源于尚医通项目

本文主要目的是简单介绍一下框架开发的流程

一、vue-element-admin总览

新版本中，结构已发生变化
下图是vue-element-admin的目录结构：

build：构建脚本
config：全局配置
node_modules：项目依赖模块，由npm下载依赖后自动生成
src：项目源代码
static：静态资源
package.json：项目信息和依赖配置

下图介绍了src目录下的文件结构：
api：定义了各种接口
asset：图片等资源
components：各种公共组件，非公共组件在各自view下维护
icons
router：路由表
store：存储
style：样式
utils：公共工具/非公共工具，在各自view下维护
views：layout
App.vue：项目顶层组件
main.js：项目入口文件
permission.js：认证入口

二、项目开发流程

1.创建路由

路由可以理解为项目中的菜单模块，这里我们在src/router/index.js文件内创建一个新的路由，即医院设置管理，并为其设置了两个子模块
路由列表
主要代码如下：

{
   
  path: '/hospSet',
  component: Layout,
  redirect: '/hospSet/table',
  name: '医院设置管理',
  meta: {
    title: '医院设置管理', icon: 'example' },
  children: [
    {
   
      path: 'list',
      name: '医院设置列表',
      component: () => import('@/views/hospSet/list'),
      meta: {
    title: '医院设置列表', icon: 'table' }
    },
    {
   
      path: 'add',
      name: '医院设置添加',
      component: () => import('@/views/hospSet/add'),
      meta