热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

Vue项目实战之人力资源平台系统(一)框架介绍及项目环境搭建

前言目录前言一、vue-element-admin简介二、项目环境搭建2.1nodejs环境2.2git版本控制2.3vscode编辑器三、拉取vue-element-admin基
前言

目录

  • 前言
  • 一、vue-element-admin简介
  • 二、项目环境搭建
    • 2.1 nodejs环境
    • 2.2 git版本控制
    • 2.3 vscode编辑器
  • 三、拉取vue-element-admin基础模板作为项目模板
    • 3.1 git拉取基础项目模板
    • 3.2 项目目录解析
    • 3.3 项目代码解析-main.js
    • 3.3 项目代码解析-App.vue
    • 3.4 项目代码解析-permission.js和settings.js
    • 3.5 项目代码解析-Vuex
    • 3.6 项目代码解析-scss
    • 3.7 项目代码解析-icons
  • 四、API模块和请求封装模块介绍
  • 五、建立远程Git仓库并上传项目代码
    • 5.1 建立远程仓库
    • 5.2 本地项目提交
    • 5.3 推送到远程仓库
  • 六、公共资源图片和统一样式
  • 总结


一、vue-element-admin简介

vue-element-admin 是一个后台前端解决方案,它基于 vue 和 element-ui实现
它使用了最新的前端技术栈,内置了 i18 国际化解决方案,动态路由,权限验证,提炼了典型的业务模型,提供了丰富的功能组件
它可以帮助我们快速搭建企业级中后台产品原型。官网: https://panjiachen.gitee.io/vue-element-admin-site/zh/作为开发人员,我们主要使用它提供的基础模板,包含了基本的 登录 / 鉴权 / 主页布局 的一些基础功能模板
我们可以直接在该模板上进行功能的扩展和项目的二次开发

二、项目环境搭建

2.1 nodejs环境

nodejs是当下前端工程化开发必不可少的环境, 使用nodejs的npm功能来管理依赖包查看node和npm的版本:$ node -v #查看node版本
$ npm -v #查看npm版本将npm设置成国内的淘宝镜像以提高下载速度:$ npm config set registry https://registry.npm.taobao.org/ #设置淘宝镜像地址
$ npm config get registry #查看镜像地址

2.2 git版本控制

git版本控制工具是目前最为流行的分布式版本管理工具,代码的提交, 检出, 日志, 都需要通过git完成查看git安装版本:$ git --version #查看git安装版本

2.3 vscode编辑器

vscode编辑器是目前前端开发的编码利器, 以及丰富的插件系统,非常适合开发前端项目通过vscode编辑器安装插件:vetur + eslint
vetur是基于单文件组件开发的支持插件, eslint是基于代码校验的插件工具除此之外, eslint需要在vscode中进行一些参数的配置:{"eslint.enable": true,"eslint.run": "onType","eslint.options": {"extensions": [".js",".vue",".jsx",".tsx"]},"editor.codeActionsOnSave": {"source.fixAll.eslint": true}
}

三、拉取vue-element-admin基础模板作为项目模板

3.1 git拉取基础项目模板

$ git clone https://github.com/PanJiaChen/vue-admin-template.git hrsaas #拉取基础模板到hrsaas目录
$ npm install #定位到项目目录下执行,安装依赖
$ npm run dev #启动项目
若项目能正常启动则可进行下一步

3.2 项目目录解析

通过下载基础模板,我们已经得到了一个基本的开发框架,下面是整个项目的目录结构:

├── build # 构建相关
├── mock # 项目mock 模拟数据
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求
│ ├── assets # 主题 字体等静态资源
│ ├── components # 全局公用组件
│ ├── icons # 项目所有 svg icons
│ ├── layout # 全局 layout
│ ├── router # 路由
│ ├── store # 全局 store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── vendor # 公用vendor
│ ├── views # views 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件 加载组件 初始化等
│ └── permission.js # 权限管理
│ └── settings.js # 配置文件
├── tests # 测试
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint 配置项
├── .babelrc # babel-loader 配置
├── .travis.yml # 自动化CI配置
├── vue.config.js # vue-cli 配置
├── postcss.config.js # postcss 配置
└── package.json # package.json

当我们开发项目时,最关注的就是src目录, 里面是所有的源代码和资源, 至于其他目录, 都是对项目的环境和工具的配置

3.3 项目代码解析-main.js

main.js作为整个项目的入口文件,它的作用如下图所示:
在这里插入图片描述

同时,main.js中还提供了模拟数据配置,在我们开发时是用不到的,所以要注释掉,具体操作如下:

注释掉main.js中mock数据的部分,删除src下的mock文件夹
同时,注释掉vue.config.js中的 before: require('./mock/mock-server.js')

3.3 项目代码解析-App.vue

App.vue作为根组件,它的作用如下图所示:
在这里插入图片描述

3.4 项目代码解析-permission.js和settings.js

permission.js 是控制页面登录权限的文件,这里使用了router的导航守卫
settings.js则是对于一些项目信息的配置,里面有三个属性 title(项目名称),fixedHeader(固定头部),sidebarLogo(显示左侧菜单logo)

3.5 项目代码解析-Vuex

当前项目的Vuex结构采用了模块形式进行管理共享状态,其架构如下:
在这里插入图片描述

其中app.js模块和settings.js模块,功能已经完备,不需要再进行修改。
user.js模块是我们后期需要重点开发的内容,所以这里我们将user.js里面的内容删除,并且导出一个默认配置:

