Vue之Hello World！

目录

1.简介

1.1.Vue介绍

1.2.什么是MVVM模型

1.3.Vue相关

1.4.帮助文档

1.5.VUE GitHub

2.安装

2.1.管理员启动cmd，执行npm install vue命令

2.2.继续安装，执行npm install vue@2命令

2.3.查看安装信息，执行 npm info vue 命令

2.4.安装之后，vue.js的位置

2.5. （据说）不安装时，可以在线引用，不过不好用

3.代码  （VUE2 的写法）

4.运行效果

5.更多代码

5.1  function 定义 与 编写

5.2修改添加DOM元素   （v-html）

5.3.另外一种绑定方式 vm.$mount('#id')

5.4.六大基础指令 （Directives）

1.内容渲染指令  ：v-text、{{}}、v-html

2.属性绑定指令：v-bind      简写 【:】

3.事件绑定指令： v-on        简写 【@】

4.双向绑定指令：v-model

5.条件渲染指令：v-show、v-if、v-else-if、v-else

6.列表渲染指令：v-for

5.5.SpringBoot + VUE

6.其它知识

6.1.浏览器跨域限制

6.2.CORS  "跨域资源共享"（Cross-origin resource sharing）

6.3.CSRF "跨站请求伪造" Cross-site request forgery

７.创建Vue工程并运行   【npm run dev】

工程目录

访问URL

为什么【npm run dev】好用

8.什么是vite

定义

vite使用

扩展：启动嵌套工程

9.什么是Vue数据响应式

10.vue3中定义变量,ref、reactive、toRefs特性详解

11.遇到的错误

错误1：找不到 vite命令

错误2：npm i 时出现错误

12.vue项目中使用CDN引入(什么是CDN)

13.vue3中ref和reactive的区别

14.vscode不识别 vue文件 解决

15.npm i 安装时，依赖冲突问题解决

16.npm run 指定端口启动

17.VUE 相关的英文单词

18.defineProps

19.代码错误【Cannot find module 'express'。。。】

20.Express 框架的使用（详细）

21.组件生命周期( VUE2 和 VUE3 对比 )

22.TS中 type 关键字的作用

23.VUE3组件:关于defineProps()

24.Pinia

25.Pinia基础知识

26.express B站  (使用到了nodemone)

27.Pinia B站

28.【建立服务器程序】  nodemone  (与 Express 相关) 

29.设计模式：装饰器模式  (B站)

30.设计模式：观察者模式  (B站)（Rxjs 采用的就是观察者模式）

31.设计原则

一、单一职责原则（Single Responsibility Principle）

二、开闭原则(Open-Closed Principle, OCP)

三、里氏代换原则(Liskov Substitution Principle, LSP)

四、依赖倒置原则（Dependence Inversion Principle，DIP）

五、接口隔离原则(Interface  Segregation Principle, ISP)

六、迪米特法则(Law of  Demeter, LoD)

32.全局组件

33.开发者工具中的 ：启动器【Initiator】

34.命名方式

PascalCase  帕斯卡拼写法( 也叫大骆驼拼写法)

camelCase （驼峰命名法）

kebabCase（短横拼音法）

35.使用一个对象绑定多个 prop

36.枚举    常数枚举

37.枚举    可以指定默认值

38.定义对象

39.defineProps 函数使用时，指定默认值

40.编译器宏  （defineProps是一个编译器宏）

41.Watch

42.async  （ES6中的知识点 ：async 函数 返回一个Promise对象）

43.VS Code入门教程介绍Command Palette

44.slots

45.Vue Router （这是另外一份文档）

46.CreateRouter

传递的参数是一个对象：对象的  【属性列表】

history

routes

其他各种属性列表 （Router Options）。。。

routes 属性  相关的文档

47.router-view  （）：路由出口

子路由

48.编程式导航

49.嵌套路由 （Nested Routes）

50.导航守卫 （Navigation Guards）

52.状态管理 （与 Pinia）

53.ES6 对象解构

54.Option Store  (Pinia)

55.Store不能解构 （setup中的Props也不能解构）

56.Pinia核心概念

57.Pinia getters 与 actions 区别

58.依赖注入

为什么需要依赖注入

如何依赖注入

59.依赖注入使用

使用方法1

使用方法2

60.依赖注入  之 Tsyringe

61.Axios

什么是Axios ?

axios在vue中的使用

62.XXX

63.XXX

64.XXX

65.XXX

66.XXX

67.XXX

---

1.简介

1.1.Vue介绍

・Vue.js 的核心是一个允许采用简洁的模板语法来【声明式】地将数据渲染进 DOM 的系统。

・声明式渲染（其实就是在页面添加内容）

