如何选网站建设公司,小程序推广是干什么的,外贸网站怎么做外链,企业网页制作心得只是单纯记录一下最近维护了几个项目之后的感触#xff0c;也只是在自己现在水平上面的一些感觉。发发牢骚#xff0c;水水文章
是否过度封装
可能水平不够吧#xff0c;在 axios 封装的时候#xff0c;只是把响应和拦截还有一些全局的配置封装了一下#xff0c;并没有加…只是单纯记录一下最近维护了几个项目之后的感触也只是在自己现在水平上面的一些感觉。发发牢骚水水文章
是否过度封装
可能水平不够吧在 axios 封装的时候只是把响应和拦截还有一些全局的配置封装了一下并没有加很多也没有单独封装 get、post 这些方法因为我觉得使用起来已经非常简单了axios.get(url,param)、axios.get(url,param)我觉得已经非常简便了维护的旧项目封装了三层到四层吧用起来在我看来是一样的。
基础配置和规范
很多时候我们只要加一个 margin-top 或者 font-size 之类的样式又不想单独写一个 class写 style 代码又显得不规范。现在有挺多 css 框架可以实现比如 tailwind css也可以自己写一些常用的肯定是写的不完整完全可以后期有用到再补充。不止样式其他也是一样常用函数之类的。这不就是组件化、插件化吗。
项目运行起来最开始开发工具肯定是没有报错的后面不知道经过多久报错了但是还能运行慢慢的也就没人管了就放着吧这是我第一次见。真不应该既然使用了 ts使用了 eslint警告和报错能解决就解决了肯定是不能出现在都是报错的编辑器进行开发。
代码规范和习惯也挺重要的console 用多了也不删除虽然打包的时候会有插件把 console 去掉开发的时候要看一些东西控制台出现一大堆打印代码出现各种打印的地方。
注释也是有时候一些东西临时不用是可以注释但是简单的东西去掉就去掉了放着约放越多复制了别的页面的没用的就都删了见过 500 行代码注释 100 行
如果可以有个项目文档挺有必要的介绍一下基础的东西免得新接手的不知道有这个实现的功能又自己写一套当然多问也是可以的。
好吧既然无法改变那就让自己适应。
reactive 声明无法重新赋值整个对象
很多情况下我们会直接重新赋值一个对象尤其是字段多的时候vue3 用 reactive 声明的如果重新赋值整个对象是没法做到响应式的或者只能一个一个字段去赋值。vue3 是没有 this.forceUpdate()提供的forceUpdate()提供的forceUpdate()提供的forceUpdate()强制该组件重新渲染没用过并不清楚具体行不行。所以有几个取巧的方法在规范上可能会被说
多一层字段这样去重新赋值也会是响应式
const obj reactive({data: {}});
obj.data {}Object.assign
const obj reactive({})
obj Object.assign(obj, {})用 ref ref 一般用于声明基础数据类型和数组声明对象内部其实也是被 reactive 处理。
const obj ref({})
obj.value {}上面三种取巧的方法我比较建议使用 Object.assign重新赋值整个对象场景不会非常多大部分是请求数据回来会使用另外两种增加代码量而且规范上面比较不符合。
组件使用 v-model 传参
这个跟 vue2 里面的.sync 一样常见的应该是封装弹窗组件
//父组件
Children v-model:modelValueshowModelValue/Chidren//子组件
el-dialog :model-valueprops.modelValue titletitle width45% :before-closehandleClose/el-dialoginterface PropsType {modelValue?: boolean;
}const props withDefaults(definePropsPropsType(), {modelValue: false,
});const emits defineEmits([update:modelValue]);const handleClose () {emits(update:modelValue, false);
};使用 setup 单文件
这个其实也不是什么小技巧主要是维护了个项目结果没用 setup还是希望可以用起来毕竟官方也是挺推荐的。
几个插件
plugin-vue-setup-extend增强 setup可以增加自定义 nameunplugin-auto-importapi 自动导入
(官网有提到在 3.2.34 或以上的版本中使用 《script setup 的单文件组件会自动根据文件名生成对应的name 选项即使是在配合 使用时也无需再手动声明)
$ref
ref 声明都要用.value然后现在提出了响应性语法糖不需要.value还在实验阶段官网给出了警告 响应性语法糖目前是一个实验性功能默认是禁用的需要显式选择使用。具体设计在最终定稿前仍可能发生变化你可以查看 GitHub 上的提案与讨论来关注和跟进最新进展。
let count $ref(0)console.log(count)function increment() {count
}环境配置
正常情况下请求的 baseURL 配置/访问的域名是什么就用什么其他服务器 nginx 自己配置。架不住有特殊情况所以根目录添加.env.dev、.env.prod 文件里面声明的变量都要 VITE_开头在其他地方 import.meta.env.去获取
VITE_MODEproduction
VITE_BASE_URL/https://www.test.com/v2const service: AxiosInstance axios.create({baseURL: import.meta.env.VITE_BASE_URL,
});package.json 里面配置 script 的时候加上–mode prod。这边发现配置 prebuild执行 build 的时候会自动执行 prebuild 然后再执行 build
:deep
改变使用 UI 组件的样式用:deep可能会出现警告 ::v-deep usage as a combinator has been deprecated. Use :deep() instead.
改成 :deep(.el-input-group__prepend) { background: #e5e5ea; }
不进行展示的不用 ref reactive 声明
既然用了 composition API如果数据不是要在页面进行展示就可以不用 ref 和 reactive 进行声明虽然性能方面没什么非常大的影响开发可读性和维护起来会更好一些。
如何更好的使用 typescript
现阶段vue3 肯定是使用 typescript 一起开发只是到目前为止还没有看过哪个项目很好的使用 typescript包括自己很多情况下用上了 any开发过程也都是先写开发代码再写一些声明的类型。
希望有大佬可以推荐几个项目长长眼或者一些好的文章要如何从先写 JavaScript 再写 typescript转变到先写 typescript 再写 JavaScript。
欢迎关注个人订阅号 coding个人笔记
