关于搭建element + vue + springboot的始终

目录

目录

一、从nodejs开始

1、Node.js

2、npm：node的maven工具

3、mvvm

二、webpack

1、webpack是什么

2、为什要使用WebPack

3、webpack npm node之间关系？

其他

1、前后端分离概念：

2、使用vue-cli webpack搭建项目

---

---

一、从nodejs开始

廖雪峰的nodejs

1、Node.js

Node.js就是基于Google的V8引擎，运行在服务端的JavaScript环境

最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎，使编写高性能Web服务轻而易举

 

2、npm：node的maven工具

npm是什么东东？npm其实是Node.js的包管理工具（package manager）。

为啥我们需要一个包管理工具呢？因为我们在Node.js上开发时，会用到很多别人写的JavaScript代码。如果我们要使用别人写的某个包，每次都根据名称搜索一下官方网站，下载代码，解压，再使用，非常繁琐。于是一个集中管理的工具应运而生：大家都把自己开发的模块打包后放到npm官网上，如果要使用，直接通过npm安装就可以直接用，不用管代码存在哪，应该从哪下载。

更重要的是，如果我们要使用模块A，而模块A又依赖于模块B，模块B又依赖于模块X和模块Y，npm可以根据依赖关系，把所有依赖的包都下载下来并管理起来。否则，靠我们自己手动管理，肯定既麻烦又容易出错。

讲了这么多，npm究竟在哪？

其实npm已经在Node.js安装的时候顺带装好了。我们在命令提示符或者终端输入npm -v，应该看到类似的输出：

 

3、mvvm

什么是MVVM？MVVM是Model-View-ViewModel的缩写

MVVM最早由微软提出来，它借鉴了桌面应用程序的MVC思想，在前端页面中，把Model用纯JavaScript对象表示，View负责显示，两者做到了最大限度的分离。

把Model和View关联起来的就是ViewModel。ViewModel负责把Model的数据同步到View显示出来，还负责把View的修改同步回Model。

ViewModel如何编写？需要用JavaScript编写一个通用的ViewModel，这样，就可以复用整个MVVM模型了。

这就是MVVM的设计思想：关注Model的变化，让MVVM框架去自动更新DOM的状态，从而把开发者从操作DOM的繁琐步骤中解脱出来！
不再进行dom操作。

 

二、webpack

1、webpack是什么

WebPack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

2、为什要使用WebPack

今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法

a:模块化，让我们可以把复杂的程序细化为小的文件;

b:类似于TypeScript这种在JavaScript基础上拓展的开发语言：使我们能够实现目前版本的JavaScript不能直接使用的特性，并且之后还能能装换为JavaScript文件使浏览器可以识别；

c:scss，less等CSS预处理器

.........

这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别,而手动处理又是非常繁琐的，这就为WebPack类的工具的出现提供了需求。

3、webpack npm node之间关系？

关系看这
webpack是npm生态中的一个模块，我们可以通过全局安装webpack来使用webpack对项目进行打包；

webpack的运行依赖于node的环境，没有node是不能打包的，但是webpack打包后的项目本身只是前端静态资源和后台没有关系，也就是说打包后的项目是不依赖于node，只要有后台能力的都可以部署项目

npm是于Node社区中产生的，是nodejs的官方包管理工具，当你下载安装好node的时候，npm cli就自动安装好了

正是因为npm的包管理，使得项目可以模块化的开发，而模块化的开发带来的这些改进确实大大的提高了我们的开发效率，但是利用它们开发的文件往往需要进行额外的处理才能让浏览器识别，而手动处理又是非常繁琐的，这就是webpack工具存在的意义
 

其他

1、前后端分离概念：

https://segmentfault.com/a/1190000009266900

https://blog.csdn.net/weixin_37539378/article/details/79956760

 

2、使用vue-cli webpack搭建项目

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#app',// 浏览器访问项目，最先访问的是index.html文件; 告诉该实例要挂载的地方；（即实例装载到index.html中的位置）
	router,// 路由跳转页面。默认/
	components: { App },// 实例中注册了一个局部组件App，
	template: ''// 模板就是组件App.vue中的template中的内容。（template会替代原来的的挂载点处的内容
})

main.js:程序入口

index.js // 项目访问首页，也是根挂载点app所在页面

app.vue // 局部组件,供templete使用

所以Vue这个实例就是战士的是App.vue这个组件的内容。

 所以，我们进行总结：在项目运行中，main.js作为项目的入口文件，运行中，找到其实例需要挂载的位置，即index.html中，刚开始，index.html的挂载点处的内容会被显示，但是随后就被实例中的组件中的模板中的内容所取代，所以我们会看到有那么一瞬间会显示出index.html中正文的内容。

而index.html中的Title部分不会被取代，所以会一直保留。