vue+springboot工具安装整合

前端-vue环境搭建
一、 安装node.js
1、下载地址(https://nodejs.org/en/)下载完毕后,可以安装node,建议不要安装在系统盘(如C:)
在这里插入图片描述

2、基于 Node.js 安装cnpm(淘宝镜像)
设置源
npm config set registry https://registry.npm.taobao.org
3、更新npm到最新版本
npm install -g npm
4、设置环境变量(非常重要)
说明:设置环境变量可以使得住任意目录下都可以使用npm、vue等命令,而不需要输入全路径
(1)鼠标右键"此电脑",选择“属性”菜单,在弹出的“系统”对话框中左侧选择“高级系统设置”,弹出“系统属性”对话框。
(2)修改系统变量PATH
在这里插入图片描述
在这里插入图片描述

(3)新增系统变量NODE_PATH
在这里插入图片描述

5、设置nodejs prefix(全局)和cache(缓存)路径
(1)在nodejs安装路径下,新建node_global和node_cache两个文件夹
(2)置缓存文件夹
在这里插入图片描述

(3)执行命令
npm config set cache “D:\vueProject\nodejs\node_cache”
设置全局模块存放路径
npm config set prefix “D:\vueProject\nodejs\node_global”
设置成功后,之后用命令npm install XXX -g安装以后模块就在D:\vueProject\nodejs\node_global里
二、搭建TortoiseSVN环境(已安装可忽略)
1下载svn的客户端,官网下载地址:https://sourceforge.net/projects/tortoisesvn/files/1.9.7/
在这里插入图片描述

2汉化包下载
https://sourceforge.net/projects/tortoisesvn/files/1.9.7/Language%20Packs/
在这里插入图片描述

2下载之后直接安装就好了,但是要注意这里,选择安装所有的命令行客户端工具,默认是不安装的,如果不安装,svn中的bin目录下就会没有svn.exe,这个待会会用到,所以一点要注意哦。(都是坑啊)

在这里插入图片描述
在这里插入图片描述

然后就下一步下一步就安装好了。
3.程序检出

(2) 检出方法
在这里插入图片描述

三、搭建vscode+vue环境
1、安装vscode
(1).首先下载vscode安装软件 https://code.visualstudio.com/download
(2).选择vscode版本(根据自己的操作系统选择相应的版本)
在这里插入图片描述

(3).把vscode安装文件准备好:我使用的是64位的操作系统
在这里插入图片描述

(4).傻瓜式安装,一直下一步,直接到完成
在这里插入图片描述

(5).环境变量(这步骤也是默认的,因为改编辑器是微软提供的,会自动配置path)
在这里插入图片描述

(6).安装成功
在这里插入图片描述

2、 node安装
如果不确定自己是否安装了node,可以在命令行工具内执行:node -v(检查一下 版本);
3、 vue-cli 全局安装
命令行执行 : npm install -g vue-cli // 加-g是安装到全局
安装完成以后,可以输入命令,:vue 回车,可以看到针对vue的命令行;
4、vscode 安装开发环境
VSCode安装好后,点击Ctrl + Shit + X打开插件扩展窗口进行插件扩展,
(1)Vetur —— 语法高亮、智能感知、Emmet等
包含格式化功能, Alt+Shift+F (格式化全文),Ctrl+K Ctrl+F(格式化选中代码,两个Ctrl需要同时按着)
(2)EsLint —— 语法纠错
view in browser —— 如何用浏览器预览运行html文件

(3)Auto Close Tag —— 自动闭合HTML/XML标签
(4)Auto Rename Tag —— 自动完成另一侧标签的同步修改
(5)JavaScript(ES6) code snippets —— ES6语法智能提示以及快速输入,除js外还支持.ts,.jsx,.tsx,.html,.vue,省去了配置其支持各种包含js代码文件的时间
(5)Path Intellisense —— 自动路劲补全

5、为vscode安装svn插件
①.ctrl+shirt+x 打开工具搜索页面,输入“SVN”
在这里插入图片描述

②.再把svn.exe文件的路径写在vscode配置文件中
(1) 有可能找不到svn.exe的路径 , 这时就要重新安装svn , 并勾选上 Command Line Tools 中的第二个选项(存放在硬盘上)如果是默认安装 , 路径一般是"C:\Program Files\TortoiseSVN\bin\svn.exe"
在这里插入图片描述

③、打开Vscode底部的设置,然后搜索svn,点击在 setting.json中编辑
在这里插入图片描述

在弹出的编辑窗口中输入svn的位置:“svn.path”: “D://SoftWare//Tortorise//bin”(注意这里是Tortorise的安装后bin的位置)
在这里插入图片描述

④、关闭Vscode,重新打开,svn安装生效
6、为vscode安装表单设计插件
(1)下载form-generator-plugin
在这里插入图片描述

(2)下载成功后项目上鼠标右键,就可以打开表单设计器
在这里插入图片描述

四、打开jeeplus-ui
(1)打开Vs Code 菜单 文件打开文件夹选择
在这里插入图片描述

1、打开.env.development ,配置开发环境的后台api地址
在这里插入图片描述

VUE_APP_SERVER_URL = ‘http://localhost:8082’
2、打开TERMIANL控制台
在这里插入图片描述

执行以下命令安装package依赖包
npm install
执行启动命令
npm run serve
启动成功界面
在这里插入图片描述

后端-java环境搭建
一、准备工作
1、idea-Ultimate(下载 Ultimate 完全版本)
https://download.jetbrains.8686c.com/idea/ideaIU-2019.3.5.exe?_ga=2.12685246.88269119.1599463639-113990609.1599463639
2、安装idea
在这里插入图片描述
下载好后双击安装
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

3、配置IDEA
安装好后,先不要运行,因为我本机C盘空间只有256G,比较小,所以不希望乱七八糟的东西都下载到系统盘<windows系统swap区使用的C盘空间,空间过小会导致系统卡顿>,下面我们先改一下idea插件下载地址:
(1)、找到idea的安装路径,
在这里插入图片描述

映射本地地址为:D:\Program Files\JetBrains\IntelliJ IDEA 2019.1.1
(2)、打开此路径下 ./bin/idea.properties
修改前:
在这里插入图片描述

新增:idea.plugin.home=D:\Program Files\JetBrains\IntelliJ IDEA 2019.1.1\pluginhome (等号后地址随便制定)
修改<>:
以下四行将前面的 # 去掉,并将大括号中的 user.home换成 自定义变量 idea.plugin.home
idea.config.path= i d e a . p l u g i n . h o m e / . I n t e l l i J I d e a / c o n f i g i d e a . s y s t e m . p a t h = {idea.plugin.home}/.IntelliJIdea/config idea.system.path= idea.plugin.home/.IntelliJIdea/configidea.system.path={idea.plugin.home}/.IntelliJIdea/system
idea.plugins.path= i d e a . c o n f i g . p a t h / p l u g i n s i d e a . l o g . p a t h = {idea.config.path}/plugins idea.log.path= idea.config.path/pluginsidea.log.path={idea.system.path}/log
修改后:
在这里插入图片描述

保存后,重新运行idea
4 激活
激活教程详见http://idea.medeming.com/jets/
5.在IntelliJ IDEA中配置maven
打开-File-Settings
在这里插入图片描述

6.在IntelliJ IDEA中配置svn
在idea中配置相关的配置,如下图:
在这里插入图片描述

看红圈内的就是安装TortoiseSVN bin目录下的svn.exe 然后点击apply和OK就可以了
7.在IntelliJ IDEA中配置java 先关插件
(1)代码格式化插件
①下载intellij-java-google-style.xml
地址: https://github.com/google/styleguide/blob/gh-pages/intellij-java-google-style.xml
下载成功后放到根目录下,方便查找
②导入刚才下载的文件
在这里插入图片描述

③选择GoogleStyle并设置相关参数
在这里插入图片描述

(2) 自动格式化 Save Action插件
①打开setting,找到Plugins选项(安装Save Action 插件(如果有就跳过这一步))
搜索:Save Actions
在这里插入图片描述

②安装成功之后,重启Intellij
在这里插入图片描述

③重启之后,打开setting,找到我们的save actions(直接搜索)
第一个√标识保存代码时执行动作;(只有用ctrl+s才有效,idea自动保存不会触发)
第二个√格式化导包;(相当于触发了"Ctrl+ALT+O")
第三个√格式化代码;(相当于触发了"Ctrl+ALT+L")
在这里插入图片描述

二 导入maven项目
1 在IDEA中, File->Open, 选择jeeplus后台工程目录,打开
在这里插入图片描述
在这里插入图片描述

2 使用application命令启动
直接运行jeeplus/jeeplus-web/src/main/java/com/jeeplus/web/JeeplusWebApplication.java,启动jeeplus.
启动画面
在这里插入图片描述
直到控制台输出“–jeeplus启动成功–",项目就可以成功访问了。
在这里插入图片描述

3 输入license。
登录系统,打开表单配置,可以看见机器码,使用序列号获取license,打开application-development.yml,输入productID和license就可以正常使用代码生成器功能了。
在这里插入图片描述

注意:license仅仅授权代码生成器(敏捷开发-表单配置)是否可用。发布、部署、交付给第三方,无需license。开发出的项目可以任意部署,不受license控制。平台底层代码、业务功能代码都是开源的。

程模块说明
1、前端模块说明
在这里插入图片描述

2、后端模块说明

在这里插入图片描述

  • 0
    点赞
  • 0
    评论
  • 1
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <span style=&quot;font-size:24px;&quot;><img src=&quot;https://img-bss.csdn.net/202002111502403886.png&quot; alt=&quot;&quot; /><br /> </span> </p> <p> <span style=&quot;font-size:24px;&quot;><img src=&quot;https://img-bss.csdn.net/202002111502521739.jpg&quot; alt=&quot;&quot; /><br /> </span> </p> <p> <span style=&quot;font-size:24px;&quot;>本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建, 会使用Vue的生命周期的钩子函数; 会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信,会创建Vue实例,知道Vue的常见属性</span> </p> <br /> <br /> <span style=&quot;font-size:24px;&quot;>大家都知道涛哥最关心的是找工作,这段时间出去面试的时候会经常会被问及到Vue相关的知识,所以涛哥迫不及待的赶紧出了一版Vue相关的教程,有人问:我们做后台会前台干什么呀?是因为现在的公司老板都想招复合型的人才,招一个Java开发回来恨不得前后台都会,所以我们Java开发人员也要掌握一些前端相关的技能。Java这边现在前端用的比较多的就是VUE,所以大家还是要赶紧学习起来,为了你不被淘汰,为了你能快速适应公司的发展速度,快速找到一份满意的工作,赶紧学起来吧。本课程是Vue的快速入门课程,涉及到的课程知识点:Vue环境的快速搭建,?会使用Vue的生命周期的钩子函数;?会使用vue常见指令;会使用vue计算属性和watch监控;会编写Vue组件;掌握组件间通信;</span><br /> <br /> <span style=&quot;font-size:24px;&quot;>用2小时看完,就可以快速上手公司里的项目,后期还会有实战项目上线,请大家持续关注。</span><br /> <br /> <span style=&quot;font-size:24px;&quot;></span>
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值