iis服务器助手广告广告
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue-element-admin配置小结
  • 463
分享到

vue-element-admin配置小结

2024-04-02 19:04:59 463人浏览 安东尼
摘要

目录1. 项目初始化2. 项目精简3. 项目配置4. 项目结构分析1. 项目初始化 git clone https://GitHub.com/PanJiaChen/Vue-eleme

1. 项目初始化

git clone https://GitHub.com/PanJiaChen/Vue-element-admin
cd vue-element-admin
npm install 
npm run dev  

2. 项目精简

删除scr/views下的源码, 保留:

  • dashboard:首页
  • error-page:异常页面
  • login:登录
  • redirect:重定向

对src/router/index 进行相应修改

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)


import Layout from '@/layout'




export const constantRoutes = [
  {
    path: '/redirect',
    component: Layout,
    hidden: true,
    children: [
      {
        path: '/redirect/:path(.*)',
        component: () => import('@/views/redirect/index')
      }
    ]
  },
  {
    path: '/login',
    component: () => import('@/views/login/index'),
    hidden: true
  },
  {
    path: '/auth-redirect',
    component: () => import('@/views/login/auth-redirect'),
    hidden: true
  },
  {
    path: '/404',
    component: () => import('@/views/error-page/404'),
    hidden: true
  },
  {
    path: '/401',
    component: () => import('@/views/error-page/401'),
    hidden: true
  },
  {
    path: '/',
    component: Layout,
    redirect: '/dashboard',
    children: [
      {
        path: 'dashboard',
        component: () => import('@/views/dashboard/index'),
        name: 'Dashboard',
        meta: { title: 'Dashboard', icon: 'dashboard', affix: true }
      }
    ]
  }
]


export const asyncRoutes = [
  // 404 page must be placed at the end !!!
  { path: '*', redirect: '/404', hidden: true }
]

const createRouter = () => new Router({
  // mode: 'history', // require service support
  scrollBehavior: () => ({ y: 0 }),
  routes: constantRoutes
})

const router = createRouter()

// Detail see: Https://github.com/vuejs/vue-router/issues/1234#issuecomment-357941465
export function resetRouter() {
  const newRouter = createRouter()
  router.matcher = newRouter.matcher // reset router
}

export default router

删除 src/router/modules 文件夹

删除 src/vendor文件夹

3. 项目配置

进入src目录下的settings.js配置文件

module.exports = {
  title: 'Project Title',
  showSettings: true,
  tagsView: true,
  fixedHeader: false,
  sidebarLoGo: false,
  errorLog: 'production'
}

3.1 项目标题

在src/settings.js 配置项目标题

在这里插入图片描述

在这里插入图片描述

3.2 showSettings

showSettings用来设置是否显示控制面板,设置为false则不显示

在这里插入图片描述

3.3 tagsView

tagsView是我们打开某个页面是否有页面标签

3.4 fixedHeader

fixedHeader是内容页面向下滑动时头部是否固定,false是不固定, true是固定

在这里插入图片描述

3.5 sidebarLogo

sidebarLogo控制菜单栏上方是否显示图标

在这里插入图片描述

3.6 源码调试

打开vue.config.js文件

找到如下图的位置

在这里插入图片描述

cheap-source-map调试模式没有完全编译展示我们的源代码

我们改成source-map调试模式,这时候再来看Sources的App.vue文件,已经和源代码显示的一样,在这样的环境下调试我们会更加方便
但是source-map有一个缺点,每当我们程序有改动时,也需要同步生成source-map文件,这样会使我们构建变慢,在实际开发过程中推荐使用eval,以增加构建速度 在需要调试的时候使用source-map

在这里插入图片描述

4. 项目结构分析

在这里插入图片描述

  • api :接口请求
  • assets :一些静态文件
  • components : 封装组件
  • direcetive :自定义指令
  • filters :过滤器
  • icons :图标
  • layout :全局框架组件(非常重要)
  • router :路由
  • store :配置vuex
  • styles :全局样式文件
  • utils :工具
  • views :页面组件
  • App.vue :父组件,其他的组件都是嵌套在App.vue里
  • main.js :全局入口文件,将App.vue设置为全局父组件进行渲染
  • permissions.js :登录的校验和登录之后的路由跳转
  • setting.js :配置文件

到此这篇关于vue-element-admin配置小结的文章就介绍到这了,更多相关vue-element-admin配置内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网!

--结束END--

本文标题: vue-element-admin配置小结

