vue3 项目实战

• 在 centOS 上安装 vscode + eslint + prettier
• 这确保了 Vite 开发服务器即使在使用 TypeScript 时也能保持快速运行。在开发过程中，强烈推荐使用Visual Studio Code(VSCode)。

• 在 centOS 上安装 npm、nrm、yarn、pnpm
• NPM 的全称是Node Package Manager，是一个NodeJS包管理和分发工具

• 在 centOS 上安装 express、webpack、rollup
• Webpack 是一个前端资源的打包工具，它可以将js、image、css等资源当成一个模块进行打包。

• vite + vue3 + ts + vue-router + pinia + axios
• npm init vue@latest，安装稳定版本 vue3。

• vite + vue3 + ts 安装 scss + qs + nprogress
• qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。nprogress 是页面跳转是出现在浏览器顶部的进度条。

• vite + vue3 + ts 安装 element-plus
• Element Plus，一套为开发者、设计师和产品经理准备的基于 Vue 3 的桌面端组件库。是element-ui的升级版。Element Plus 可以在支持ES2018和ResizeObserver的浏览器上运行。npm install element-plus

• vite + vue3 + ts 安装 tinymce 富文本编辑器
• TinyMCE 是一个轻量级的基于浏览器的所见即所得编辑器，支持目前流行的各种浏览器，由JavaScript写成。TinyMCE 针对不同的框架有三个版本：tinymce-vue、tinymce-react、tinymce-angular。

• vite + vue3 + ts 安装 @vitejs/plugin-legacy 兼容旧版浏览器
• 默认的构建目标浏览器是能 在 script 标签上支持原生 ESM 和 原生 ESM 动态导入。传统浏览器可以通过官方插件 @vitejs/plugin-legacy 支持。

• vite + vue3 + ts 配置 babel 浏览器兼容性插件
• Babel 是一个工具链，主要用于将采用 ECMAScript 2015+ 语法编写的代码转换为向后兼容的 JavaScript 语法，以便能够运行在当前和旧版本的浏览器或其他环境中。

• vite + vue3 + ts 开发配置
• 配置开发工具，配置 env 文件。.prettierrc.json文件。在项目根目录中，修改.eslintrc.cjs配置。

• vite + vue3 + ts + SSR 使用 Vite 内置 SSR 功能
• Express 基于 Node.js 平台，快速、简介的 Web 应用框架，为 Web 和移动应用程序提供一组强大的功能。

• vite + vue3 + ts + SSR 使用 vite-ssr 插件
• vite-ssr插件。基于Vite 内置 SSR 功能，简化了服的务器端渲染。只适用于 vue3。vite-ssr，是由@frandiox 来创建的，作为 Node.js 中 Vite 的一个简单而又强大的 SSR 解决方案。

• vite + vue3 + ts + SSR 使用 vite-plugin-ssr 框架
• vite-plugin-ssr 是一个独立的框架，集成 vue3.2+、express4+、ts-node10+等。

• vite + vue3 + ts + SSR 使用 ssr 框架
• ssr 框架是为前端框架在服务端渲染的场景下所打造的开箱即用的服务端渲染框架。面向 Serverless，同时支持 React，Vue2，Vue3，同时支持 Webpack/Vite。

• vite + vue3 + ts + SSR 使用 Nuxt 框架
• Nuxt.js，是一个基于 Vue.js 的通用应用框架。支持单页应用程序（SPA）、服务端渲染（SSR）、静态化（预渲染）。

• vite + vue3 + ts + SSR 使用 Quasar 框架
• Quasar，是一个基于 Vue 的前端 GUI 框架，它可以让你用同一套代码库构建不同目标的应用，如 SPA、SSR、PWA、移动端应用、桌面端应用以及浏览器插件。除此之外，它还提供了一整套 Material Design 风格的组件库。

• vite + vue3 + ts + SSG 使用 VuePress
• VuePress 是一个以 Markdown 为中心的静态网站生成器。你可以使用 Markdown 来书写内容（如文档、博客等），然后 VuePress 会帮助你生成一个静态网站来展示它们。

• vite + vue3 + ts + SSG 使用 VitePress
• VitePress，静态站点生成器，由 Vue 团队在维护。VitePress 支持两种形式的 SSG：单页 SSG 和多页 SSG.

• Markdown 语法教程
• Markdown 是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档。Markdown 编写的文档可以导出 HTML 、Word、图像、PDF、Epub 等多种格式的文档。

• oauth2.0认证（token认证）
• OAuth（Open Authorization）是一个关于授权（authorization）的开放网络标准，允许用户授权第三方应用访问他们存储在另外的服务提供者上的信息，而不需要将用户名和密码提供给第三方移动应用或分享他们数据的所有内容。OAuth在全世界得到广泛应用，目前的版本是2.0版。

• 跨域资源共享 CORS
• 前后端分离，难免会碰到跨域问题。跨域资源共享(CORS)是一种浏览器机制，可以对位于给定域之外的资源进行受控访问。它扩展并增加了同源策略(SOP)的灵活性。但是，如果网站的 CORS 策略配置和实施不当，它也会为基于跨域的攻击提供可能性。同源策略浏览器同源策略（Same origin policy）

• laravel9 安装配置
• 使用 composer 安装 laravel，然后修改 package.json 配置，添加上 vue3的新版本，然后运行 npm 命令完成安装配置。

• laravel9 + vue3 后端配置跨域资源共享（CORS）
• 创建允许跨域中间件 AccessControlAllowOrigin，设置请求头的数据返回方式：Access-Control-Allow-Origin

• laravel9 + vue3 后端使用 passport 来生成验证 token
• 使用 larave l的第三方插件 Passport 来生成验证 token

• laravel9 + vue3 前端使用 axios 获取携带 token 访问令牌
• vue3 项目结合 vuex、localstorage 实现本地储存 token 验证。封装 axios 使用每次获取数据携带 token

• axios 发送数据请求的方式
• 数据传送：类型与编码Content-TypeContent-Type编码类型，是指http、https发送信息至服务器时的内容编码类型，用于表明发送数据流的类型，服务器根据编码类型使用特定的解析方式，获取数据流中的数据。