・MVVM即model，view，viewmodel，它是数据驱动模式，即所有的一切通过操作数据来进行，
   (它通过一些特殊的HTML语法，将DOM和数据绑定起来)  而尽量避免操作dom树。

・ViewModel是Vue.js的核心，它是一个Vue实例。Vue实例是作用于某一个HTML元素上的，
    这个元素可以是HTML的body元素，也可以是指定了id的某个元素。

・MVVM模式本身是实现了双向绑定的，在Vue.js中可以使用v-model指令在表单元素上创建双向数据绑定。

1.2.什么是MVVM模型

这篇文章写的超级好！

Vue--》MVVM模型在Vue中的使用_亦世凡华、的博客-CSDN博客

====================

Model(模型)：代表真实状态的内容，即数据访问层(包含数据实体以及数据实体的操作)

View(视图)：用户能在屏幕上看到的结构、布局和外观，负责数据显示以及交互方面

ViewModel(视图模型)：暴露公共属性和命名的视图的抽象，将Model和View进行绑定，两者在进行数据更改时能实时刷新。ViewModel能够观察到数据的变化，并对视图对应的内容进行更新；ViewModel能够监听到视图的变化，并能够通知数据发生变化。

绑定器：在视图模型中，在视图与数据绑定器之间进行通信。

observer 观察者  英 [əbˈzɜːvə] n. 观察员；遵守者

====================

====================

1.3.Vue相关

・vue-cli 程序开发脚手架 (可以借助Node.js安装)
    command-line interface,缩写:CLI  // VUE-CLI
    使用vue-cli可以帮我们快速的搭建Vue开发环境以及对应的 webpack 配置

・Node.js

Node.js之Hello World_sun0322的博客-CSDN博客

使用 npm 安装最新版的vue
npm install vue

然后还要安装脚手架：vue-cli（VUE的脚手架工具） // 可以先不安装
npm install -g vue-cli

・webpack
    webpack是用来搭建前端工程的
    它运行在node环境中，它所做的事情，简单来说，就是打包

・声明式渲染和命令式渲染
声明式：告诉“机器”，你想要什么，不需要关心中间实现过程，我们只需要开始和结果
命令式：如果你想要什么，你要告诉“机器”，并且还要告诉“机器”，怎么做，开始、过程、结果都要有
    比如，我们我们想要从上海去北京，我们不考虑这个票怎么买到， 还是做什么去，反正第二天，我们就到北京了，这就是声明式。但是命令式呢？我们还需要考虑，我们要是坐车怎么办，要是买票怎么办，是不是要中转什么的，考虑中间过程。而声明式就是中间过程交给别人去处理，我不管，这知道上海、北京

・Bootstrap （前台框架）
基于HTML、CSS、JavaScript 开发的简洁、直观、强悍的前端开发框架，使得 Web 开发更加快捷。Bootstrap提供了优雅的HTML和CSS规范，它即是由动态CSS语言Less写成。Bootstrap
 

1.4.帮助文档

简介 | Vue.js (vuejs.org)

===

Vue3 教程 | 菜鸟教程 (runoob.com)

====

单组件的编写 | Vue3 入门指南与实战案例

====

1.5.VUE GitHub

github.com

2.安装

2.1.管理员启动cmd，执行npm install vue命令

（安装前，选择一个你要安装的目录，跳转到此目录下，进行安装）

npm install vue

C:\Windows>npm install vue

added 21 packages, and audited 22 packages in 5s

1 package is looking for funding
  run `npm fund` for details

found 0 vulnerabilities

C:\Windows>

===

如果网络不畅通，出现【rollbackFailedOptional: verb npm-session】错误

使用淘宝的镜像

（npm config set registry https://registry.npm.taobao.org）

===

2.2.继续安装，执行npm install vue@2命令

（继续安装的原因，安装后的文件夹里面，没有找到vue.js）

npm install vue@2

===

2.3.查看安装信息，执行 npm info vue 命令

npm info vue

 

C:\myVue\Vue>npm info vue

vue@3.2.41 | MIT | deps: 5 | versions: 415
The progressive JavaScript framework for building modern web UI.
https://github.com/vuejs/core/tree/main/packages/vue#readme

keywords: vue

dist
.tarball: https://registry.npmjs.org/vue/-/vue-3.2.41.tgz
.shasum: ed452b8a0f7f2b962f055c8955139c28b1c06806
.integrity: sha512-uuuvnrDXEeZ9VUPljgHkqB5IaVO8SxhPpqF2eWOukVrBnRBx2THPSGQBnVRt0GrIG1gvCmFXMGbd7FqcT1ixNQ==
.unpackedSize: 2.5 MB

