20230724----重返学习-vue3知乎日报项目实战

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 构建一个项目

1. 基于脚手架创建一个工程化的项目

   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提交时的钩子回调。

   • …

2. 搭建项目文件的骨架

   1. 准备需要的静态资源
   2. 配置接口管理
      • vite.config.js 配置跨域
      • api/http.js 对axios的统一封装
      • api/index.js
   3. components放公共组件、views放普通组件
   4. 配置 pinia 的骨架
   5. 配置路由的骨架
      …

3. 开始逐组件进行开发，一定要注意抽离/封装

4. 自测&内测

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),},};
});

搭建项目文件的骨架

1. 准备需要的静态资源
   • 图片等
   • 样式初始化文件
   • 工具函数
   • less 全局变量
2. 配置接口管理

逐组件进行开发

• 开始逐组件进行开发，一定要注意抽离与封装

进阶参考

1. taro - React 技术栈
2. pm2 使用教程