前言：写这篇文章的目的是最近搞了下前端自动化部署，准备写篇博客记录下来。其中用到了docker容器技术，因此在写自动化部署的博客前先记录一下docker的下载安装以及镜像和容器的创建。什么是docker，以及为什么前端要学习docker假设现在你开发完了一个项目，这个时候你要把这个项目交给测试去测试。测试在拿到你的代码后，运行项目，发现项目跑不起来。然后就对你说项目有问题，跑不起来，让你解决。可是
转载
2024-03-20 16:23:02
43阅读
假定你已经有一个vue项目了，并且已经用github进行管理了，假定你还有一台免费的linux服务器，想用自动化部署的方式解放双手，假定你已经了解dockerhub使用，想玩转docker容器假定你已经熟悉了github的action怎么用，想用于自动化部署那么，你来对地方了，哈哈哈哈哈哈，1024小神欢迎您首先看一下你本地的vue项目，创建一个Dockerfile文件： 内容如下：#
随着项目越来越大的时候，会发现不管是从npm run build 、 jenkins 配置构建的时候，还是项目首页初次加载时，耗费的时间也越来越多，达到了3分钟以上，这个时候，我们就需要优化我们的代码了： （ 持续更新 ） 优化代码可以分为两个部分：webpack打包工具优化项目代码优化一、 webpack打包工具优化1. 打包构建前期，我们需要安装一个插件来辅助我们做一个全面的评测。webpac
转载
2024-03-23 11:25:40
33阅读
###NodeJS 安装成功之后，接下来安装 Vue的工具： npm install -g vue-cli # 只需要第一次安装时执行 vue init webpack my-project # 使用webpack模板创建一个vue项目 cd my-project #进入到项目目录中 npm ins ...
转载
2021-10-22 14:05:00
416阅读
2评论
一、web容器对于一个web 应用，其部署在web 容器中，web 容器为其提供一个全局的上下文环境(ServletContext )，为其后面的spring IoC 容器提供宿主环境一个WEB应用对应一个ServletContext上下文.这里说的Web容器就是ServletContext.二、Spring ioc容器在web.xml 中会提供 contextLoaderListener。在we
1.项目概述1.功能模块电商后台管理系统大致可以分为以下几个功能模块：用户登录，退出登录用户管理权限管理
角色列表权限列表商品管理
商品列表分类列表参数管理订单管理数据管理2.开发模式采用的开发模式是前后端分离的开发模式。其中前端项目是基于Vue技术栈的SPA(单页面应用)项目。前端技术栈主要有：vuevue-routerElement-UIAxiosEcharts后端技术栈主要有：N
npm install -g vue@next npm install -g e/cli-service npm install -g yarn npm...
原创
2023-05-31 22:55:43
148阅读
vue学习笔记—基础语法简介介绍： vue是一个专注于前端UI的框架，他的主要能力是： 01.声明式的绑定。包括数据绑定、事件绑定。 02.基于组件的编程。让开发者可以把整个应用分为若干组件，从而达到分而治之的目的。vue的特点： 想要更好的理解vue，那么对于下面这几个词汇就应该有个更深刻的理解，单页面应用，数据驱动，模板语法，组件化 （1）单页面应用： 单页面应用（single page we
转载
2024-04-10 12:44:48
20阅读
一、jenkins job配置源码管理配置构建触发器配置构建环境配置构建脚本配置jenkins从阿里云容器服务的仓库拉取镜像，然后自动部署docker stop aliyun-vue-test
docker rm aliyun-vue-test
docker login --username=271177385@qq.com registry.cn-hangzhou.aliyuncs.com --
转载
2023-11-24 21:29:29
36阅读
前言? 需提前安装环境及知识点： 1、Docker搭建及基础操作 2、DockerFile文件描述 3、Jenkins搭建及基础点? 目的： 将我们的前端项目打包成一个镜像容器并自动发布部署，可供随时pull访问一、手动部署镜像及容器1、在当前项目的根目录创建Dockerfile文件并写入如下代码：# 第一阶段：构建前端产出物
FROM node:14.19.0 AS builder
WORKD
转载
2024-04-16 11:39:21
416阅读
一、如何部署前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可我们知道vue项目在构建后，是生成一系列的静态文件常规布署我们只需要将这个目录上传至目标服务器即可// scp 上传 user为主机登录用户，host为主机外网ip, xx为web容器静态资源路径
scp dist.zip user@host:/xx/xx/xx让web容器
转载
2024-03-01 10:26:23
101阅读
前端项目初始化的步骤 1. 安装vue脚手架 2.通过vue脚手架创建项目 可以直接 vue create 项目名 也可以 vue ui 3.配置vue路由 4.配置Element-ui 组件库 5.配置axios库 6.初始化git远程仓库 并托管到github或码云中
原创
2021-07-30 11:38:47
203阅读
背景ALIWARE随着国家新基建步伐的快速迈进，企业客户正在加快建设符合自己业务场景的新型基础设施体系。数字化转型成为企业在当前新基建背景下的一道必考题，但由于由于缺少数字化转型的整体规划方案和行之有效的方式方法和落地经验，很多企业往往找不到数字化转型的关键答案。埃森哲作为全球领先的专业服务公司，在数字化、云计算等领域拥有全球领先的能力，我们在多年的实际客户项目中，找到并沉淀出了适合企业数字化转型
转载
2024-04-22 21:52:18
35阅读
打包Vue项目 当Vue项目完成后，在根目录下打开命令行，输入命令：npm run build实际上此命令就是执行build.js文件，将项目打包成静态资源。此命令完成后，项目根目录下会多出一个dist文件夹，dist文件里面有：static文件下包括项目打包后的css、js、img、fonts(字体图标)。
项目资源无法加载
一， 使用Vue脚手架1.1. 使用脚手架创建模板项目1) vue-cli是vue官方提供的脚手架工具 command line interface 2) 最新的版本是4,3)  
转载
2023-11-02 10:03:06
57阅读
什么是前端工程化、模块化、组件化？前端工程化工程化是一种思想而不是某种技术(当然为了实现工程化我们会用一些技术)再用一句通俗的话来概括前端工程化:前端工程化就是用做工程的思维看待和开发自己的项目,而不再是直接撸起袖子一个页面一个页面开写前端模块化 前端工程化是一个高层次的思想,而模块化和组件化是为工程化思想下相对较具体的开发方式,因此可以简单的认为模块化和组件化是工程化的表现形式。模块化开发，一个
本文介绍了笔者的前端容器化部署踩坑之旅。并解决了以下几个问题：node modules缓存镜像体积过大镜像数量多且上线流程复杂本文要求读者有一定的容器基础，掌握Docker的基本操作，了解K8s的Pod原理。如果还不了解，请先拉到文末，阅读参考资料。最近将一个前端项目部署到公司的容器服务。事情的起因是这样的：原先我们在一台服务器上部署了一套Jenkins，用于前端项目集成。一个月前，安全部门发邮件
转载
2024-04-23 20:39:31
10阅读
项目工作开始从配置文件开始实前端决定的东西也挺多的从组件化开始，抽离封装，基于ui组件库二次封
原创
2022-08-19 11:38:23
132阅读
安装完Vue3.0 后 使用命令 vue ui然后浏览器访问localhost:8000然后点击创建
原创
2023-04-23 12:39:20
222阅读
Docker 变得越来越流行，它可以轻便灵活地隔离环境，进行扩容，运维管理。对于业务开发者而言，随着持续集成的发展，对代码质量及快速迭代的要求也越来越高。对于前端而言，在 CI 环境中使用也更容易集成开发，测试与部署。比如可以为流水线(Pipeline)设置 Lint/Test/Security/Audit/Deploy/Artifact 等任务，更好地把控项目质量。现在无论是
转载
2024-09-27 18:28:48
18阅读
