Java后端兼职前端，大势所趋，❤️Vue脚手架❤️助你腾飞翱翔（建议收藏）

置顶哪吒 2021-10-08 19:37:08 781

版权

专栏收录该内容

15 篇文章 27 订阅

订阅专栏

🍅 Java学习路线：搬砖工逆袭Java架构师

🍅 Java经典面试题大全：10万字208道Java经典面试题总结(附答案)

🍅 简介：Java领域优质创作者🏆、CSDN哪吒公众号作者✌ 、Java架构师奋斗者💪

🍅 扫描主页左侧二维码，加入群聊，一起学习、一起进步

🍅 欢迎点赞 👍 收藏 ⭐留言 📝

Vue思维导图

🍅 粉丝专属福利：包邮送书3本，如下书单四选一。

🍅 获取方式：

1、参与文末投票，点赞，收藏即有机会获得精美图书一本；

1、评论区评论：获取点赞最多者，获取一本；

2、评论区评论：通过random函数，随机抽取两名；

【注意】想加入微信群聊，可以扫描主页左侧二维码、私信与我、加本人微信guo_rui_

1、《亿级流量Java高并发与网络编程实战》

2、《分布式一致性算法开发实战媒体宣传文案》

3、《Java多线程与大数据处理实战》

4、《深入浅出TCPIP和VPN》

一、什么是VueCLI

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

3、CLI是什么意思？

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

三、runtime-compiler和runtime-only的区别

1、runtime-compiler加载过程

2、runtime-only加载过程：（性能更高，代码更少）

1、vue-cli 3 与 vue-cli 2 版本的区别？

一、什么是VueCLI

1、如果你只是简单写几个Vue的Demo程序，那么你不需要VueCLI脚手架。

2、如果你在开发大型项目，那么你需要，并且必然需要使用VueCLI。

使用Vue.js开发大型应用时，我们需要考虑代码目录结构、项目结构和部署、热加载、代码单元测试等事情。
如果每个项目都要手动完成这些工作，那么无疑效率比较低效，所以通常我们会使用一些脚手架工具来帮助完成这些事情。

3、CLI是什么意思？

CLI是Commond-Line Interface，翻译为命令行界面，俗称脚手架。
VueCLI是一个官方发布vue.js项目脚手架。
使用VueCLI可以快速搭建vue开发环境以及对应的webpack配置。

4、脚手架长什么样？

5、脚手架依赖于node.js和webpack

二、安装Vue CLI脚手架

三、runtime-compiler和runtime-only的区别

1、runtime-compiler加载过程

template -> ast -> render -> vdom -> UI

2、runtime-only加载过程：（性能更高，代码更少）

render -> vdom -> UI

如果在之后的开发中，你依然使用template，就需要选择Runtime-Compiler；

如果你之后的开发中，使用的是.vue文件夹开发，那么可以选择Runtime-only；

4、代码实例

main.js

App.vue

index.html

5、npm run build执行过程

6、npm run dev执行过程

四、认识Vue CLI3

1、vue-cli 3 与 vue-cli 2 版本的区别？

vue-cli 3 是基于 webpack 4 打造，vue-cli 2 还是 webapck 3
vue-cli 3 的设计原则是“0配置”，移除的配置文件根目录下的，build和config等目录
vue-cli 3 提供了 vue ui 命令，提供了可视化配置，更加人性化
移除了static文件夹，新增了public文件夹，并且index.html移动到public中

2、通过脚手架3构建项目

vue create my-project

npm run serve

之前学习的时候main.js

通过 Vue CLI3创建的项目main.js

两种写法没区别。

el多了一个判断，el被解析为$mount。

五、箭头函数

1、定义函数的三种方式

2、箭头函数参数和返回值

3、什么时候使用箭头函数

4、箭头函数与this

六、前端路由vue-router

1、维基百科

路由就是通过互联的网络把信息从源地址传输到目的地址的活动。

2、路由的机制

路由包括路由和转发。

路由器 -> 公网IP -> 映射表 -> 内网IP

映射表：[内网ip1:电脑标识1，内网ip2:电脑标识2]

3、后端渲染