dependencies:
@vue/compiler-dom: 3.2.41    @vue/runtime-dom: 3.2.41     @vue/shared: 3.2.41
@vue/compiler-sfc: 3.2.41    @vue/server-renderer: 3.2.41

maintainers:
- yyx990803 <yyx990803@gmail.com>
- posva <posva13@gmail.com>

dist-tags:
beta: 3.2.34-beta.1       latest: 3.2.41            next: 3.2.36              v2-beta: 2.7.0-beta.8
csp: 1.0.28-csp           legacy: 2.6.14            v2-alpha: 2.7.0-alpha.12  v2-latest: 2.7.13

published a week ago by yyx990803 <yyx990803@gmail.com>

C:\myVue\Vue>

===

2.4.安装之后，vue.js的位置

C:\myVue\Vue\node_modules\vue\dist\vue.js

 ===

2.5. （据说）不安装时，可以在线引用，不过不好用

https://unpkg.com/vue/dist/vue.js

运行代码，没有效果，

直接访问那个JS地址时，显示下面的信息

Cannot find "/dist/vue.js" in vue@3.2.41

3.代码  （VUE2 的写法）

（VUE3  名字 one Piece ， 在2020年9月18日发布）

定义View 
定义Model 
创建一个Vue实例或”ViewModel”，它用于连接View和Model

<html>
<head>
	<meta charset="UTF-8">
	<title>Wue 之 Hello World</title>
	<script src="C:\myVue\Vue\node_modules\vue\dist\vue.js"></script>
</head>
<body>
	<div id="app">
		<input type="text" name="" value="" placeholder="在这里输入文字，下面会跟着变化" v-model="message">
		<hr>
		<p>{{ message }}</p>
	</div>


	<script type="text/javascript">

			// 创建一个 Vue 实例或 "ViewModel"
			// 它连接 View 与 Model
			var app = new Vue({
				el: '#app',     // View
				data: {         // Model
				    message: 'Hello World'
			}
		})

	</script>


</body>
</html>

4.运行效果

5.更多代码

5.1  function 定义 与 编写

View

<div id="app"></div>

ViewMode

<script>
new Vue({
	el : '#app',
	data(){
		return {
			msg:'aaa'
		}
	},
	methods:{//methods 存放fn的地方；
		run(){
			alert('run')
		},
		hover(){
			alert('hover')
		}
	},
	mounted(){//相当于js里的window.onload
		this.run();//直接调用run函数；
		console.log(this)
	}
});

5.2修改添加DOM元素   （v-html）

<div id="app">
    <div v-html="msg"></div>
</div>

<script>
    new Vue({
        el:'#app',
        data(){
            return {
                msg:'<h1>HELLO VUE</h1>'
            }
        }
    })
</script>   

5.3.另外一种绑定方式 vm.$mount('#id')

<body>
    <div id="id">
        <h1>姓名：{{name}}</h1>
        <h1>国籍：{{address}}</h1>
    </div>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
           data:{
                name:'张三',
                address:'中国'
            }
        })
        vm.$mount('#id')
        console.log(vm);
    </script>
</body>

=========

5.4.六大基础指令 （Directives）

Vue--》 Vue六大基础指令使用方法_亦世凡华、的博客-CSDN博客

本文 Hello World！ 中，使用的是【4.双向绑定指令】

1.内容渲染指令  ：v-text、{{}}、v-html

xxx

<body>
    <div class="root">
        <div>{{name}} 的反转结果为：{{name.split('').reverse().join('')}}</div>
    </div>
    <script src="/Vue.js/vue.min.js"></script>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        new Vue({
           el:'.root',
           data:{
                name:'这是一个div'
            }
        })
    </script>
</body>

v-text指令和插值表达式只能渲染纯文本内容。如果要把包含HTML标签的字符串渲染为页面的HTML元素，则需要借助 v-html 这个指令！该指令可以把带有标签的字符串，渲染成真正的HTML内容。

2.属性绑定指令：v-bind      简写 【:】

在vue中，可以使用 v-bind: 指令，为元素的属性动态绑定值，也可简写为英文的 : 即可。

在使用 v-bind 属性绑定期间，如果绑定内容需要进行动态拼接，则字符串的外面应该包裹单引号

<body>
    <div class="root">
        <div :title="'div'+index">这是一个div</div>
    </div>
    <script src="/Vue.js/vue.min.js"></script>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        new Vue({
           el:'.root',
           data:{
                index:3
            }
        })
    </script>
</body>

xxx

3.事件绑定指令： v-on        简写 【@】

vue提供了 v-on 事件绑定指令，用来辅助程序员为DOM元素绑定事件监听，案例如下：

