2023/8/28

vite和vue的搭配使用

vue：渐进式JavaScript框架，用户构建用户界面。组件化/模板化/响应式数据

vite；前端构建工具。ES模块的特性实现快速搭建，冷启动热更新

拓展：ES模块

ES 模块（ECMAScript Modules）是 JavaScript 中一种用于组织和导入/导出代码的官方模块系统。它在 ECMAScript 6（ES6）中引入，旨在改善 JavaScript 代码的可维护性、可扩展性和重用性。ES 模块允许开发者将代码分割为多个模块，每个模块可以包含变量、函数、类等，然后通过导入和导出语法在不同模块之间共享这些功能。

以下是 ES 模块的一些关键特点和语法：

1. **导出（Export）**：在一个模块中，可以使用 `export` 关键字将变量、函数、类或对象导出，以便其他模块可以访问它们。例如：

   ```javascript
   // 导出一个变量
   export const myVar = 42;

   // 导出一个函数
   export function myFunction() {
     // ...
   }
   ```

2. **导入（Import）**：在另一个模块中，可以使用 `import` 关键字导入其他模块中导出的内容。例如：

   ```javascript
   // 导入一个变量
   import { myVar } from './myModule';

   // 导入一个函数
   import { myFunction } from './myModule';
   ```

3. **默认导出（Default Export）**：一个模块可以默认导出一个值，其他模块可以使用 `import` 语句来导入该默认值。例如：

   ```javascript
   // 默认导出一个函数
   export default function() {
     // ...
   }

   // 导入默认函数
   import myFunction from './myModule';
   ```

4. **模块间依赖关系**：ES 模块支持复杂的依赖关系，允许模块之间相互导入并形成依赖链。

5. **静态分析**：ES 模块使用静态分析，这意味着模块的导入和导出在代码编译时就可以确定，而不需要在运行时进行解析。

ES 模块已经成为现代 JavaScript 开发的标准，大多数现代浏览器和 Node.js 环境都支持它。它提供了一种更好的组织代码的方式，有助于提高代码的可维护性和可读性，同时也促进了代码重用和模块化开发。这使得开发大型应用程序变得更加容易和可控。

Git: 解决掉远程分支中的 Merge branch... 提交记录

尽量不要制造多余的merge信息

用命令行提交代码而非工具

1. git status
2. git stash 
3. git pull 
4. git stash pop
5. git add .
6. git commit -m ''
7. git push (尽量写全一点 git push orgiin dev )

什么时候才需要下环线，就是创建或者第一次使用的时候

前端px对应的word文档里字号参照表

严格按照UI的字体大小来设计页面/写代码，不然后续需要调整很是麻烦。

table组件化的参考资料：

了解组件化是什么，为什么，怎么做。

 封装Vue Element的table表格组件

作为前端，你应该了解的分辨率/逻辑像素/物理像素/retina屏知识

  <el-table :data="forms.driverInfo" stripe

stripe是什么意思？隔行换色的设置

<el-table-column label="司机姓名" property="driver">

prop和property的区别

push一个对象进去，（ {}  ）里面是花括号{}

以后确定改bug涉及到后端的时候先与后端开发人员确定好了再改！

分清楚前端可以独立实现的业务

vue3-print-nb的属性使用

详情介绍（好用）：vue3实现区域打印功能(vue3-print-nb)_vue.js_G_ing-View Design

插件。

困难点：去掉url! （参数配置）

待解决！

v-print API 

封装好的组件放在这里src下的components

实现表格table的 全局排序（待解决）

全局排序：对数据集进行排序

前端 请求+后端接口响应

改变el-radio的原本样式-正方形打勾

重要代码参考：element单选框改为方框对号样式_青青子衿~~的博客-CSDN博客

v-print-nb 打印背景颜色不生效解决方法

在使用了背景样式的地方加上：-webkit-print-color-adjust: exact;　　即可。

重要代码：

:deep(.el-radio__inner) {
  border: 1px solid rgba(100, 97, 97, 0.4);
  border-radius: 3px;
  background-color: transparent;
}

:deep(.el-radio__input.is-checked .el-radio__inner) {
  border-color: var(--varColor);
  background: #04cbe660;
}

:deep(.el-radio__inner::after) {
  background-color: transparent;
}

:deep(.el-radio__input.is-checked .el-radio__inner::after) {
  /* transform: rotate(45deg) scaleY(1) !important; */
  box-sizing: content-box;
  content: "✓";
  border: 1px solid var(--varColor);
  border-left: 0;
  border-top: 0;
  height: 7px;
  left: 4px;
  position: absolute;
  top: 1px;
  width: 3px;
  transform: translate(-50%, -50%);
  transform-origin: center;
  border-radius: 0 !important;
  background-color: transparent;
}

.el-radio__input.is-checked  

自定义选中状态的值

background-color: transparent;：设置背景颜色为透明的，使背景呈现透明效果。

border-color: var(--varColor);：设置边框颜色为 CSS 自定义属性 --varColor 的值。

• transform: translate(-50%, -50%);：将伪元素水平和垂直居中对齐。
• transform-origin: center;：设置变换的原点为元素的中心。

为什么都要带上:deep ( 需要深度选择器设置的元素)

拓展：深度选择器

参考网址：带你理解scoped、>>>、/deep/、::v-deep的原理 - 掘金

scope：唯一属性、防止污染、打包时。

：：v-deep坑少，好用。

实例标识：[data - v .....]

web前端 sortable排序(局部排序)和elementUI排序

局部排序：sortable 当页的即时排序，刷新就没了。

全局排序：前端请求+后端接口。

文字加粗：

font-weight：

要让文本的字体更粗，你可以使用 CSS 的 `font-weight` 属性来设置字体的粗细。在你的代码中，你已经使用了 `font-weight: bold;`，这会将文本字体加粗。但如果你觉得这个加粗效果不够明显，你可以尝试使用更高的 `font-weight` 值。

通常，`font-weight` 的值可以是以下之一：

- `normal`：正常字体，不加粗。
- `bold`：加粗字体。
- `bolder`：更粗的字体（相对于父元素）。
- `lighter`：更细的字体（相对于父元素）。
- 数字值：可以使用数字值，例如 `font-weight: 600;`，这会根据字体的可用粗细级别来选择合适的加粗程度。通常，数字值从 100（最细）到 900（最粗）。

如果你想要更粗的字体，可以尝试使用更高的数字值，例如 `font-weight: 800;` 或 `font-weight: 900;`，根据你的需求来选择。