vue的一些总结

1.软件的准备

vscode宇宙第一，官网下载以后安装一些插件：

然后基于Beautify插件可以进行一些基本的配置：

第一步：点击设置

第二步：找到beautify的设置

第三步：打开setting.json

第四步：添加自定义代码

本人的如下：

 

// 解决Vue换行问题

    "vetur.format.defaultFormatter.html": "js-beautify-html",

    "vetur.format.defaultFormatter.js": "vscode-typescript",

    "vetur.format.defaultFormatterOptions": {

        "js-beautify-html": {

            "wrap_attributes": "auto"

        },

        "prettyhtml": {

            "printWidth": 100,

            "singleQuote": false,

            "wrapAttributes": false,

            "sortAttributes": false

        }

    },

基于koroFileHeader插件的设置：

"fileheader.cursorMode": {

        "Description": "",

        "Version": "1.0",

        "Autor": "pmy",

        "Date": "Do not edit",

        "LastEditors": "pmy",

        "LastEditTime": "Do not edit"

    }

 到此，软件的基础就差不多完事了，可以开始搭建vue项目了；

2.项目的搭建

别人写的挺好的，这个地方给个链接自己看去：vue cli3.0快速搭建项目详解（强烈推荐） - coober - 博客园

如果要安装vue3+ts看这个：

https://blog.csdn.net/weixin_47529373/article/details/119052636

3.vue项目开发可能遇到的一些问题

（1）关于echarts问题

首先是图缩小的问题变成宽高100px（解决思路是外部dom消失了）

例如：用display显隐，echart先加载dom获取不到dom的width就会导致这个问题，用v-if去控制显隐，可以销毁dom从而解决

（2）关于flv.js问题

别人写的很好：vue项目中使用flv.js实时播放 断流重连 关闭断流开发心得_Davi的博客-CSDN博客_flvjs断流重连

（3）关于rem兼容分辨率的问题

首先要明确火狐可以支持12px以下字体，chome，ie11,360只能支持到12px，这就是最大的问题了

配置很简单，直接vue.config.js 配置一下就可以了：

css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    require('postcss-px2rem')({
                        remUnit: 10
                    }), // 换算的基数
                ]
            }
        }
    },

然后配置一下自己生成一个rem.js文件，然后在main.js里面去调用方法就可以了：

 rem.js代码段如下：

export function setRemInit() {
    // postcss-px2rem的内容
    // 基准大小
    const baseSize = 10;
    // 设置 rem 函数
    function setRem() {
        // 当前页面宽度相对于 1920 px(设计稿尺寸)的缩放比例，可根据自己需要修改。
        const scale = document.documentElement.clientWidth / 1920;
        // 设置页面根节点字体大小
        document.documentElement.style.fontSize = `${baseSize * scale}px`;

        let baseNumber = 10;
        // 这个if语句代码，是用来屏幕的最小字体大小，不需要可以可以不写
        if (Number(document.documentElement.style.fontSize.slice(0, -2)) <= baseNumber) {
            document.documentElement.style.fontSize = baseNumber + 'px';
        }

    }
    // 初始化
    setRem();
    // 改变窗口大小时重新设置 rem
    // window.addEventListener('resize', setRem);
}

（4）关于高德地图的使用

到时候再出一篇蚊帐讲，都放一个蚊帐打蚊子太累了。

（5）关于element-ui

饿了么ui，也是再拿一个纹章讲，纹章不好修炼，而且还是蛮多的。

（6）page里面自动调用组件的方法

从所周知，每写一个调用一个很头疼，所以要用懒人的办法，让他自己动：

var comObj = {};
// 引入所有需要的动态组件
const requireComponent = require.context(
  "@/components/views", //组件所在目录的相对路径
  true, //是否查询其子目录
  /\w+\.vue$/ //匹配基础组件文件名的正则表达式
);
requireComponent.keys().forEach(fileName => {
  // 获取文件名
  var names = fileName
    .split("/")
    .pop()
    .replace(/\.\w+$/, "");
  // 获取组件配置
  const componentConfig = requireComponent(fileName);
  // 若该组件是通过"export default"导出的，优先使用".default"，否则退回到使用模块的根
  comObj[names] = componentConfig.default || componentConfig;
});
const requireComponent2 = require.context(
  "@/components/common", //组件所在目录的相对路径
  false, //是否查询其子目录
  /\w+\.vue$/ //匹配基础组件文件名的正则表达式
);

 （7）头部历史菜单栏以及缓存问题

点击菜单栏以后，保留历史的页面，也可以关闭清掉，效果如下：

 主要是利用了keepalive组件保留页面：

 至于头部则是使用了这个组件el-tabs：

  <el-tabs v-model="editableTabsValue" type="card" :closable="editableTabs.length>1" @tab-remove="removeTab" class="myElTab" @tab-click="handleClick" v-show="editableTabs.length>0">
      <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
        {{item.content}}
      </el-tab-pane>
    </el-tabs>

 实现的机理就是往store里面传值，分别传当前已经点击的历史菜单栏List，以及当前活跃的菜单栏activeMenu，后者用于跳转页面，前者用于记录。

移除的方法放一下：

removeTab(targetName) {
      let tabs = this.editableTabs;
      let activeName = this.editableTabsValue;
      if (activeName === targetName) {
        tabs.forEach((tab, index) => {
          if (tab.name === targetName) {
            let nextTab = tabs[index + 1] || tabs[index - 1];
            if (nextTab) {
              activeName = nextTab.name;
            }
          }
        });
      }
      //移除点击的菜单
      this.editableTabs = tabs.filter(tab => tab.name !== targetName);
      this.$store.dispatch("updateActiveMenuList", this.editableTabs);
      //删除以后默认高亮最后一个
      this.editableTabsValue = this.editableTabs[this.editableTabs.length - 1].name;
      this.$store.dispatch("updateActiveMenu", this.editableTabsValue);
    },

添加的方法放一下：

addTab(targetName) {
      //设置高亮标签页
      this.editableTabsValue = this.activeMenu;
      //循环找到英文对应中文名
      let tabName = "";
      GlobalSetting.MenuList.forEach(v => {
        v.children.forEach(vv => {
          if (vv.index == targetName)
            tabName = vv.name
        })
      })
      //判断菜单列表中是否已存在，若已存在则不再添加
      let flag = this.editableTabs.some(function (v) {
        return v.name == targetName
      })
      if (!flag) {
        this.editableTabs.push({
          title: tabName,
          name: targetName,
          content: targetName
        });
        this.$store.dispatch("updateActiveMenuList", this.editableTabs);
      }
    },

就写到这叭