Spring boot+Vue 之 --小白如何建立一个VUE项目

一、下载相应的软件以及相应配置

首先VUE是前端的框架，全称为vue.js，一般需要同node.js一起使用。

一. 下载node.js

直接去node官网下载相对应的Node，安装过程中直接Next。

安装完成后，windows+R，输入cmd,进入控制台，输入
node -v 查看node版本号，有版本则说明已经安装成功，其中 npm 也会安装，同样输入 npm -v ，可以查看安装结果。
继续输入命令行
npm可以用来下载vue，输入命令

npm install vue -g

和命令

npm install vue-cli -g

就可以了。

二.下载相应的编程软件—VS Code

直接去VS Code官网下载相对应PC版本号的的VS Code，正常软件安装过程。

软件默认全英文，如果有需要修改成中文。教程如下

PS:注意上图中有个使用方法
步骤：任意界面按住 Ctrl + Shift +P
输入Configure DisPlay Language
选择Configure DisPlay Language
选择zh-cn回车
软件提示是否重启，选择重启即可。

此时还需要下载一个插件 — vetur
与上述下载中文插件一样，把chines改成vetur，搜索安装即可

二.正式开始VUE项目

PS :我用的是中文插件

一.添加工作区

（我们下载配置的VUE工程就会保存到这个工作区下）

二.在终端中 配置下载Vue项目

点击 终端 – 新建终端
或者 快捷键 ctrl+~ 也可以新建终端
输入 vue init webpack Demo2

可能会报错

提示：vue : 无法加载文件 C:\Users\xxx\AppData\Roaming\npm\vue.ps1。。。。。。

此时，你在菜单栏搜索 PowerShell 并且右键管理员运行

在打开的PowerShell 中输入命令行

set-ExecutionPolicy RemoteSigned

输入 Y 回车
好了，我们回到VS code
继续输入 vue init webpack Demo2
并且配置好相应的属性

可以看到工作区出现了一个Demo2 的文件夹，这就是一个完整的VUE项目了，那我们有了项目，就要运行他。

三.运行VUE项目

还是在当前的终端下，输入

–cd Dome2 (进入到VUE项目下)
–npm run dev (运行项目)
运行成功会显示

四.在浏览器中测试运行

在浏览器输入 图中的连接 http://localhost:8081 即可进入Vue。看到下面这张图就说明你们的VUE项目搭建完成啦！
（PS: 默认是8080端口，因为我的8080被占用了，所以变成了8081）