> For the complete documentation index, see [llms.txt](https://cifar.gitbook.io/note/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cifar.gitbook.io/note/kai-fa/qian-duan.md).

# 前端

<details>

<summary>前端知识 汇总</summary>

* [Ubuntu 安装nodejs](https://www.cnblogs.com/sha-ka/p/13250051.html)
* [版本对应关系](https://nodejs.org/zh-cn/download/releases/)

[2021 Web开发完全指南](https://www.bilibili.com/video/BV11p4y1H7eu)&#x20;

1\. Web开发路线图：<https://github.com/ccloli/developer-roadmap-zh-CN>&#x20;

2\. 现代Web开发魔法全书：<https://github.com/dexteryy/spellbook-of-modern-webdev>&#x20;

3\. 成为Web全栈工程师：<https://github.com/bmorelli25/Become-A-Full-Stack-Web-Developer>&#x20;

4\. Awesome列表系列：<https://github.com/sindresorhus/awesome>

Node.js® 是一个基于 [Chrome V8 引擎](https://v8.dev/) 的 JavaScript 运行环境.

&#x20;     [安装最新版nodejs](https://www.cnblogs.com/feiquan/p/11223487.html)

* VSCode中 ! 在html 文件中快速创建一个html文档
* [CSS position定位](https://www.w3school.com.cn/css/css_positioning.asp)
* [H5 Video](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video)
* DOM树操作：DOM manipulation
* [ES6 语法](https://www.runoob.com/w3cnote/es6-tutorial.html)
* [TypeScript 教程](https://www.runoob.com/typescript/ts-tutorial.html)
* XHR/AJAX :

  ```javascript
  useEffect( () => {
    fetch("api/transactions")
      .then( (res) => res.json() )
      .then( (data) => setTransactions(data) )
  }
  )
  ```

[FlexBox / 弹性盒布局](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)

[REST API](https://jsonplaceholder.typicode.com)

* HTTP [请求类型](https://zxxgj.net/657.html)                   操作
* POST                                  添加数据
* GET                                    查询数据
* PUT                                    更新数据
* DELETE                              删除数据

[GraphQL 官网](https://graphql.cn/) [GraphQL 演示](https://countries.trevorblades.com)

数据库： PostgreSQL（关系型数据库） MongoDB

DevOps: 开发 + 运维 Development + Operations

扩展: [canvas](https://codepen.io/towc/pen/KdxmJw) [WebGL](https://threejs.org/examples) [游戏](https://codepen.io/Yakudoo/pen/YGxYZj)

网站： [DNN](https://playground.tensorflow.org) [WebSocket / WebRTC](http://slither.io) [Electron:基于Node.js的跨平台桌面应用框架](http://www.electronjs.org/)

[跨域segment博文](https://segmentfault.com/a/1190000015597029) [跨域官方解释](https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS) [跨域示例](https://developer.mozilla.org/zh-CN/docs/Glossary/Origin)

</details>

<details>

<summary>前端知识工具</summary>

HTTP[请求头大全](https://zxxgj.net/654.html)

[常见端口大全](https://zxxgj.net/650.html)

</details>

## vue

<details>

<summary>路由</summary>

问：vue在开发的时候，在浏览器的url上有个#，这个符号是什么意思

答：这个<mark style="color:red;">符号是路由模式的一种，称为hash模式。它的作用是在单页面应用中，通过改变#后面的内容来实现页面的切换，而不会引起浏览器的刷新。</mark>这样做可以提高用户体验，同时也方便了页面的开发和管理。

井号(#)是Vue路由的一种模式，称为hash模式。<mark style="color:red;">Vue默认使用hash模式进行路由，所以在开发Vue项目时，URL里会带有井号。但是，在生产环境中，为了更好的SEO和用户体验，我们通常会使用history模式</mark>。这种模式下，URL没有井号，而是直接显示路径。因此，井号并不是用来提醒开发者是开发模式还是正式发布模式的，而是Vue路由默认的一种模式。如果你想要使用history模式，可以在Vue路由配置中进行设置。

</details>

<details>

<summary>根入口 App.vue</summary>

````javascript
App.vue
```vue
<template>
  <div id="app">
    <router-view />
  </div>
</template>
<script>
export default {
  name: 'App'
}
```
````

<mark style="background-color:green;">== 问：vue 项目src文件夹下App.vue 是单页应用的根入口吗，类似html的index.html吗</mark>

答：是的，App.vue是Vue单页应用的根入口文件，类似于HTML文件的index.html。<mark style="color:red;">在Vue单页应用中，index.html文件只包含一个div元素，其余的页面内容都是通过Vue组件渲染得到的。</mark>因此，在Vue单页应用中，App.vue文件承担了类似于index.html的作用，是整个应用的根组件，包含了所有的路由和子组件。

<mark style="color:red;">在App.vue文件中，可以定义应用的整体布局、样式和路由等，同时也可以在其中引入其他组件</mark>。因此，App.vue是Vue单页应用中非常重要的一个文件，它的修改会直接影响整个应用的表现和功能。

<mark style="background-color:green;">== 问：这个id=app 是必须的吗，有什么作用</mark>

答：id="app" 不是必须的，但是它是Vue单页应用的根节点，是整个应用的入口，因此建议保留。在Vue单页应用中，<mark style="color:red;">由于index.html文件只包含一个空的div元素</mark>，所有的页面内容都是通过Vue组件动态渲染得到的。而在应用启动时，<mark style="color:red;">Vue会将根组件挂载到id为"app"的DOM节点上，从而实现整个应用的渲染。</mark>

此外，id="app" 还可以用于样式的选择器，方便开发者编写样式。在上述代码中，可以看到样式标签中使用了scss语言，这是一种CSS的预处理器，可以增强CSS的功能和灵活性。如果需要使用scss语言，可以在项目中安装node-sass和sass-loader两个依赖，然后在webpack配置文件中进行相应的配置。

<mark style="background-color:green;">== 问： \<router-view / >为什么就可以读到路由，这是语法规定的吗</mark>

答：`<router-view>` 是Vue-Router提供的一个组件，它可以根据当前的路由状态动态地渲染出对应的组件。在Vue单页应用中，所有的页面内容都是通过组件进行渲染的，而`<router-view>`<mark style="color:red;">组件就是负责将路由对应的组件渲染出来的</mark>。

在Vue-Router中，使用路由配置来管理路由，即通过定义路由规则和路由对应的组件来实现页面间的跳转。当用户访问某个路由时，<mark style="color:red;">Vue-Router会根据路由规则找到对应的组件，然后通过</mark><mark style="color:red;">`<router-view>`</mark><mark style="color:red;">组件将该组件渲染出来，从而实现页面的切换</mark>。

因此，`<router-view>`组件可以理解为Vue-Router提供的<mark style="color:red;">一个占位符</mark>，用于动态地渲染路由对应的组件。这是Vue-Router的语法规定，也是Vue单页应用渲染路由的核心机制之一。

</details>

## 页面服务

#### 页面统计

[Umami](https://umami.is/)是一个简单的分析工具，可以帮助你了解你的网站访客，同时也是最著名的 [Google Analytics](https://analytics.google.com/)开源替代品。 （[使用参考](https://github.com/ClarenceDan/openai-billing)  ：网页 footer 添加了umami 访问量统计代码）