Vue之Hello World！
目录1.简介1.1.Vue介绍1.2.Vue相关1.3.帮助文档2.安装2.1.管理员启动cmd，执行npm install vue命令2.2.继续安装，执行cnpm install vue@2命令2.3.查看安装信息，执行 npm info vue 命令2.4.安装之后，vue.js的位置2.5. （据说）不安装时，可以在线引用，不过不好用3.代码4.运行效果5.更多代码5.1function
目录
2.1.管理员启动cmd，执行npm install vue命令
2.2.继续安装，执行npm install vue@2命令
5.条件渲染指令：v-show、v-if、v-else-if、v-else
6.2.CORS "跨域资源共享"（Cross-origin resource sharing）
6.3.CSRF "跨站请求伪造" Cross-site request forgery
10.vue3中定义变量,ref、reactive、toRefs特性详解
19.代码错误【Cannot find module 'express'。。。】
28.【建立服务器程序】 nodemone (与 Express 相关)
30.设计模式：观察者模式 (B站)（Rxjs 采用的就是观察者模式）
一、单一职责原则（Single Responsibility Principle）
二、开闭原则(Open-Closed Principle, OCP)
三、里氏代换原则(Liskov Substitution Principle, LSP)
四、依赖倒置原则（Dependence Inversion Principle，DIP）
五、接口隔离原则(Interface Segregation Principle, ISP)
42.async （ES6中的知识点 ：async 函数 返回一个Promise对象）
43.VS Code入门教程介绍Command Palette
55.Store不能解构 （setup中的Props也不能解构）
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 安装最新版的vuenpm 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.帮助文档
===
====
====
1.5.VUE GitHub
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-deps16.npm run 指定端口启动
npm run dev -- --port 300117.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和defineEmitsAPI，它们将自动地在<script setup>中可用：
<script setup>
const props = defineProps({
foo: String
})
const emit = defineEmits(['change', 'delete'])
// setup 代码
</script>
为了在声明
props和emits选项时获得完整的类型推导支持，我们可以使用defineProps和defineEmitsAPI，它们将自动地在<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 对比 )
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())
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 server29.设计模式：装饰器模式 (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
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）
xx
50.导航守卫 （Navigation Guards）
xxx
xxx
xxx
xxx
52.状态管理 （与 Pinia）
xx
xxx
xx
xxx
xx
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
===
前往低代码交流专区
更多推荐
2
0- 0
已为社区贡献1条内容
所有评论(0)