人力资源智能化管理项目(day01:基础架构拆解)

学习源码可以看我的个人前端学习笔记 (github.com):qdxzw/frontlearningNotes

觉得有帮助的同学,可以点心心支持一下哈

一、基础架构拆解

1.拉取模板代码

git clone GitHub - PanJiaChen/vue-admin-template: a vue2.0 minimal admin template 项目名

2.core-js版本处理

项目模版中的core-js的版本号有些滞后,需要将其版本号改为"3.25.5"(package.json里面18行) 再安装依赖(npm i)

3.启动查看 npm run dev

登录界面

首页

4.安装插件

ESLint & Vetur

提升开发效率

5.项目目录和文件介绍

main.js:

①new Vue({})实例化

路由

store(Vuex)

根组件

②全局注册ElementUI

根组件App.vue

layout布局组件

基础设置settings.js和导航守卫permission.js

settings.js导出网站基础配置,包括:网站标题、固定header、显示logo

permission.js(权限),主要负责路由导航守卫

Vuex结构

页面交互状态(折叠侧边栏-固定头部)使用全局状态Vuex

根据功能拆分成不同的模块(modules)进行状态管理

通过getters建立对于模块中属性的快捷访问

使用模板中的icon图标

模板icons图标实现思路

了解:require.context(路径,是否扫描子目录, 正则匹配) 可以引入某个目录下的内容

了解:svg-sprite-loader打包了所有svg到一个svg标签上,将svg名称作为symbol标签的id属性

了解:svg-icon使用iconClass属性引用了symbol的id

6.导入样式和资源并使用git管理

资源在第一天的代码里面

提交到远程仓库,这个命令中的 -u 是记住此时的远程地址和分支,下次直接写git push就可以推送

相关推荐
繁依Fanyi32 分钟前
用 CodeBuddy 实现「IdeaSpark 每日灵感卡」:一场 UI 与灵感的极简之旅
开发语言·前端·游戏·ui·编辑器·codebuddy首席试玩官
黄鹂绿柳3 小时前
Vue+Vite学习笔记
vue.js·笔记·学习
来自星星的坤3 小时前
【Vue 3 + Vue Router 4】如何正确重置路由实例(resetRouter)——避免“VueRouter is not defined”错误
前端·javascript·vue.js
香蕉可乐荷包蛋7 小时前
浅入ES5、ES6(ES2015)、ES2023(ES14)版本对比,及使用建议---ES6就够用(个人觉得)
前端·javascript·es6
未来之窗软件服务7 小时前
资源管理器必要性———仙盟创梦IDE
前端·javascript·ide·仙盟创梦ide
liuyang___8 小时前
第一次经历项目上线
前端·typescript
西哥写代码9 小时前
基于cornerstone3D的dicom影像浏览器 第十八章 自定义序列自动播放条
前端·javascript·vue
清风细雨_林木木9 小时前
Vue 中生成源码映射文件,配置 map
前端·javascript·vue.js
FungLeo9 小时前
node 后端和浏览器前端,有关 RSA 非对称加密的完整实践, 前后端匹配的代码演示
前端·非对称加密·rsa 加密·node 后端
不灭锦鲤9 小时前
xss-labs靶场第11-14关基础详解
前端·xss