day-119-one-hundred-and-nineteen-20230724-vue3知乎日报项目实战

vue3项目实战-知乎日报

主要问题

pinia 和 vuex4 的区别
@vue/cli和vite的区别
- @vue/cli脚手架的底层核心是webpack。
- vite脚手架：
  - 开发环境：基于ESModule模块规范处理的
  - 生产环境：基于轻量级的 rollup 打包工具处理
- 目前我做 Vue3/React的项目，都是基于 vite脚手架来处理的，主要原因：vite 处理的速度要比 webpack 快很多，而且 webpack支持的一些生态插件，目前 vite 大部分也都支持了（或者提供了相应的解决方案）！但是因为 vite 处理兼容比较麻烦，所以我只用于Vue3这样的项目，不再考虑IE和低版本浏览器的兼容。
- 开发环境下vite要比webpack方式快很多很多（大概10~100倍），主要因为：即便开发环境下，基于webpck处理，也需要对代码按照规则进行编译，把编译后的内容进行预览，项目如果比较大，冷启动需要的时间也会很久（扩展：如何加快webpack编译和打包的速度）；但是vite就不会，因为开发环境下，它根本不会对代码进行编译，基于原生的ESModule规范，在项目预览的时候，实现模块之间的依赖导入（但是对于一些少量的插件，也需要编译，例如：less）
- 但是vite在生产环境下，也需要对代码进行打包编译，只不过不是用webpack，而是使用了更轻量级的rollup
  - 整体编译的速度会比webpack快一些「自己私下搜索几条rollup打包快的原因」
  - 但是rollup的生态是不如webpack完善的，对于一些特殊的打包诉求，可能rollup处理不了「常规的基本都支持」
Vue3 和 Vue2 的区别
- 两三年前，尤雨溪在B站开Vue3发布会的时候，我全程跟着听过，再结合这两年的运用，大概总结了以下几点区别：
- 从底层机制上来讲：
  - Vue3 重写了DOM-diff算法，只比较动态节点，跳过静态节点，大大提高了视图编译的速度。相比较于Vue2，性能提高了 1.3~2倍。–> 扩展：diff算法。
  - 利用了webpack中的tree shaking 机制，只打包用到的模块-按需打包，降低了打包后文件体积。
  - 响应式操作原理，放弃了Vue2中的Object.defineProperty()，采用ES6新增的Proxy进行数据劫持，所以不兼容IE浏览器。–> 扩展：vue2响应式原理和 vue3响应式原理。
    - 使用Proxy的好处：
      - 更加方便：不用区分数组和对象，都基于Proxy做处理即可。
      - 性能更高：无需迭代对象每一项分别做劫持，直接对整个对象做劫持即可。
      - 功能更强：除了传统的get/set劫持，还劫持deleteProperty/defineProperty/has/ownKeys等更多的劫持方式！
  - Vue3还具备了一些Vue2没有的新特性：
    - 支持<Teleport>传送门组件
    - 支持<Suspense>异步组件。–> 使用方法，与骨架屏及懒加载的联系。
    - 更好地支持TypeScript
    - 基于Custom Renderer API（自定义渲染 API），可以更好地进行图形绘制，可兼容小程序之类的。
- 从语法上来讲：
  - Vue3 几乎完全兼容Vue2的语法，只不过不再具备Vue这个类（每个组件也不再是Vue的子类，组件中的this也不再是Vue的实例），把之前Vue.prototype上的属性方法，作为this私有的属性方法！
  - 只不过Vue3也提供了几乎完全不同于Vue2的语法（推荐使用新语法）
    - 基于Compsition API（聚合式API）替代Options API（配置项式API），所有代码都写在setup函数（或者<script setup>脚本）中！
    - 全面采用函数式编程，需要实现什么样的效果，都是从vue中解构出一个个的函数，例如：ref/reactive/computed/watch/watchEffect/nextTick/defineProps/defineEmits…
    - 重新定义钩子函数：onBeforeMount/onMounted/onBeforeUpdate/onUpdated/onBeforeUnmount/onUnmounted…
    - 自定义指令内部的钩子函数也改为和周期函数相匹配的名字。
    - 基于app.xxx做全局的配置。
    - 而且jsx语法使用上也有一些区别
    - …
  - Vue3的<template>视图支持多个根节点，因为其内部采用了React中的Fragment原理。
- 相对应的其生态中：例如：vuex4、vue-router4、pinia、UI组件库，也全部都采用函数式编程了！
- 总之，我认为Vue3这套新的机制和语法，都非常的不错，更贴进于前端未来发展的趋势；所以，在不考虑IE兼容的情况下，我基本上都是基于Vue3去做项目的开发！

冷启动与热启动

冷启动：第一次启动-之前内存中没有相应的服务，我们是重新启动服务的！

# @vue/cli
$ yarn serve #第一次启动时。
$ yarn build# vite
$ yarn dev #第一次启动时。
$ yarn build

热启动：冷启动后，启动的服务会存储到内存中，下一次代码有更新需要实时预览的时候，直接从内存中调起服务；而且会对之前编译的内容进行缓存，当代码有更新，只对更新的部分进行重新编译，以此提高编译和预览的速度 --> 热更新；
- 解决缓存不足的问题：
  1. 修改配置
  2. 懒加载。
  3. 不行上微前端，上不同框架不同项目。