JSP：java server page

后端渲染 == html + css + java

java代码的作用是从数据库中读取数据，然后将他们动态的放在页面中。

后端渲染的意思就是，前端请求后端，页面的数据在后端已经渲染好了，然后再返回前端，内容包括HTML+css，当然是包含数据的HTML。

后端路由：后端处理URL和页面之间的映射关系。

4、后端路由阶段

早期的网站开发整个HTML页面是由服务器来渲染的。
服务器直接生产渲染好对应的HTML页面, 返回给客户端进行展示。

但是, 一个网站, 这么多页面服务器如何处理呢?

一个页面有自己对应的网址, 也就是URL。
URL会发送到服务器, 服务器会通过正则对该URL进行匹配, 并且最后交给一个Controller进行处理。
Controller进行各种处理, 最终生成HTML或者数据, 返回给前端。
这就完成了一个IO操作。

上面的这种操作, 就是后端路由：

当我们页面中需要请求不同的路径内容时, 交给服务器来进行处理, 服务器渲染好整个页面, 并且将页面返回给客户顿。
这种情况下渲染好的页面, 不需要单独加载任何的js和css, 可以直接交给浏览器展示, 这样也有利于SEO的优化。

后端路由的缺点：

一种情况是整个页面的模块由后端人员来编写和维护的。
另一种情况是前端开发人员如果要开发页面, 需要通过PHP和Java等语言来编写页面代码。
而且通常情况下HTML代码和数据以及对应的逻辑会混在一起, 编写和维护都是非常糟糕的事情。

5、前后端分离

后端只负责提供数据，不负责其它任何阶段。

浏览器中显示的网页中的大部分内容，都是由前端写的JS代码在浏览器中执行，最终渲染出来的网页。

随着Ajax的出现, 有了前后端分离的开发模式。
后端只提供API来返回数据, 前端通过Ajax获取数据, 并且可以通过JavaScript将数据渲染到页面中。
这样做最大的优点就是前后端责任的清晰, 后端专注于数据上, 前端专注于交互和可视化上。
并且当移动端(iOS/Android)出现后, 后端不需要进行任何处理, 依然使用之前的一套API即可。
目前很多的网站依然采用这种模式开发。

6、单页面富应用阶段

其实SPA最主要的特点就是前后端分离的基础上加上了一层前端路由；
也就是前端来维护一套路由规则

7、SPA页面

SPA：单页富应用

整个网页只有一个HTML网页。

8、前端路由

URL和前端页面的映射关系。

-----> vue router

前端路由的核心是什么呢？

改变URL，但是页面不进行整体的刷新。

七、改变URL，但是页面不进行整体的刷新

1、URL的hash

URL的hash也就是锚点，本质上是改变window.location的href属性。

我们可以通过直接赋值location.hash来改变href，但是页面不发生刷新。

2、HTML5的history

history.pushState({},'','home')

history.pushState相当于栈的操作，先进后出，弹栈和入栈的操作。

history.pushState入栈；

history.back()出栈；

history.go(-1) 相当于 history.back()；

history.forward 相当于history.go(1)；

history.replaceState()：不能返回；

🍅 粉丝专属福利：包邮送书3本，如下书单四选一。

🍅 获取方式：

1、参与文末投票，点赞，收藏即有机会获得精美图书一本；

1、评论区评论：获取点赞最多者，获取一本；

2、评论区评论：通过random函数，随机抽取两名；

【注意】想加入微信群聊，可以扫描主页左侧二维码、私信与我、加本人微信guo_rui_

往期精彩回顾

【Vue基础知识总结 1】Vue入门

【Vue知识体系总结 2】Vue动态绑定v-bind

【Vue知识体系总结 3】Vue常用标签

【Vue知识体系总结 4】Vue组件化开发

【Vue基础知识总结 5】Vue实现树形结构

【Vue基础知识总结 6】Spring Boot + Vue 全栈开发，都需要哪些前端知识？

【Vue基础知识总结 7】结合双向绑定理解父子组件

【Vue基础知识总结 8】插槽slot与vue导入导出

【Vue基础知识总结 9】vue webpack打包原理