<body>
    <div class="root">
        <p>count的值是：{{count}}</p>
        <button v-on:click="addCount">+1</button>
        <button v-on:click="subCount">-1</button>
    </div>
    <script src="/Vue.js/vue.js"></script>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            data: {
                count: 0
            },
            // methods 的作用就是定义事件的处理函数
            methods: {
                addCount () {
                    vm.count += 1
                },
                subCount(){
                    // vm === this
                    this.count-=1
                }
            }
        })
        vm.$mount('.root')
    </script>
</body>

---

Vue提供了内置变量，当我们传递参数的时候，也会传入 $event(当前触发的事件)，它就是原生的DOM事件对象 e ，View视图里面固定写法是 $event ，但是函数形参里面，可以简写为 e ，如下举例：

<body>
    <div class="root">
        <p>count的值是：{{count}}</p>
        <button @click="addCount(1,$event)">+1</button>
    </div>
    <script src="/Vue.js/vue.js"></script>
    <script>
        Vue.config.productionTip = false; //阻止 vue 在启动时生成生产提示
        const vm = new Vue({
            data: {
                count: 0
            },
            // methods 的作用就是定义事件的处理函数
            methods: {
                addCount (n,e) {
                    vm.count += n
                    if(vm.count % 2 == 0){
                        e.target.style.backgroundColor = 'red'
                    }else{
                        e.target.style.backgroundColor = ''
                    }
                }
            }
        })
        vm.$mount('.root')
    </script>
</body>

4.双向绑定指令：v-model

xxx

5.条件渲染指令：v-show、v-if、v-else-if、v-else

xxx

6.列表渲染指令：v-for

xxx

5.5.SpringBoot + VUE

CORS   // 在 spring boot中给我们提供了 @CrossOrigin 注解用于解决跨域问题 

SpringBoot跨域设置（CORS）_骑个小蜗牛的博客-CSDN博客_springboot跨域配置

---

6.其它知识

6.1.浏览器跨域限制

所谓浏览器跨域限制，其实是为了数据安全的考虑由Netscape提出来限制浏览器访问跨域数据的策略。
这是一种约定，正式叫法为“浏览器同源策略”，目前已经在大多数浏览器中支持。

本质上，所谓浏览器同源策略，即：不允许浏览器访问跨域的Cookie，ajax请求跨域接口等。
也就是说，凡是访问与自己不在相同域的数据或接口时，浏览器都是不允许的。
最常见的例子：对于前后端完全分离的Web项目，前端页面通过rest接口访问数据时，会出现如下问题：

不允许发送POST请求：在发送POST请求之前会发送OPTIONS请求，HTTP响应状态码为403（Forbidden）。
允许发送GET请求：HTTP响应状态码为200，但是不能读取服务器返回的数据。

同一个源下的资源与另一个源下的资源进行交换。★★★切记 ★★★　⇒　跨域仅仅是针对浏览器而言的，像两个服务端之间执行http请求的则不属于跨域。

6.2.CORS  "跨域资源共享"（Cross-origin resource sharing）

实现浏览器跨域的方法：CORS 全称是"跨域资源共享"（Cross-origin resource sharing）

什么是跨域请求，怎么解决

简介：
跨域指的是从一个域名去请求另外一个域名的资源。即跨域名请求！
跨域时，浏览器不能执行其他域名网站的脚本，
是由浏览器的同源策略造成的，是浏览器施加的安全限制。
 
 
解决：
CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。
CORS需要浏览器和服务器同时支持。
　　浏览器：目前，所有浏览器都支持该功能，IE浏览器不能低于IE10(ie8通过XDomainRequest能支持CORS)。
 
　　服务器：
　　　　通过在被请求的路由中设置header头，可以实现跨域
　　　　服务端响应的时候添加一个 Access-Control-Allow-Origin 的响应头　　
             （可以使用在服务器端，部署的 Nodejs实现 CORS ）
 
            https://blog.csdn.net/Doug_/article/details/123428376

在 spring boot中给我们提供了 @CrossOrigin 注解用于解决跨域问题 

6.3.CSRF "跨站请求伪造" Cross-site request forgery

 CSRF "跨站请求伪造" Cross-site request forgery

forgery  英 [ˈfɔːdʒərɪ]  n. 伪造罪；伪造品

代码安全_弱点（脆弱性）分析 CWE_20200807_sun0322的博客-CSDN博客

====

７.创建Vue工程并运行   【npm run dev】

cd C:\MyVueProject
npm init vue@latest

cd C:\MyVueProject\vue-project
npm i
npm run dev

工程目录

---

访问URL

http://127.0.0.1:5173/

为什么【npm run dev】好用

因为【package.json】文件中的script部分