开发环境下要比 webpack 方式快很多很多-大概 10 到 100 倍，主要因为：即便开发环境下，基于 webpack 处理，也需要对代码按照规则进行编译，把编译后的内容进行预览，项目如果比较大，冷启动需要的时候也会很久（扩展：如何加快 webpack 编译和打包的速度）。但是 vite 就不会，因为开发环境下，它根本不会对代码进行编译，而是基于原生的 ESModule 规范，在项目预览的时候，实现模块之间的依赖导入（对于一些少量的插件，也需要编译，例如 less 及 vue 文件）。
但是 vite 在生产环境下，也需要对代码进行打包编译，只不过不是用的 webpack，而是使用了更轻量级的 rollup。
- 整体编译的速度会比 webpack 快一些。自己私下搜索几条 rollup 打包快的原因。
- 但是 rollup 的生态是不如 webpack 完善的，对于一些特殊的打包诉求，可能 rollup 处理不了-常规的基本都支持。

起后台

node 原生
```
node server.js
```

pm2

// pm2 start 文件路径/文件名称.文件后缀 --name 服务名
pm2 start ./server.js --name theServerName

从零开始构建

从零开始，基于 Vue3 + Vite + Pinia + TS 构建一个项目

基于脚手架创建一个工程化的项目
```
yarn create vite
```
- 按照步骤选择需要安装的模块，以此来创建一个初始的项目；
- 进入项目再跑一遍环境
```
yarn;
```
1. 安装项目需要的模块-把能想到的先安装了
  - 生产依赖
    - axios 用于 axaj 通信
    - blueimp-md5 用于 md5 进行摘要
    - dayjs 用于日期格式化的
    - lib-flexible 移动端适配
    - lodash 工具函数库
    - pinia 用于 vue 全局状态
    - pinia-plugin-persistedstate 用于 pinia 持久化的
    - vant 移动端的 UI 框架
    - vue 用于 vue 核心
    - vue-router 用于 vue 路由
  - 开发依赖
    - less 用于 less 语法预编译
    - postcss-pxtorem 用于
    - prettier 用于代码格式化的
    - terser 用于代码压缩的
    - unplugin-vue-components 用于 vant 这个 UI 框架的按需导入
    - vite 用于项目工程化
    - vite-plugin-imp 用于 vite 原生按需导入插件
2. 脚手架的配置vite.config.js
  - 需要处理兼容（不是IE兼容），可以使用 @vitejs/plugin-legacy 控制需要兼容的浏览器 browerslist 列表，以及需要 polyfills ！
  - 基础配置
    - base
    - plugins
      - vue/vueJsx
      - viteImp
      - legacy
      - …
    - resolve/alias
    - vscode 同步配置@符的识别
    - …
  - 服务配置server
    - 和webpack-dev-server的配置几乎一致
  - 打包配置 build
    - assetsInlineLimit
    - minify
    - terserOptions
    - …
  - css样式的处理 css
  - …
3. .eslintrc.cjs与.prettierrc.json 可以按照自己的风格去修改配置
4. 响应式布局开发
  - <meta name="viewport" ...>
  - 导入 lib-flexible
    - 根据当前设备的宽度，除以10，设置html（根元素）字体大小「REM和PX的换算比例」
    - 设置了最大宽度540
  - 设置稿按照 375 处理「vant的设计稿就是这个尺寸」
    - 配置 pxtorem 插件：把我们在样式中写的px单位，自动转换为rem
    - 后期编写样式，都按照375设计稿测量，把测量的值，直接以px去编写即可
5. 环境变量的处理
  - 在@vue/cli脚手架中
    - 我们基于 process.env.xxx 获取环境变量
      - process.env.NODE_ENV：development/production
      - …
    - 基于 cross-env 插件「或者直接改配置项」，来设置环境变量
  - 在 vite 脚手架中
    - 环境变量的获取,都是基于ES6中的import.meta.xxx处理的
      - BASE_URL
      - MODE
      - DEV/PROD/SSR
      - …
    - 设置环境变量: 根目录中设置/.env /.env.development /.env.production
      - 命名规则VITE_xxx
6. 还可以配置 husky-用于git提交时的钩子回调。
- …
搭建项目文件的骨架
1. 准备需要的静态资源
2. 配置接口管理
  - vite.config.js 配置跨域
  - api/http.js 对axios的统一封装
  - api/index.js
3. components放公共组件、views放普通组件
4. 配置 pinia 的骨架
5. 配置路由的骨架
  …
开始逐组件进行开发，一定要注意抽离/封装
自测&内测
部署
```
yarn build
```
- 把打包的内容部署到服务器，并且不要忘记服务器端一般也要设置跨域代理「nginx反向」

初始项目目录

.eslintrc.cjs 语法检测的配置文件。
.gitignore 关于 git 忽略目录的配置文件。
.prettierrc.json 格式化的配置文件。
package.json 包管理文件。
vite.config.js 主要的 vite 配置，算是 vue 项目的总体配置。

使用.env 文件

import { defineConfig, loadEnv } from "vite";export default defineConfig(({ command, mode }) => {// 根据当前工作目录中的 `mode` 加载 .env 文件// 设置第三个参数为 '' 来加载所有环境变量，而不管是否有 `VITE_` 前缀。const env = loadEnv(mode, process.cwd(), "");return {// vite 配置define: {__APP_ENV__: JSON.stringify(env.APP_ENV),},};
});