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)
在这里插入图片描述

Springboot+Vue前后的分离整合项目实战

09-09
适用人群 Java开发人员,Vue开发人员,前后端分离开发人员,权限管理和配置开发人员 课程概述 【讲师介绍】 讲师职称:               现某知名大型互联网公司资深架构师,技术总监,职业规划师,首席面试官,曾在某上市培训机构,高校任教多年。             Array(Array老师)10多年互联网公司实战经验,知名的大型互联网公司的架构师,高管等职,在企业长期从事于技术的源码阅读和新技术的研究;擅长于职业规划,面试辅导,从事面试官多年;擅长于JAVA,人工智能AI应用,Xmind等等,曾服役于国内某上市培训机构数年,独特的培训思路,培训体系,培训方式,实践的职场技能,职场现状,职场晋升等让你快速适应企业职场的所需。  【课程介绍】 技术选型 开发环境:Eclipse/Idea ,JDK 1.8以上  后端技术 核心框架:SpringBoot2.x框架系列(同样适用Springcloud F版本以后的版本),如下(节选):     持久层框架:MyBatis 3.x + Mybatis-plus 3.x 日志管理:SLF4J 1.7 + Log4j2 2.7 工具类:Apache Commons、Jackson 、fastjson、Gson 权限验证 前端技术   Vue   Vue-cli ElementUI ---https://element.eleme.io/ JSX (JavaScript Xml) 前台的权限验证和路由设置 开发模式        前后端分离的开发 数据库        Mysql5 IDE     Intellij Idea
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值