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

关于作者之前断更的原因

---

    由于之前在完成后端篇的时候，已经找到工作了，天天晚上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项目的搭建已经全部完成。如果您对次篇文章有疑问，可以在文章下方留言，谢谢您的阅读。如对【机房报修管理系统】系列文章有兴趣，可以关注或收藏我的文章，您的支持是我最大的动力，我会尽快推出下一期内容，敬请期待。