export default {namespaced: true,state: {},mutations: {},actions: {}
}

同时,由于getters中引用了user中的状态,所以我们将getters中的状态改为:

const getters = {sidebar: state => state.app.sidebar,device: state => state.app.device
}
export default getters

3.6 项目代码解析-scss

当前项目还使用了scss作为css的扩展语言,在styles目录下,我们可以发现scss的相关文件,结构如下:
在这里插入图片描述

3.7 项目代码解析-icons

icons的作用是注册一个Vue组件,将svg目录下的所有的.svg后缀的文件全都引入到项目中

四、API模块和请求封装模块介绍

通过目录解析我们知道,API模块的作用是封装所有请求,按照模块进行划分,统一管理
以user.js模块为例:

import request from '@/utils/request'export function login(data) {return request({url: '/vue-admin-template/user/login',method: 'post',data})
}export function getInfo(token) {return request({url: '/vue-admin-template/user/info',method: 'get',params: { token }})
}

上面代码中,使用了封装的request工具,每个接口的请求都单独导出了一个方法,这样做的好处就是,任何位置需要请求的话,可以直接引用我们导出的请求方法
为了后续更好的开发,我们可以先将user.js代码的方法设置为空,后续在进行更正

request工具的作用是封装axios
axios定义在utils/request.js中,首先通过create创建了一个新的axios实例,然后使用axios的拦截器进行开发:

// 导出一个axios的实例 而且这个实例要有请求拦截器 响应拦截器
import axios from 'axios'
const service = axios.create() // 创建一个axios的实例
service.interceptors.request.use() // 请求拦截器
service.interceptors.response.use() // 响应拦截器
export default service // 导出axios实例

五、建立远程Git仓库并上传项目代码

5.1 建立远程仓库

可使用Github或码云建立远程仓库

5.2 本地项目提交

$ git init #初始化项目
$ git add . #将修改添加到暂存
$ git commit -m 'first commit' #将暂存提到本地仓库
$ git log #查看版本日志

5.3 推送到远程仓库

$ git remote add origin <远程仓库地址> #添加远程仓库地址
$ git remote -v #查看本地仓库的远程仓库地址映射
$ git push -u origin master #将master分支推送到origin所代表的远程仓库地址

六、公共资源图片和统一样式

项目开发用到的图片资源放置到 src/assets目录即可样式资源要放置到styles目录下&#xff0c;然后在index.scss中引入该样式&#64;import &#39;./common.scss&#39;; //引入common.scss样式表

总结

今天又开始开发新的项目&#xff0c;这个项目利用vue-element-admin基础模板进行二次开发&#xff0c;大大提高了开发效率


推荐阅读
  • 本文详细介绍了如何使用Python编写爬虫程序,从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制,再到多页数据抓取的全过程,并提供了完整的代码示例。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • Explore how Matterverse is redefining the metaverse experience, creating immersive and meaningful virtual environments that foster genuine connections and economic opportunities. ... [详细]
  • 技术分享:从动态网站提取站点密钥的解决方案
    本文探讨了如何从动态网站中提取站点密钥,特别是针对验证码(reCAPTCHA)的处理方法。通过结合Selenium和requests库,提供了详细的代码示例和优化建议。 ... [详细]
  • 深入理解Tornado模板系统
    本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块,支持嵌入Python代码片段,帮助开发者快速构建动态网页。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • 深入理解Cookie与Session会话管理
    本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息,以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制,解释其原理及应用场景。 ... [详细]
  • Python自动化处理:从Word文档提取内容并生成带水印的PDF
    本文介绍如何利用Python实现从特定网站下载Word文档,去除水印并添加自定义水印,最终将文档转换为PDF格式。该方法适用于批量处理和自动化需求。 ... [详细]
  • PHP 5.5.0rc1 发布:深入解析 Zend OPcache
    2013年5月9日,PHP官方发布了PHP 5.5.0rc1和PHP 5.4.15正式版,这两个版本均支持64位环境。本文将详细介绍Zend OPcache的功能及其在Windows环境下的配置与测试。 ... [详细]
  • 优化ListView性能
    本文深入探讨了如何通过多种技术手段优化ListView的性能,包括视图复用、ViewHolder模式、分批加载数据、图片优化及内存管理等。这些方法能够显著提升应用的响应速度和用户体验。 ... [详细]
  • 本周信息安全小组主要进行了CTF竞赛相关技能的学习,包括HTML和CSS的基础知识、逆向工程的初步探索以及整数溢出漏洞的学习。此外,还掌握了Linux命令行操作及互联网工作原理的基本概念。 ... [详细]
  • 三星W799在2011年的表现堪称经典,以其独特的双屏设计和强大的功能引领了双模手机的潮流。本文详细介绍其配置、功能及锁屏设置。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • 在Linux系统中配置并启动ActiveMQ
    本文详细介绍了如何在Linux环境中安装和配置ActiveMQ,包括端口开放及防火墙设置。通过本文,您可以掌握完整的ActiveMQ部署流程,确保其在网络环境中正常运行。 ... [详细]
  • 本章将深入探讨移动 UI 设计的核心原则,帮助开发者构建简洁、高效且用户友好的界面。通过学习设计规则和用户体验优化技巧,您将能够创建出既美观又实用的移动应用。 ... [详细]
author-avatar
陈民翔芷昌柏淑
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有