wdcp 防盗链 网站不能打开,苏州建站公司精选苏州聚尚网络,注册一个公司全部流程,项目申报day-119-one-hundred-and-nineteen-20230724-vue3知乎日报项目实战
vue3项目实战-知乎日报
主要问题 pinia 和 vuex4 的区别 vue/cli和vite的区别 vue/cli脚手架的底层核心是webpack。vite脚手架#xff1a; 开发环境#xff1a;基于ESModule模块规范处理的生产环境#…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热启动冷启动后启动的服务会存储到内存中下一次代码有更新需要实时预览的时候直接从内存中调起服务而且会对之前编译的内容进行缓存当代码有更新只对更新的部分进行重新编译以此提高编译和预览的速度 -- 热更新 解决缓存不足的问题 修改配置懒加载。不行上微前端上不同框架不同项目。 开发环境下要比 webpack 方式快很多很多-大概 10 到 100 倍主要因为即便开发环境下基于 webpack 处理也需要对代码按照规则进行编译把编译后的内容进行预览项目如果比较大冷启动需要的时候也会很久扩展如何加快 webpack 编译和打包的速度。但是 vite 就不会因为开发环境下它根本不会对代码进行编译而是基于原生的 ESModule 规范在项目预览的时候实现模块之间的依赖导入对于一些少量的插件也需要编译例如 less 及 vue 文件。 但是 vite 在生产环境下也需要对代码进行打包编译只不过不是用的 webpack而是使用了更轻量级的 rollup。 整体编译的速度会比 webpack 快一些。自己私下搜索几条 rollup 打包快的原因。但是 rollup 的生态是不如 webpack 完善的对于一些特殊的打包诉求可能 rollup 处理不了-常规的基本都支持。
起后台 node 原生 node server.jspm2 // pm2 start 文件路径/文件名称.文件后缀 --name 服务名
pm2 start ./server.js --name theServerName从零开始构建
从零开始基于 Vue3 Vite Pinia TS 构建一个项目 基于脚手架创建一个工程化的项目 yarn create vite按照步骤选择需要安装的模块以此来创建一个初始的项目 进入项目再跑一遍环境 yarn;安装项目需要的模块-把能想到的先安装了 生产依赖 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 原生按需导入插件 脚手架的配置vite.config.js 需要处理兼容不是IE兼容可以使用 vitejs/plugin-legacy 控制需要兼容的浏览器 browerslist 列表以及需要 polyfills 基础配置 baseplugins vue/vueJsxviteImplegacy… resolve/aliasvscode 同步配置符的识别… 服务配置server 和webpack-dev-server的配置几乎一致 打包配置 build assetsInlineLimitminifyterserOptions… css样式的处理 css… .eslintrc.cjs与.prettierrc.json 可以按照自己的风格去修改配置 响应式布局开发 meta nameviewport ...导入 lib-flexible 根据当前设备的宽度除以10设置html根元素字体大小「REM和PX的换算比例」设置了最大宽度540 设置稿按照 375 处理「vant的设计稿就是这个尺寸」 配置 pxtorem 插件把我们在样式中写的px单位自动转换为rem后期编写样式都按照375设计稿测量把测量的值直接以px去编写即可 环境变量的处理 在vue/cli脚手架中 我们基于 process.env.xxx 获取环境变量 process.env.NODE_ENVdevelopment/production… 基于 cross-env 插件「或者直接改配置项」来设置环境变量 在 vite 脚手架中 环境变量的获取,都是基于ES6中的import.meta.xxx处理的 BASE_URLMODEDEV/PROD/SSR… 设置环境变量: 根目录中设置/.env /.env.development /.env.production 命名规则VITE_xxx 还可以配置 husky-用于git提交时的钩子回调。 … 搭建项目文件的骨架 准备需要的静态资源配置接口管理 vite.config.js 配置跨域api/http.js 对axios的统一封装api/index.js components放公共组件、views放普通组件配置 pinia 的骨架配置路由的骨架 … 开始逐组件进行开发一定要注意抽离/封装 自测内测 部署 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),},};
});搭建项目文件的骨架
准备需要的静态资源 图片等样式初始化文件工具函数less 全局变量 配置接口管理
逐组件进行开发
开始逐组件进行开发一定要注意抽离与封装
进阶参考
taro - React 技术栈pm2 使用教程