本文链接: https://www.lsjlt.com/news/147600.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • vue-element-admin配置小结
    目录1. 项目初始化2. 项目精简3. 项目配置4. 项目结构分析1. 项目初始化 git clone https://github.com/PanJiaChen/vue-eleme...
    99+
    2024-04-02
  • vue admin element noCache设置无效怎么办
    这篇文章主要为大家展示了“vue admin element noCache设置无效怎么办”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“vue admin el...
    99+
    2024-04-02
  • vue-element-admin如何设置默认语言
    目录vue-element-admin设置语言vue-element-admin使用常见问题vue-element-admin添加快捷导航去掉Mock使用真实数据。vue-eleme...
    99+
    2024-04-02
  • vue admin element noCache设置无效如何解决
    这篇文章主要介绍了vue admin element noCache设置无效如何解决的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue admin element noCache设置无效如何解决文章都会有所收...
    99+
    2023-07-04
  • vue项目proxyTable配置小结
    目录前言如何配置proxyTable关于proxyTable的原理前言 proxyTable是一个用于Vue.js应用程序的配置选项,它允许您在开发过程中代理后端API请求。这一功能...
    99+
    2023-05-16
    vue proxyTable配置 vue proxyTable
  • vue-element-admin开发教程(v4.0.0之后)
    目录安装&准备工作&ESLint配置连接后台真数据Mock 假数据不需要 Mock 虚拟数据怎么办?前端拦截器登陆功能自定义 vuex 参数Mock 数据部分代码由于...
    99+
    2024-04-02
  • vue-element-admin登录全流程分享
    目录1.安装最新的vue-element-admin2.如有需要可以去掉eslint3.删除所有的eslint文件4.开始安装依赖包5.启动服务npm run dev 6....
    99+
    2024-04-02
  • vue-element-admin 全局loading加载等待
    最近遇到需求:   全局加载loading,所有接口都要可以手动控制是否展示加载等待的功能 百度了一下,发现好多是写在拦截器内的,在拦截器内调用element ui的loading方...
    99+
    2024-04-02
  • vue-element-admin如何转换成中文
    目录vue-element-admin转换成中文vue-element-admin中文问题vue-element-admin转换成中文 从admin官网上git下来的默认是英文,是修...
    99+
    2024-04-02
  • vue-element-admin开发教程(v4.0.0之前)
    目录安装下载 vue-element-admin,并启动准备工作汉化推荐安装一些好用的扩展ESLintdev.env.js/src/router/index.jsmock 假数据页面...
    99+
    2024-04-02
  • vue-element-admin关闭eslint的校验方式
    目录vue-element-admin关闭eslint校验坑人方法**最终方法:**在根目录找到.eslintignore文件vue-element-admin梳理一、Layout组...
    99+
    2022-11-13
    vue-element-admin 关闭eslint的校验 eslint校验
  • vue-element-admin菜单标签失效怎么办
    小编给大家分享一下vue-element-admin菜单标签失效怎么办,希望大家阅读完这篇文章之后都有所收获,下面让我们一起去探讨吧!设置菜单路由时,代码如下: {   pat...
    99+
    2024-04-02
  • vue-element-admin下载到登录的一些坑
    目录快速上手启动项目登录流程解析替换接口实现登录替换接口遇到的问题快速上手 官方文档:https://panjiachen.github.io/vue-element-admin-s...
    99+
    2024-04-02
  • vue-element-admin中node-sass怎么换成dart-sass
    本篇内容介绍了“vue-element-admin中node-sass怎么换成dart-sass”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成...
    99+
    2023-07-05
  • vue-element-admin项目导入和导出的实现
    vue-element-admin导入组件封装 模板和样式 首先封装一个类似的组件,首先需要注意的是,类似功能,vue-element-admin已经提供了,我们只需要改造即可...
    99+
    2024-04-02
  • Vue-Element-Admin前端接入SSO的方法步骤
    目录概要SSO前端页面1. config.js文件2. SSO.js文件3. 修改permission.js文件4. 修改vue.config.js文件5. 运行概要 相信很多像我一...
    99+
    2024-04-02
  • laravel-admin与vue结合怎么用
    这篇文章主要介绍laravel-admin与vue结合怎么用,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!由于 Laravel-admin 采用的是 pjax 的方式刷新页面,意味着...
    99+
    2024-04-02
  • vue-element-admin按钮级权限管控的实现
    目录思路表结构与数据实现按钮调用随着软件的发展,网站从最初的满足用户业务需求到提升用户。就比如一个按钮只要求权限方面的管控我们可以通过 shiro,注解等方式来实现,但是页面上用户点...
    99+
    2024-04-02
  • Element-UI10个技巧小结
    目录el-scrollbar 滚动条el-upload 模拟点击el-select 下拉框选项过长el-input 首尾不能为空格el-input type=number 输入中文,...
    99+
    2024-04-02
  • nginx.conf配置文件结构小结
    目录核心配置文件的结构nginx进程模型核心配置文件的结构 nginx.conf主要由events、http、server、location、upstream等块配置项和一些行配置项...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作