// 在router文件中
{
    path: 'home',
    name: 'home',
    component: () => import('../views/Home.vue')
}

// 在Home.vue中
export default {
    name: 'home'
}

侧边栏

伸展/收缩
页面宽度过小自动收缩
多级菜单（利用iView组件）

用户相关

消息通知
用户头像
基本资料

动态菜单栏

根据数据动态生成菜单
在菜单项上添加 hidden 属性可以隐藏该菜单项，但还是可以正常访问页面，具体请看 DEMO 及其相关代码

面包屑

展示当前页面的路径

权限控制

如果在未登陆的情况下访问指定页面将会重定向到登陆页

eslint + vscode 自动格式化代码

具体配置方法请点击上面的链接，如果不需要 eslint，请将相关依赖卸载以及根目录下的 .eslintrc.js 删除。

jest 单元测试

如果不需要，请卸载相关依赖及删除根目录下的 tests 目录

页面标题 `document.title`

在 src/utils/index 下可设置默认的 title，在每个路由配置项上可设置对应的 title，具体示例请看代码

其它

利用axios拦截器实现了ajax请求前展示loading 请求结束关闭loading

注意

源码可见并且添加了必要的注释可以自行更改

Index组件一般情况下只需要传数据就行其他不用关注

市面上有大量的vue后台管理系统模板但是功能都太丰富了而且有很多组件用不上所以写了这么一个最基础的只有必要功能的模板 UI库使用的是iView 有大量的组件可用

使用

下载

git clone https://github.com/woai3c/vue-admin-template.git

cd vue-admin-template

npm i

开发

npm run serve

打包

npm run build

打包后的文件不能放在服务器根目录，否则会出现空白页面。

如果确实要把文件放在服务器根目录则需要更改打包的路径，打开 vue.config.js 文件，将如下代码删去即可。

publicPath: './',

使用案例

Vue3.0开发之整合vue-admin-template模板

起源 vue-admin-template模板算是一个比较好的前端开发模板，不过作者好像没有出vue3.0版本的，所以刚好自己在学习vue3.0，就想到开发一个vue3.0的模板，当然大部分代码都是参照vue-admin-template模板的。目前已经完成了大部分的整合开发：vue3.0-admin-template 过程过程无非就是copy代码，修改报错，运行起来，查看效果！！！整个过程
elementUI+vue_vue-admin-template框架

安装克隆项目 git clone https://gitee.com/panjiachen/vue-admin-template.git 进入项目目录 cd vue-element-admin 安装依赖 npm install 启动服务 npm run dev 版本管理由于我们之前的项目是直接从 vue-element-admin 克隆而来,里面拥有原来的提交记录,为了避免冲突, 先将
vue-admin-template 学习笔记

vue-element-admin 是一个后台前端解决方案，它基于 vue 和 element-ui实现。官方建议你可以把 vue-element-admin当做工具箱或者集成方案仓库，在 vue-admin-template 的基础上进行二次开发，想要什么功能或者组件就去 vue-element-admin 那里复制过来。 vue网址： https://cn.vuejs.org/v2/gui
vue-template-admin项目的主题样式设置

一，原有项目的主题设置官方文档：样式 | vue-element-admin (panjiachen.github.io) 按照官网所说，本项目没有设置自动注入 sass 的 mixin 到全局，所以需要在使用的地方手动引入 mixin。 <style rel="stylesheet/scss" lang="scss"> @import "src/styles/mixin.scss"; </
vue-admin-template笔记（四）

Vue学习笔记（四）学习vue-admin-template https://github.com/PanJiaChen/vue-admin-template 上一篇中分析了vue-admin-template的入口逻辑，包括main.js, App.vue, router。这篇根据router来分析下其他的页面。下面是一部分路由代码，也是这篇要分析的页面，表格和树形菜单结构。 { p
vue-admin-template 登录认证授权改造

1. 登录页文件目录 src/view/login/index.vue 登录方法 handleLogin() { this.$refs.loginForm.validate(valid => { if (valid) { this.loading = true // 调用的是 store/modules/user.js 里的 l
vue-admin-template-master模板初使用

【注】 1、vue-element-admin很大，刚开始学习使用template版本 2、vue-element包装了axios，里面api调用关系要搞清楚，取消mock数据，配置自己的后端接口后，看下listBlog的 listAllBlog() { this.$axios.get() } 接口get接url值班与后端获取list列表值是否相同，否则页面还是什么都不会显示。
vue-admin-template-master下载依赖出错

1.vue-admin-template-master下载依赖出错网上很多人说是如下原因造成的（1）node-sass和node/npm的版本冲突造成的。（2）python的版本太高于是我做了以下操作：（1）cmd输入命令“python --version”查看python版本是否正确（2）npm 降级为 6.14.10 （3）npm uninstall node-sass，然后npm

vue-admin-template

在线预览

更新日志

相关依赖

功能

登录页

标签栏

侧边栏

用户相关

动态菜单栏

面包屑

权限控制

eslint + vscode 自动格式化代码

jest 单元测试

页面标题 `document.title`

其它

注意

使用

下载

开发

打包

同类工具

相关阅读

相关文章

相关问答

相关文档

vue-admin-template

在线预览

更新日志

相关依赖

功能

登录页

标签栏

侧边栏

用户相关

动态菜单栏

面包屑

权限控制

eslint + vscode 自动格式化代码

jest 单元测试

页面标题 document.title

其它

注意

使用

下载

开发

打包

同类工具

相关阅读

相关文章

相关问答

相关文档

页面标题 `document.title`