内容简介本文档主要是对jekins安装、插件安装、用户创建、项目创建、基于maven的java项目构建、基于vue的项目构建的流程进行了一个全方面的讲解可帮助新入职员工快速进行一个软件的部署和jenkins自动化部署的搭建。前 言随着信息技术和网络媒体的快速发展各生产行业如今也趋向信息化管理。为了新员工更加快速融的入工作老员工更加熟悉我们所使用软件的开发环境从而提高大家的工作效率我们将jekins安装、插件安装、用户创建、项目创建、基于maven的java项目构建、基于vue的项目构建流程进行了一个系统化的讲解。第一章Jenkins的安装配置及使用第一节 Jenkins的简介1.Jenkins是一个开源软件项目是基于Java开发的一种持续集成工具用于监控持续重复的工作旨在提供一个开放易用的软件平台使软件项目可以进行(持续集成)。第二节 安装Jenkins一、下载jenkins.war1.可以直接进入jenkins官网Jenkins 下载如图1.1所示。图1.12.一般选择war包进行下载.(有两种类型一种是稳定版的一种是经常更新的。这个根据个人需求) 如图1.2所示图1.23.将下载好的war包放在一个文件夹下任意文件夹我的是C:\Jenkins打开DOS系统WinR----cmd,将路径切换到Jenkins路径下。输入命令行:运行结果如图1.3图1.4所示。图1.3图1.4当显示 如图所示时表示Jenkins服务器启动成功注每次需要先在cmd启动jenkins后才能在浏览器上打开二、开启Jenkins1. 打开浏览器输入链接http://localhost:8080 , 默认端口号是8080当然也可以指定端口号命令行 为java –jar jenkins.war –httpPort8080密码安装的过程中会出现一个路径到此路径下找到文件initialAdminPassword打开此文件复制密码串即可如图1.5图1.6所示。图1.5图1.62.输入密码后点击完成此时会进入下面的页选择插件如图1.7所示图1.73.如果选择第一个选项Install Suggested Plugins,则会出现下面的页面会帮你下载一些基本的插件。耐心的等待一段时间如图1.8所示。图1.84.下载完成后会进入下面界面如图1.9所示。图1.95.填写完成后点击保存并完成会进入实例配置点击保存并完成如图1.10所示图1.106.点击保存并完成后jekins就安装完成了如图1.11所示图1.117.点击开始使用便可以开始使用jekins进行项目的自动化部署了如图1.12所示。图1.12三、安装plugin插件1.点击Manage Jenkins再点击plugin插件进行安装所需插件如图1.13图1.14所示。图1.132.点击plugins图1.143.进入后点击Available plugins如图1.15所示。图1.154.选择插件点击安装后进行安装等待安装完成即可使用如图1.16所示。图1.165.服务器安装gityum install git如图1.17图1.18所示。图1.17图1.18第二章 基于Maven的JAVA项目构建第一节 Maven的简介1.Maven是一个创建、管理Java项目的工具。它将项目开发和管理过程抽象成一个项目对象模型(POMProject Object Model)。Maven项目结构如下├a-maven-project 项目名├── pom.xml 项目描述文件├── src│ ├── main│ │ ├── java 存放Java源码│ │ └── resources 存放资源文件│ └── test│ ├── java 存放测试源码│ └── resources 存放测试资源└── target 存放所有编译、打包生成的文件第二节 下载安装Maven一、下载1.可到Apache Download Mirrors版本如图2.1所示。图2.1二、安装1.把下载好的maven压缩包解压到一个没有中文空格或其他特殊字符的文件夹如图2.2所示。图2.2三、环境变量配置1.右键此电脑-属性-高级系统设置-环境变量如图2.3所示。图2.32.新建系统变量MAVEN_HOME如图2.4所示。图2.43.编辑系统变量Path添加变量值%MAVEN_HOME%\bin如图2.5所示。图2.54.验证安装是否成功winR运行cmd输入mvn -v如图所示则配置成功如图2.6所示。图2.6第三节 配置本地仓库在Maven安装目录conf目录下找到settings.xml配置文件如图2.7所示。图2.7修改本地仓库地址在maven安装目录下新建本地仓库文件夹maven_repository如图2.8所示。图2.8修改默认本地仓库地址如图2.9所示。图2.9配置私服因为中央仓库在国外导致下载jar包很慢或者失败所以我们改为国内的服务器下面三个选择一个就可以了。一般会用阿里云的镜像库但不知道是我电脑还是网络的原因下载jar包总会出错换了很多阿里云镜像都不管用最后换了腾讯云的就好了所有这里给出了三个镜像如图2.10所示图2.10将镜像复制到两个mirrors标签之间如图2.11所示。图2.11配置jdk也要夹在两个profiles标签之间如图2.12所示。图2.12第四节 建立maven的一般项目1.首先根据上面的操作配置maven的home path、settings file、Local repository(当然你也可以用默认的)如图2.13所示。图2.132.创建项目如图2.14所示。图2.14第五节 建立maven的web项目1.打开idea新建项目如图2.15图2.16所示。图2.15图2.16第六节 添加依赖1.Maven依赖的添加如图2.17所示。图2.17第七节 Jekins自动化项目的部署1.点击如图2.18所示的Item图2.182. 填写名称并选择项目构建1jenkins可以创建多种类型的任务这里以maven任务举例说明。如果你的任务类型不存在下图选中的任务类型那就是没有下载Maven Integration plugin插件如图2.19所示。图2.192填写概述并选择相对应的配置如图2.20所示。图2.203这里选择对应的分支gitlab项目中的主分支是main而在Jenkins中配置成了master如图2.21所示。图2.214这里选择git如图2.22所示图2.225选择源码管理-Git输入项目gitee地址初次使用时会报如下错误 如图2.23所示。图2.236 添加凭证点击上图添加输入gitee的账号密码后点击添加即可然后选择刚刚添加的凭据就不会报错了如图2.24所示。图2.247此处的路径粘贴自己git仓库的路径即如下涂改处如图2.25所示。图2.258选择构建触发器如图2.26所示。图2.269构建环境选择自己的环境构建需求如图2.27所示。图2.2710在Build处新增maven命令clean install然后点击保存-立即构建执行任务如图2.28所示。图2.2811选择执行条件如图2.29所示。图2.2912选择构建的设置如图2.30所示。图2.3013如有构建后的操作可进行相应设定若无点击保存即可如图2.31所示。图2.31第三章 基于Vue的项目构建第一节 安装nods1.简介 Node.js并不是我们平常使用的JavaScript库它是一个JavaScript的运行环境基于这个环境我们可以不需要浏览器直接执行js代码类似于Java的运行环境jdk2.安装在官网直接下载安装所需版本即可3.验证安装是否成功1cmd中输入node –v2出现版本号即代表安装成功如图3.1所示。图3.1第二节 npm1.简介npm是一个软件包仓库我们可以在npm中找到任何开源的js代码npm类似于后台中maven的作用maven帮助我们下载后台jar包而npm可以帮助我们下载前台需要的框架比如jQuery、Layui、ElementUi等1安装node中自带npm所以不需要再安装2验证安装成功cmd中输入npm –v出现版本号即代表安装成功如图3.2所示。图3.2第三节 cnpm淘宝镜像1.简介因为npm的服务器在国外会使我们安装依赖的速度很慢所以我们使用淘宝镜像来安装依赖即cnpm2.安装在cmd中输入安装命令npm install -gcnpm--registryhttp://registry.npm.taobao.org3.验证安装成功cmd中输入cnpm -v出现一系列版本号即代表安装成功第四节 安装vue脚手架vue-cli简介日常生活中脚手架可以快速搭建形成一个框架vue脚手架的作用跟日常生活中作用类似可以帮助我们快速构建一个标准的前端vue项目辅助开发安装cmd中执行命令npm install -g vue/cli若安装过程中如果出现错误尝试解决办法执行命令npm install -g –force vue/cli验证安装成功cmd中输入命令vue -V注意大写出现vue脚手架版本号说明安装成功如图3.3所示。图3.3第五节 webpack工具脚手架创建以来的工具类似于maven提供的webapp模板安装npm install webpack –g如图3.4所示。图3.4第六节 使用vue脚手架搭建项目1.新建项目文件夹在cmd中通过cd命令进入到项目目录如图3.5图3.6所示。图3.5图3.62.通过如下命令构建项目注意项目名不能使用大写字母1vue create 项目名称初次创建配置好后后面可以快速创建如图3.7,图3.8图3.9图3.10图3.11所示。图3.7图3.8图3.9图3.102出现以下信息说明项目构建成功。图3.113设置过vueConfig后以后再次创建vue项目时可以在vue create 项目后直接选择以下选项直接创建vue项目 如图3.12所示。图3.12第七节 项目运行1.在cmd中依次执行以下命令启动1cd vueproject2npm run serve结果如图3.13所示。图3.132.在webstorm中启动项目1配置node运行环境右上角点击add configuration在打开的页面中点击左上角加号选择npm添加node.exe,如下图保存设置点击甲壳虫启动即可如图3.14,图3.15所示图3.14图3.152在终端terminal中输入命令npm run serve启动项目如图3.16所示。图3.163点击左侧边栏的npm双击serve如图3.17所示。图3.174package.json中启动如图3.18所示。图3.18第八节 访问项目1.在浏览器中输入提示的网址http://localhost:8080进入vue项目的主页面前台项目也会占用一个端口默认8080如果该端口被占用则自动调用其他空闲端口如图3.19。图3.19第九节 vue项目搭建一、安装路由模块1在目标文件下执行指令npminstallvue-router-s2在目标文件夹下打开cmd输入指令vue init webpack 【项目名】图3.203圈选处选择y表示需要配置路由成功后目标文件下会现我们所创建的项目如图3.21图3.22所示。图3.21图3.224用编译软件打开即可如图3.23图3.24所示。图3.23图3.246在main.js中引入并挂载vue-router如图3.25所示。图3.25二、安装element UI在终端中输入npm i element-ui –Smain.js全局引入element ui如图3.26所示。图3.26三、前台申请后台资源axios1下载axios在终端npm install axios2在main.js中引入如图3.27图3.28所示。图3.27图3.28四、安装Vuex1终端npm install vuex3 --save2在main.js中引入vuex如图3.29图3.30所示。图3.29图3.30五、全局挂载1在src目录下创建文件夹存放css文件例如css/global.css2挂载到main.js中实现全局生效如图3.31所示。图3.30第十节 Jekins自动化项目的部署一、新建任务1.在创建任务前我们需要安装两个插件分别是nodejs plugin和Publish Over SSH这两个插件如图3.313.3所示。图3.31图3.322.nodejs全局配置如图3.33所示。图3.333.点击Global Tool Configuration进去后找到nodejs如图3.34所示。图3.344.点击安装nodejs如图3.35所示。图3.355.Publish Over SSH配置远程服务器如图3.36图3.37所示。图3.36图3.376.项目构建如图3.38图3.39所示。图3.38图3.39二、登录gitee账号如图3.40所示。图3.40图3.41三、配置nodejs以及环境配置等如图3.42图3.43图3.44图3.45图3.46所示。图3.42图3.43图3.44图3.45图3.46四、保存并构建1.保存并构建的流程如图3.47图3.48图3.49所示。图3.47图3.48图3.49五、手动的构建已完成1.接下来进行当gitee文件更新时自动构建如图3.50图3.51图3.52图3.53图3.54图3.55所示。图3.51图3.52图3.53图3.54图3.55
尧图网络