代码拉取完成,页面将自动刷新
同步操作将从 曾小晖/Hui-Admin-Template 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
简述:
1.1.0:
2019-10-03 01:10完成,历时两天多1小时,每一行代码纯手打。
第1天:VueCli3.0基本环境搭建,插件安装,观摩iview-admin-pro布局搭配,做了基本框架页面布局
第2天:新增导航 多栏目切换 通知下拉功能 路由鉴权
1.1.1:
2019-10-03 新增主题风格切换、多页签、顶栏通顶功能,增加配置文件
1.1.2:
2019-10-04 上午完成 新增刷新页面功能
主要技术:
iview3.5 + vuecli3.0
vue-router路由跳转 (层级嵌套适配、跳转前的拦截、跳转后页面自动滚到顶部)
vuex管理 (导航高亮、多分页标签切换、浏览器刷新路由状态控制等)
less语法 flex弹性布局
npm install 安装依赖包
npm run dev 开发模式运行
npm run build 打包
huivue-admin
node_modules npm install 后安装的依赖包
other md文档需要的图片
public 公共目录
src 核心业务目录
assets 图片
main 主框架用到的图片
components 组件
main 主框架
message 消息通知
config 基础配置
config.js 基础配置文件
util.js 常用业务文件(判断是否为空 等)
css css
public.less 全局公共css
router 路由配置
index.js 路由数据文件
router.js 路由操作处理文件
views 页面
tmp.vue 模板页面 (已包含常用的vue生命周期 可删除)
App.vue 主入口vue
main.js 主入口js
store.js vuex文件
babel.config.js babel配置文件
package.json npm包管理文件
README.md 说明文档
vue.config.js 开发打包配置文件
基本配置 config->config.js 里面有详细的说明
// 默认首页
export const indexPage = 'workplace'
// 主题风格
export const themeData = {
themeType: 'dark', // 主题风格配置 dark(经典酷黑) 或者 light(极简雅白) 默认dark经典酷黑
isTabsShow: true, // 是否显示多页签 默认true
headMaxWidth: false // 栏目头部是否通顶(最大宽度) 默认false
}
用户数据 在store.js里面配置 (实际项目可根据接口设置)
state: {
// 已打开的路由数据
routerArr: localStorage.getItem('dataRouter') ? JSON.parse(localStorage.getItem('dataRouter')) : [],
// 用户信息数据
userData: {
roles: ['admin'],
userName: '曾小晖'
}
}
路由鉴权 (已测就算错误访问地址程序报错崩溃 非法的路由也可以重定向到默认首页)
// 一级栏目
{
path: "/form",
name: "form",
component: Main,
meta: {
hide: false, // 是否显示
title: "Dashboard", // 显示文字
icon: "md-speedometer", // 显示图标
permission: ['admin1','admin'] // 权限 数组
},
// 二级栏目
children: [
{
path: "/form/basic_form",
name: "basic-form",
meta: {
hide: false, // 是否显示
title: "基础表单", // 显示文字
permission: ['admin1'] // 权限 数组
},
component: () => import("@/views/form/basic_form")
}
]
}
码云 https://gitee.com/zengxiaohui2019/Hui-Admin-Template
ie 对象不支持“findIndex”属性或方法
npm install babel-polyfill --save
在main.js
import 'babel-polyfill'
存储路由数据到vuex 路由跳转时把vuex数据存到本地 一直报错
Cannot assign to read only property 'matched' of object '#<Object>'
无法分配为对象“#<Object>”的只读属性“ matched”
解决办法: 重新定义数据格式保存
也有个潜在的问题:在路由跳转之前拦截 直接用JSON.stringify(to) 报错看不出问题原因
https://www.zengxiaohui.com/Hui-Admin-Template
本软件Hui-Admin-Template,是一个完全免费开源的产品,您可以任意使用,包括修订、发布、出售等。
如果你觉得它给你的项目带来了帮助,提高了开发效率,您可以通过以下的方式来表示你的谢意!
网站程序开发、管理系统、小程序开发请找我,WeiXin:badiweier 昵称:[曾小晖]
使用 支付宝 或 微信 请我喝杯咖啡
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。