【机房报修管理系统】 前端篇(一) Vue项目搭建

作者因工作忙碌暂停更新,现重启机房报修管理系统前端教程。使用Vue.js、Element-UI等技术,详细记录从创建项目到启动的全过程。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

关于作者之前断更的原因


    由于之前在完成后端篇的时候,已经找到工作了,天天晚上9,10点才回到家,所以也没有心思去维护博客了。直到最近有人和我提希望我能够将前端篇完善,所以我才再次启动这个系列。由于这个项目已经隔了将近快一年,可能当中有一些开发的思路已经忘记了,我会尽我所能完善,请各位见谅。


一、前情提要


    在上一次我们完成了机房报修管理系统的后端篇,这一次我们来搞前端了;由于本人的前端技术有限,所以在教程中可能会有一些错误,如果出现错误请各位同学在文章的下方评论或者发送邮件到我的邮箱,我会尽快回复你们。


二、使用到的技术


这一次使用到的东西很少,只有以下的几样工具:

  • JS框架:Vue.js
  • UI库:Element-UI
  • 异步请求:Axios
  • Cookie:VueCookies
  • 服务器:nodeJS

三、实践操作


注意:在执行下面的操作时,请务必安装好nodeJS

1.创建Vue项目

我们在创建Vue项目的时候,一般都会使用nodeJS下载Vue的脚手架工具来搭建。

在Windows中,我们可以打开命令提示符(CMD)或者powershell(Win10特有,推荐)

使用快捷键Win(菜单键)+R呼出运行,输入CMD或者powershell回车即可。

在这里插入图片描述
在这里插入图片描述
依次执行以下命令,使用Vue脚手架工具创建一个Vue项目(#号后为注释,方便各位同学理解命令,输入命令时请不要将注释输入)

cd D:/						#路径转到D盘

mkdir ./VueProject        	#在D盘上创建一个名为VueProject的文件夹,用于存储项目

cd ./VueProject				#进入VueProject的文件夹

npm install vue -g			#下载Vue
 
npm install vue-cli -g		#下载Vue脚手架工具
 
npm install webpage -g		#下载包管理器

vue init webpack-simple repair-system		#创建一个基于包管理的Vue项目,项目名为repair-system

2.打开创建的Vue项目

本次前端开发我是使用WebStorm来开发的,因为自己本来是专注于后端,比较习惯使用JetBrain 全家桶,直接在WebStorm打开D:\repair-system即可
在这里插入图片描述

对于Vue项目的结构,各位可以见菜鸟教程的相关描述:点我跳转,此处我不在赘述。

3.启动项目

    启动项目的方式有两种,如果使用WebStorm,直接如下如图所示点击即可
在这里插入图片描述

或者使用命令行

#切换到vue项目下
cd D:\VueProject\repair-system\    
 
#以开发模式启动项目
npm run dev

输入命令行后,就会自动打开http://localhost:8080/,如下图所示
在这里插入图片描述

    到这里,Vue项目的搭建已经全部完成。如果您对次篇文章有疑问,可以在文章下方留言,谢谢您的阅读。如对【机房报修管理系统】系列文章有兴趣,可以关注或收藏我的文章,您的支持是我最大的动力,我会尽快推出下一期内容,敬请期待。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值