{

  "name": "vue-project",

  "version": "0.0.0",

  "private": true,

  "scripts": {

    "dev": "vite",

    "build": "vite build",

    "preview": "vite preview"

  },

  "dependencies": {

    "vue": "^3.2.45"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^3.2.0",

    "vite": "^3.2.4"

  }

}

8.什么是vite

定义

Vite是Vue的作者尤雨溪开发的Web开发构建工具，它是一个基于浏览器原生ES模块导入的开发服务器，在开发环境下，利用浏览器去解析import，在服务器端按需编译返回，完全跳过了打包这个概念，服务器随启随用。同时不仅对Vue文件提供了支持，还支持热更新，而且热更新的速度不会随着模块增多而变慢。在生产环境下使用Rollup打包。

====

与Vue CLI类似，Vite也提供用npm或者yarn来生成项目结构的方式。选择一个目录，打开命令提示窗口，依次执行下面的命令构建脚手架项目，并启动项目。
npm init vite-app <project-name>
cd <project-name>
npm install
npm run dev

====更多说明：

Vite（法语单词，“快” 的意思）是一种新型的前端构建工具

最初是配合 Vue3.0 一起使用的，后来适配了各种前端项目，目前提供了 Vue、React、Preact 框架模板

vite使用

【package.json】文件中指定

Vue----vite 的基本使用_萤火虫的小尾巴的博客-CSDN博客_vite vue

===在【package.json】文件中定义

使用 npm run dev 即可启动

 

扩展：启动嵌套工程

（【模拟server】又是一个工程，里面还有一个【package.json】文件）

我们可以采用（上面代码 ）这种方式，连续启动嵌套的工程

（使用 npm run start 启动 包括嵌套【simulation_server】工程的所以工程）

 使用了【nodemon】命令，下面26有关于【【建立服务器程序】  nodemone  (与 Express 相关) 】的介绍

===

9.什么是Vue数据响应式

就是当数据发生改变时，UI页面做出响应。
=======================
Vue响应式基本概念：
Vue 的响应式，是指当数据改变后，Vue 会通知到使用该数据的代码；例如，视图渲染中使用了数据，数据改变后，视图也会自动更新。
=======================
其核心机制是 观察者模式，我们把依赖数据的观察者称为 watcher；
数据可以有多个观察者，怎么记录这种依赖关系呢？
Vue 通过在data 和 watcher 间创建一个 dep 对象，来记录这种依赖关系；
dep 的结构很简单，除了唯一标识属性id，另一个属性就是用于记录所有观察者的 subs：
id - number
subs - [Watcher]
=======================

10.vue3中定义变量,ref、reactive、toRefs特性详解

vue3中定义变量,ref、reactive、toRefs特性详解_倘若hfl的博客-CSDN博客_ref变量

===

ref() 函数用来根据给定的值创建一个响应式的数据对象，传入的为基本数据类型，例如字符串、数字、boolean 等,返回值是一个对象，这个对象上只包含一个 value 属性

ref定义的变量，改变值要.value,而且在template中不用写.value

===

===

11.遇到的错误

错误1：找不到 vite命令

在工程目录下面，执行npm i命令

npm i

==

错误2：npm i 时出现错误

npm ERR! Cannot read properties of null (reading 'pickAlgorithm')

执行下面命令之后

清除缓存，确保卸载干净
npm cache verify

 （在低版本的nodejs里面清除缓存使用的命令是npm cache clean）

（  npm cache clear --force）

然后重新执行 下面命令

npm i

12.vue项目中使用CDN引入(什么是CDN)

CDN（Content Delivery Network，内容分发网络）

比如

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

13.vue3中ref和reactive的区别

百度安全验证

官方也推荐我们在定义数据的时候，

  reactive定义复杂的数据类型的数据，

   ref推荐定义基本数据类型，

import { ref } from 'vue'
const num = ref(1)

所以如果要使用reactive定义基本数据类型的话，我们需要在reactive中将数据包装一下(像下面这样)

import { reactive } from 'vue'
const num = reactive({ val: 1 })

14.vscode不识别 vue文件 解决

step1.
src下新建一个【vue.d.ts】文件

declare module '*.vue' {
    import { App, defineComponent } from 'vue'
    const component: ReturnType<typeof defineComponent> & {
      install(app: App): void
    }
    export default component
  }

==

step2.
【tsconfig.app.json】文件中，加入刚才的文件

