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);
      }
    },

就写到这叭

  • 23
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值