前端-vue环境搭建

一、 安装node.js

1、下载地址(https://nodejs.org/en/)下载完毕后,可以安装node,建议不要安装在系统盘(如C:)

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code

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

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_02


基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_03

(3)新增系统变量NODE_PATH

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_04

5、设置nodejs prefix(全局)和cache(缓存)路径

(1)在nodejs安装路径下,新建node_global和node_cache两个文件夹

(2)置缓存文件夹

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_05

(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/

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_06

2汉化包下载
https://sourceforge.net/projects/tortoisesvn/files/1.9.7/Language%20Packs/基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_07

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

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_08


基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_09

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

(2) 检出方法

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_10

三、搭建vscode+vue环境

1、安装vscode

(1).首先下载vscode安装软件 https://code.visualstudio.com/download

(2).选择vscode版本(根据自己的操作系统选择相应的版本)

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_11

(3).把vscode安装文件准备好:我使用的是64位的操作系统

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_12

(4).傻瓜式安装,一直下一步,直接到完成

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_13

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

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_14

(6).安装成功

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_15

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”

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_16

②.再把svn.exe文件的路径写在vscode配置文件中

(1) 有可能找不到svn.exe的路径 , 这时就要重新安装svn , 并勾选上 Command Line Tools 中的第二个选项(存放在硬盘上)如果是默认安装 , 路径一般是"C:\Program Files\TortoiseSVN\bin\svn.exe"

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_17

③、打开Vscode底部的设置,然后搜索svn,点击在 setting.json中编辑

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_18

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

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_19

④、关闭Vscode,重新打开,svn安装生效

6、为vscode安装表单设计插件

(1)下载form-generator-plugin

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_20

(2)下载成功后项目上鼠标右键,就可以打开表单设计器

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_visual studio code_21

四、打开jeeplus-ui

(1)打开Vs Code 菜单 文件打开文件夹选择

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_22

1、打开.env.development ,配置开发环境的后台api地址

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_23

VUE_APP_SERVER_URL = ‘http://localhost:8082’

2、打开TERMIANL控制台

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_24

执行以下命令安装package依赖包

npm install

执行启动命令

npm run serve

启动成功界面

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_25

后端-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

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_26


下载好后双击安装

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_27


基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_28


基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_29

3、配置IDEA

安装好后,先不要运行,因为我本机C盘空间只有256G,比较小,所以不希望乱七八糟的东西都下载到系统盘<windows系统swap区使用的C盘空间,空间过小会导致系统卡顿>,下面我们先改一下idea插件下载地址:

(1)、找到idea的安装路径,

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_30

映射本地地址为:D:\Program Files\JetBrains\IntelliJ IDEA 2019.1.1

(2)、打开此路径下 ./bin/idea.properties

修改前:

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_31

新增:idea.plugin.home=D:\Program Files\JetBrains\IntelliJ IDEA 2019.1.1\pluginhome (等号后地址随便制定)

修改<>:

以下四行将前面的 # 去掉,并将大括号中的 user.home换成 自定义变量 idea.plugin.home

idea.config.path=基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_32{idea.plugin.home}/.IntelliJIdea/system

idea.plugins.path=基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_33{idea.system.path}/log

修改后:

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_34

保存后,重新运行idea

4 激活

激活教程详见http://idea.medeming.com/jets/

5.在IntelliJ IDEA中配置maven

打开-File-Settings

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_35

6.在IntelliJ IDEA中配置svn

在idea中配置相关的配置,如下图:

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_36

看红圈内的就是安装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

下载成功后放到根目录下,方便查找

②导入刚才下载的文件

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_37

③选择GoogleStyle并设置相关参数

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_38

(2) 自动格式化 Save Action插件

①打开setting,找到Plugins选项(安装Save Action 插件(如果有就跳过这一步))

搜索:Save Actions

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_39

②安装成功之后,重启Intellij

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_40

③重启之后,打开setting,找到我们的save actions(直接搜索)

第一个√标识保存代码时执行动作;(只有用ctrl+s才有效,idea自动保存不会触发)

第二个√格式化导包;(相当于触发了"Ctrl+ALT+O")

第三个√格式化代码;(相当于触发了"Ctrl+ALT+L")

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_41

二 导入maven项目

1 在IDEA中, File->Open, 选择jeeplus后台工程目录,打开

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_42


基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_43

2 使用application命令启动

直接运行jeeplus/jeeplus-web/src/main/java/com/jeeplus/web/JeeplusWebApplication.java,启动jeeplus.

启动画面

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_44


直到控制台输出“–jeeplus启动成功–",项目就可以成功访问了。

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_svn_45

3 输入license。

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

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_node.js_46

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


程模块说明

1、前端模块说明

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_java_47

2、后端模块说明

基于 ant desgin vue pro 的后端 springboot 代码 vue.js springboot_vue.js_48