前端vue笔记

vue前端的一些有用的资源

阿里巴巴的矢量图表库

echarts使用笔记

$chart_curve1 = echarts.init(document.getElementById(‘chart_curve1’));
$chart_curve1.setOption(chart_curve1);
window.addEventListener(‘resize’, $chart_curve1.resize);
将图表设置响应模式，随着父标签大小改变

tooltip（提示框配置）：通过触发 item 事件来显示提示框。trigger 设置触发类型，formatter 设置提示框的内容格式化字符串。

legend（小图标）：设置图例的位置和布局方式。top 设置图例距离容器顶部的距离，left 设置图例相对于容器的左侧位置。

series（系列配置）：设置图表的系列数据。该配置中包含一个数组，每个元素表示一个系列。该示例中只包含一个 pie 类型的系列配置。

name：系列的名称。
type：系列的类型，此处为 pie 饼图。
radius：饼图的半径，可以设置为一个数组表示内外半径。
avoidLabelOverlap：标签是否覆盖。
label：标签配置，用于设置标签样式和显示内容的格式化。
emphasis：选中时的高亮样式配置。
labelLine：标签的线条配置。
data：数据项的数组，每个元素为一个数据项，包含 value（数值）和 name（名称）属性，用于绘制饼图的扇区。
graphic（自定义图形元素配置）：在图表上添加自定义的图形元素，例如文本。

type：图形元素的类型，此处为文本。
left：文本相对于容器的左侧位置。
top：文本相对于容器的顶部位置。
style：文本的样式配置，包括 text（文本内容）、textAlign（文本水平对齐方式）、fill（文本颜色）、fontSize（文本字体大小）等属性。

引入地图图表

使用echarts引入图表时首先需要有一个合适的option例如：

{
                geo: { // 作为底图，设置地图外围边框
                    map: 'china',
                    itemStyle: {
                        areaColor: '#fff',
                        borderColor: '#333',
                        borderWidth: 1,
                    }
                },
                series: [
                    {
                        type: 'map',
                        map: 'china',
                        itemStyle: {
                            areaColor: '#fff',
                            borderColor: '#333',
                            borderType: [2, 4],
                            borderDashOffset: 4
                        },
                        emphasis: { // 鼠标悬停时样式
                            label: {
                                color: 'rgb(0, 60, 131)'
                            },
                            itemStyle: {
                                areaColor: 'rgba(0, 60, 131, 0.3)',
                                borderType: 'solid',
                                borderColor: 'rgb(0, 60, 131)',
                            }
                        },
                        select: { // 选中时样式
                            label: {
                                color: '#fff'
                            },
                            itemStyle: {
                                areaColor: 'rgba(0, 60, 131, 0.7)',
                                borderType: 'solid',
                                borderColor: 'rgb(0, 60, 131)',
                            }
                        }
                    }
                ]
            }

挑选一个合适的 map地图geojson/json格式的数据源
自选map js的话可以参考这篇文章https://blog.csdn.net/harrisonz8/article/details/103183998
这里我采用开源的esmjs/geo项目地址
选好后根据map名称改好option就行
比如

echarts.registerMap("china", { geoJSON: china });

将上述option里面的map替换为china就ok

动态import组件

这里面有两个要注意的地方
在 Vue 中使用 await import(path) 动态导入模块时，可能会出现 “Error: Cannot find module xxx” 这样的错误。这通常是因为 Webpack 在静态解析模块路径时，不支持动态路径。
所以就摒弃用路径变量学习vue的动态路径的实现方式

let componentsData =
{
    "components": [
        { "name": "div", component: ()=> import('./test1.vue' )},
    ]
}

第二个一般都需要遍历组件列表,由于import是一个异步操作,而foreach不是异步
往往导致组件在加载完成后foreach早就执行完了,导致组件没有成功赋值
比如如下操作

 componentsData.components.map(async (componentInfo) => {
                const { name, component } = componentInfo;
                try {
                    const module = await component();
                    components[name] = module.default;
                } catch (error) {
                    console.error(`Error importing component "${name}" from path:`, error);
                }
            })

这时候就需要等待全部操作完成在退出
以下是解决方式

const components = {};

const importComponents = () => {
    (async () => {
        await Promise.all(
            componentsData.components.map(async (componentInfo) => {
                const { name, component } = componentInfo;
                try {
                    const module = await component();
                    components[name] = module.default;
                } catch (error) {
                    console.error(`Error importing component "${name}" from path:`, error);
                }
            })
        );
        // 确保所有组件都加载完成后，再打印或导出 components
        console.log(components);
        // export default components;
    })();  
}

watch监测数据

当使用类似事件赋值数据属性时
例如

  setDivStyle(state, data) {
      // console.log("\更新数据")
      state.divStyle = data; // 更新数据
    },

这里应该是浅拷贝的原因（我猜的~）会导致第一次成功赋值
但第二次改变data的值时watch监测不到其变化
debug后发现state.divStyle的值一直是data
所以以后遇到此问题记得先将值改为null或者state.divStyle = JSON.parse(JSON.stringify(data));
改后watch监测正常

全局可访问实例$xx

概述

项目中有时会需要全局的变量或方法,例如user信息这.时候添加一个全局可访问的实例会很方便

一旦创建了全局实例，就可以在任意Vue组件中直接使用它，无需导入或在组件内部定义。
通过扩展Vue的原型（Vue.prototype）来创建全局可访问的方法或属性。这样，所有Vue组件实例都将自动拥有这个方法或属性。

// 在main.js或其他初始化文件中
Vue.prototype.$db = {
  set: function(key, value) {
    localStorage.setItem(key, JSON.stringify(value));
  },
  get: function(key) {
    return JSON.parse(localStorage.getItem(key));
  }
};

如果内置方法比较多也可以通过import xxx.js文件的方式来创建

前端数据结构设计心得

在设计数据结构时一定要把不用与后端交互的数据与需要后端进行数据交互的数据进行分开设计，哪怕同属于一种类型的数据。不要为了省事就设计在一个数据结构中
例如

obj{
info1:"123"
info2:"123"
info3:"123"
value:{}//后端交互数据
}

这样在进行数据交互的时候难免进行obj.value的数据形式进行交互
当别人读取这段代码的时候就会对info等数据感到疑惑
在使用上也可能会将需要交互的数据弄混淆，增加其维护成本 （特别是对前端来说这很重要)