{
  "extends": "@vue/tsconfig/tsconfig.web.json",
  "include": ["src/vue.d.ts","env.d.ts", "src/**/*", "src/**/*.vue"],
  "exclude": ["src/**/__tests__/*"],
  "compilerOptions": {
    "composite": true,
    "baseUrl": ".",
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

===

15.npm i 安装时，依赖冲突问题解决

使用下面命令进行安装

npm install xxxx --legacy-peer-deps

16.npm run 指定端口启动

npm run dev -- --port 3001

17.VUE 相关的英文单词

1.experiment 英 [ɪkˈspɛrɪmənt] n. 实验，试验；尝试；实践实验，试验  // VUE 响应性语法糖

2.render 英 [ˈrɛndə] v. 使得，使成为；给予；提供；付给；提出；交出；// VUE  Conditional Rendering  条件渲染

18.defineProps

<script setup> | Vue.js (vuejs.org)

【使用自定义指定】时用到的代码

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup> 中可用：

<script setup>
const props = defineProps({
  foo: String
})

const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>

为了在声明 props 和 emits 选项时获得完整的类型推导支持，我们可以使用 defineProps 和 defineEmits API，它们将自动地在 <script setup> 中可用：

方法源码如下：

export declare function defineProps<PP extends ComponentObjectPropsOptions = ComponentObjectPropsOptions>(props: PP): Readonly<ExtractPropTypes<PP>>;

xxx

<script setup> | Vue.js (vuejs.org)

xxx

19.代码错误【Cannot find module 'express'。。。】

import express from 'express';

Cannot find module 'express' or its corresponding type declarations.
解决：

npm install express

npm i --save-dev @types/express

20.Express 框架的使用（详细）

Express 是一个基于 Node平台的Web应用开发框架，它提供了一系列的强大特性，帮助你创建各种Web应用。

Express 框架的使用（详细）_1oneLee的博客-CSDN博客​​​​​​x

下面的【28】中有代码的说明。我们可以使用Node的Express框架，来启动一个服务（这份服务读取json数据）。

21.组件生命周期( VUE2 和 VUE3 对比 )

单组件的编写 | Vue3 入门指南与实战案例
 

22.TS中 type 关键字的作用

【进阶】TypeScript 中的 Type_疆子的博客-CSDN博客_typescript中的type

类型别名
语法 : type 别名 = 类型

type St = string // 定义

let str1:St = 'abc'
let str2:string = 'abc'

23.VUE3组件:关于defineProps()

VUE3组件 (1) 关于defineProps()_余九月丶的博客-CSDN博客_vue3中defineprops

===

在子组件中

//Article.vue
<template>
    <section>
          <p>{{ title }}</p>
        <p>{{ info }}</p>
        <p>{{ author }}</p>
    </section>
</template>
<script setup>
    const props = defineProps({
        title: String,
        info: String,
        author: String,
    });// 对象形式声明 props
    // 等价于以 字符串数组声明 props
    //const props = defineProps(['title', 'info', 'author']);
    // 如果在setup中使用则直接 props.title
</script>
<style></style>
 

在父组件中

// Blog.vue
<template>
    <Aritice :title="AriticeItem.title" :info="AriticeItem.info" :author="AriticeItem.author">
     <!-- v-bind ( : ) ，父组件将值绑定到子组件上 -->
    </Aritice>
</template>
<script setup>
    import { reactive } from 'vue';
    import Article from '@/components/Article.vue';
    const AriticeItem = reactive({
        title: '文章标题',
        info: '文章内容',
        author: 'X',
      });
</script>

===

24.Pinia

Pinia意为菠萝
pineapple [ˈpaɪnˌæpəl] n. 菠萝，凤梨

Pinia意为菠萝，表示与菠萝一样，由很多小块组成。在pinia中，每个store都是单独存在，一同进行状态管理。
很多人也将pinia称为vuex5，因为pinia将作为vue3推荐的状态管理库，而vuex将不再迭代

// 创建pinia实例并挂载（vue3）
import { createPinia } from 'pinia'

app.use(createPinia())

pinia - 简书 (jianshu.com)

25.Pinia基础知识

Pinia基础知识_上庸者-不服周的博客-CSDN博客_pinia作用

Pinia 是 Vue 的存储库，它允许跨组件/页面共享状态。实际上，pinia就是Vuex的升级版，官网也说过，为了尊重原作者，所以取名pinia，而没有取名Vuex，所以大家可以直接将pinia比作为Vue3的Vuex。

为什么要使用pinia？

・pinia中只有state、getter、action，抛弃了Vuex中的Mutation，Vuex中mutation一直都不太受小伙伴们的待见，pinia直接抛弃它了，这无疑减少了我们工作量。

・pinia中action支持同步和异步，Vuex不支持

・良好的Typescript支持，毕竟我们Vue3都推荐使用TS来编写，这个时候使用pinia就非常合适了

・无需再创建各个模块嵌套了，Vuex中如果数据过多，我们通常分模块来进行管理，稍显麻烦，而pinia中每个store都是独立的，互相不影响。

26.express B站  (使用到了nodemone)

【前端开发:已完结】『Vue+Express』前后端联合案例【基础案例】_哔哩哔哩_bilibili

27.Pinia B站

2022最新1小时Pinia快速入门教程_哔哩哔哩_bilibili

28.【建立服务器程序】  nodemone  (与 Express 相关) 

express和nodemon简单讲解_文丁响的博客-CSDN博客_express nodemone

nodemon 是一种工具，可在检测到目录中的文件更改时通过自动重新启动节点应用程序来帮助开发基于 node.js 的应用程序。

js  

可以通过require把express给引进来。

//nodemon app.js
const express = require('express'),
      bodyparser = require('body-parser')
      studentData = requiere('./student.json')

const app = express();

app.listen('8080',() => {
   console.log('Server is running on Port 8080!')
")

配置文件

//package.json

scripts:{
   "server": "nodemon app.js"

}

启动命令

npm run server

29.设计模式：装饰器模式  (B站)

五分钟学设计模式.05.装饰器模式_哔哩哔哩_bilibili

30.设计模式：观察者模式  (B站)（Rxjs 采用的就是观察者模式）

五分钟学设计模式.07.观察者模式_哔哩哔哩_bilibili

也叫发布订阅模式

工作中使用到的单词（软件开发）_sun0322的博客-CSDN博客_https://10.59.142.4/integration

└22.Rxjs  // Angular

相关单词

reactive   英 [rɪˈæktɪv]    adj.反应的；回应的
observable 英 [əb'zə:vəbl]  adj. 可观察的;看得见的
subscribe  英 [səbˈskraɪb]  v. 订阅；捐款；认购；申请；签署
Observer  n. /əbˈzɜːvə/  旁观者；目击

Observer

==== 

31.设计原则

设计模式的六大原则_心猿意碼的博客-CSDN博客_设计模式六大原则

一、单一职责原则（Single Responsibility Principle）

在Angular中的体现：

获取数据的Service与数据处理的组件Comonent是分开来写的

创建组件
my-app> ng g c login
// component

创建服务
my-app> ng g s login
// service

二、开闭原则(Open-Closed Principle, OCP)

对扩展是开放的，对修改是封闭的

三、里氏代换原则(Liskov Substitution Principle, LSP)

xxx

四、依赖倒置原则（Dependence Inversion Principle，DIP）

xxx

五、接口隔离原则(Interface  Segregation Principle, ISP)

      与接口做交互

六、迪米特法则(Law of  Demeter, LoD)

xxxxxx

==================

32.全局组件

===

（Pinia在上面的27中有介绍）

// main.ts
import { createApp } from 'vue';
import { createPinia } from "pinia";

import App from "./App.vue";
import router from "./router";
import commonXXX from './XXX/XXX/XXXX/common-xxx.vue'

const app = createApp(App);

app.use(createPinia());
app.use(router);

app.commponent('common-xxx', commonXXX)

app.mount("#app");

===

33.开发者工具中的 ：启动器【Initiator】

启动器(Initiator)会展示出该请求的触发链路，即：该请求是由谁触发的，并且它的调用者是谁，以及更上层的调用者是谁，每一层的方法调用链路都会在这里展示出来，方便我们定位到请求发起的地方。

===

34.命名方式

PascalCase  帕斯卡拼写法( 也叫大骆驼拼写法)

   比如：Age
　　      LastName
对于组件名我们推荐使用 PascalCase，因为这提高了模板的可读性，能帮助我们区分 Vue 组件和原生 HTML 元素。
然而对于传递 props 来说，使用 camelCase 并没有太多优势，因此我们推荐更贴近 HTML 的书写风格。

camelCase （驼峰命名法）

   比如：lastName
　　      winterOfDiscontent

英 [ˈkæməl] n. 骆驼

kebabCase（短横拼音法）

   比如：base-checkbox
　　　   my-component

 kebab    英[kɪˈbæb]   n.烤肉串;

HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case
 

35.使用一个对象绑定多个 prop

====

BlogPost组件中

 ===

36.枚举    常数枚举

xxx

const enum Gender {
  BOY,
  GIRL
}

console.log(Gender.BOY) // 0
console.log(Gender.GIRL) // 1

xxx

37.枚举    可以指定默认值

xxx

enum Gender {
  BOY = 1001,
  GIRL = 1002
}

console.log(Gender.BOY) // 1001
console.log(Gender.GIRL) // 1002

xxx

38.定义对象

xxx

let obj = {
  name: '张三',
  age: 18
}

xxx

interface Props {
  name: string,
  age: number
}

let obj: Props = {
  name: '张三',
  age: 18
}

console.log(obj)

xxx

39.defineProps 函数使用时，指定默认值

defineProps是一个编译器宏

<script setup>
    import { useI18n } from 'vue-i18n';

    const props = defineProps({
        type: { type: String, required: true },
        title: { type: String, required: false},
        description: { type: String, required: false, default: '' },
        showReload: { type: Boolean, required: false, default: false },
        error: { type: String, required: true },
    });


    const { t } = useI18n();
    const titleWithDefault = props.title || `${t('oops', 1)} ${t('request_error', 1)}`;
</script>

xxx

xxx

40.编译器宏  （defineProps是一个编译器宏）

Vue3.2 新特性详解——＜script setup＞ 和 ＜style＞ v-bind_zhangpaopao0609的博客-CSDN博客_vue3.2 style

xxx

xxx

41.Watch

xxx

注意，watch中的第二个参数，函数：可以是同步的，也可以是异步的（async）！！！

xxx

42.async  （ES6中的知识点 ：async 函数 返回一个Promise对象）

xxx

JS ES6 Promise 之 Hello World_sun0322的博客-CSDN博客

xxx

xxx

43.VS Code入门教程介绍Command Palette

VS Code入门教程2020 #31 介绍Command Palette_哔哩哔哩_bilibili

44.slots

xxxx

xxx

45.Vue Router （这是另外一份文档）

xxx

xxx

介绍 | Vue Router (vuejs.org)

46.CreateRouter

传递的参数是一个对象：对象的  【属性列表】

history

 ===

routes

===

其他各种属性列表 （Router Options）。。。

API 参考 | Vue Router (vuejs.org)

===

routes 属性  相关的文档

从 Vue2 迁移 | Vue Router (vuejs.org)

xx

xxx

47.router-view  （<RouterView></RouterView>）：路由出口

即相当于一个占位符，路由到什么位置，会替换成相应的页面（路由匹配到的组件，将在这渲染）

也可以是 <RouterView></RouterView>

 <!-- 路由出口 -->
  <!-- 路由匹配到的组件将渲染在这里 -->

=== 

子路由

router-link 与router-view_ZH_TX的博客-CSDN博客_routerlink和routerview区别

===

===

48.编程式导航

xxx

编程式导航 | Vue Router (vuejs.org)

xxx

==

xxx

49.嵌套路由 （Nested Routes）

嵌套路由 | Vue Router (vuejs.org)

xx

50.导航守卫 （Navigation Guards）

xxx

导航守卫 | Vue Router (vuejs.org)

xxx

xxx

xxx

52.状态管理 （与 Pinia）

状态管理 | Vue.js (vuejs.org)

xx

xxx

xx

xxx

xx

简介 | Pinia (vuejs.org)

xx

xxxx

53.ES6 对象解构

Vue进阶（贰零捌）：ES6 对象解构_No Silver Bullet的博客-CSDN博客_vue对象解构

前端开发过程中，对于后台返回的对象，若包含属性过多，需要一一定义变量接收对象属性，该过程过于繁琐，增加了代码量。好在ES6提供了对象解构方法帮助我们解决这一问题。

xxx

xx 

54.Option Store  (Pinia)

xxx

xxx

55.Store不能解构 （setup中的Props也不能解构）

xxx

xxx

56.Pinia核心概念

xxx

​​​​​​xxx

export const useCounterStore = defineStore('counter', {
  state: () => ({ count: 0 }),
  getters: {
    double: (state) => state.count * 2,
  },
  actions: {
    increment() {
      this.count++
    },
  },
})

​​​​​xx​

57.Pinia getters 与 actions 区别

【vue3生态Pinia之State、Getters、Actions详解】_oumae-kumiko的博客-CSDN博客_vue3 store actions

58.依赖注入

xxx

【全网首发:已完结】Vue3.0手册阅读『依赖注入』篇【开发面试必备】_哔哩哔哩_bilibili

xxx

为什么需要依赖注入

xxx

xxxx

如何依赖注入

xxx

59.依赖注入使用

使用方法1

依赖

注入

使用方法2

依赖 ×

依赖 〇

===

60.依赖注入  之 Tsyringe

xxx

xx

xx

61.Axios

什么是Axios ?

 Axios 是一个基于 promise 的 HTTP 库，简单的讲就是可以发送get、post等请求，可以用在浏览器和 node.js 中.

什么是Axios ?_穆倩倩的博客-CSDN博客_axios

axios在vue中的使用

axios在vue中的使用_普通网友的博客-CSDN博客_axios vue

62.XXX

xxx

63.XXX

xxx

64.XXX

xxx

65.XXX

xxx

66.XXX

xxx

67.XXX

xxx

===