前端白话--全过程

简单的介绍

Vue 是一款用于构建用户界面的渐进式的JavaScript框架。

构建用户界面：基于数据渲染出用户看到的界面。

渐进式：开发人员可以使用如vue核心包和组件系统等，也就是我们需要什么我们就使什么。

 vue工程化

小白眼中的前端开发：HTML控制页面的结构。CSS来控制网页的样式。JS来控制网页的动作和行为。AXIOS技术来发送异步请求，请求服务器端来获取数据。基于vue的核心指令来渲染展示页面，简化DOM的原生操作。

缺点：不规范，难维护，难复用。

企业级前端开发：目前主流的前端开发是基于vue框架进行开发。遵循一下四个特点。从而使之统一规范，提高复用，便于维护。

 vue工程化环境准备：

 nodejs是一个免费开源跨平台的JavaScript运行环境他让开发人员能够创建服务器、web应用、命令行工具和脚本。下载好nodejs，npm自动也就下载好了。

 下载完毕之后要配置npm的全局安装路径。

 切换为淘宝镜像，加速下载。

 vue项目的创建：

1.npm create vue@3.3.4

2.cd 项目目录

3.npm install 进入项目目录，安装项目运行所需的依赖。

4.npm run dev  运行项目。

vue项目目录结构介绍：

根组件App. vue的结构：

 vue项目的两种不同的API风格：选项式API风格、组合式API风格。项目开发目前都是用基于vue3的组合式API风格。

组合式API风格的一个简单示例：

element plus 工具的介绍和使用：

element plus 是我们的前端页面变得更加美观。

 

 

 

 

 

 

项目部署篇——docker

1.docker简介

docker是一个快速构建、运行、管理应用的工具。

 总之来说，使用dacker下载安装应用非常好用且不用配置环境等。

2.docker常用命令

 一个简单示例：

docker pull  nginx:1.20.2   从镜像仓库拉取nginx镜像到本地。

docker images 查看本地镜像列表。

docker run -d --name nginx -p 80:80 nginx:1.20.2  创建并运行nginx容器（前面的80指的是宿主机的端口，后面的80指的是nginx服务器的默认端口）。

docker ps 查看容器。

docker stop nginx  停止nginx容器。

docker start nginx  启动nginx容器。

docker exec  -it nginx  bash  进入nginx容器（一个容器相当于一个系统，每个容器独立互不影响）。

exit  退出nginx容器。

docker rm nginx  删除nginx容器。

3.数据卷挂载

为什么需要数据卷挂载？

由于我们的镜像只有一些必要的文件，一些指令不能使用，不能完成一些功能（如vim指令），我们通过数据卷挂载可以使镜像中的文件与我们宿主机的文件映射。

 4.本地目录挂载

目前项目部署主流都是本地目录挂载，主要原因还是因为数据卷挂载目录路径太长、繁琐。

5.自定义镜像

 

 镜像的分层结构，有利于复用。

如何构建自己的镜像呢？

我们可以利用dockerfile来构建自己的一个镜像。

 6.网络

容器之间的通信是非常有必要的（比如我们自定义一个Java应用容器，我们还有一个MySQL容器，在web应用中需要访问数据库），各个容器之间是如何通信呢？

我们可以通过网络来进行通信。

 但是在默认情况下我们只能通过ip地址来进行通信，当我们在删除了一个容器，再次下载回来的时候会给这个容器随机分配一个ip地址，这就会导致另一个容器与这个容器不能进行通信（除非修改配置文件信息，比较繁琐且很恶心，个人理解配置是最恶心的😐😐😐）。于是便有了自定义网络，通过自定义网络我们可以通过容器名来互相访问。（good🤩）

一些自定义网络命令

后面我会继续分享一些案例和补充一些知识，感谢大家提出宝贵建议和知识纠正。