入坑集锦（二）

最新推荐文章于 2024-04-26 20:40:37 发布

Bonjourjw

最新推荐文章于 2024-04-26 20:40:37 发布

阅读量452

点赞数 1

分类专栏：学习笔记

本文链接：https://blog.csdn.net/Bonjourjw/article/details/78627481

版权

学习笔记专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.升级element-ui到2.0版本，选中的Tab单项和菜单项都多了蓝色边框，如下图所示。

这里写图片描述

在页面上通过检查元素想要查看样式设置的地方，令人欣慰的是，根本就找不到。。在vue的技术群里请教之后，才了解到该现象的产生是由于浏览器的自带样式。

解决办法：设置outline:none 即可

2.也是在升级后，在外网通过npm将所需要的依赖安装后，在外面能正常运行，复制到内网中进行项目开发。运行指令npm run dev一直报错。目前还没有解决。

这里写图片描述

!!!!!!!!!!关于这个问题自己也不知道确切的原因，在尝试了无数种方法也没有用，一天半的时间一直尝试各种可能的原因，例如什么端口占用及各种版本问题及设置问题。
其中最靠谱的是利用淘宝镜像安装 npm install –registry=https://registry.npm.taobao.org，在外面项目仍然是生龙活虎的，只要拷贝进去还是出现上图的问题。好，再根据提示在外面重新安装“json-stable-stringify”模块，结果仍然不行。
最后，，就在自己快要放弃的时候，求助了技术群主大大，利用他推荐的方法，淘宝镜像安装，很明显没有用╮(╯_╰)╭。。。告诉自己再试最后一次，在开始的基础上，利用淘宝镜像安装的方法单独安装“json-stable-stringify”，在项目目录下输入命令“npm install json-stable-stringify –registry=https://registry.npm.taobao.org”，(≧▽≦)/激动人心的时刻终于来临。
然而我还是一脸懵逼，因为我不知道是什么原因。删除node-modules,用最开始的npm i方法安装后拷进去又是好的。下次江湖再见，我可能还是只会删删删后，再重装吧(；′⌒`)。

3.使用vue-svg-icon插件（可实现多色图标方案）：研究之前的路由图标方案，在route.js中：这里写图片描述

一直以为iconCls是route的配置属性，于是去查了官方API，发现并没有这个属性。
这里写图片描述

于是回过头研究Home.vue中调用route的地方，也是按正常的流程使用图标的。

这里写图片描述

因此，iconCls仅仅是自定义的一个图标属性名，我们只要在使用的地方按规则来使用就可以了。如果是svg图标，使用同理。
这里写图片描述
使用的地方：

<icon :name="iconCls"> </icon>

4.关于重定向

（1）想要实现效果：当首次进入页面的时候，页面中并没有显示任何内容。这是因为首次进入页面时，它的路径是 ‘/’，我们并没有给这个路径做相应的配置。这怎么办？这需要重定向。然后如下面的代码和效果图所示：我碰到的问题是首次进入页面是home界面，但是我的home界面由于只有一个导航菜单栏，想要实现第一次进入页面时默认显示某一菜单项下的路径。那我应该需要重新设置‘/’路径下的重定向问题。

 {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'fa fa-id-card-o',
        icon:'net',
        leaf:true,        
        children: [
            { path: '/channels',
              component: Guide, 
              name:'message.channelControl.menu'
          }
        ]
    },
    {
        path: '/',
        component: Home,
        name: '',
        iconCls: 'el-icon-setting',
        leaf: true,//只有一个节点
        children: [
            { path: '/network/networkset', component: Network, name:'message.Network.menu' }
        ]
    },

这里写图片描述
所谓重定向，就是重新给它指定一个方向，它本来是访问 / 路径，我们重新指向‘/home’, 它就相当于访问 ‘/home’, 相应地, home组件就会显示到页面上。vueRouter中用 redirect 来定义重定向。
于是开始脑壳不假思索地就写下：

{
  path:'/',
  redirect:'/xxx'
}

最后的结果肯定是失败的，因为我在之前都写了‘/’路径下的component：home，所以重新审视了一圈我的路由定义，明显是不对的，这样子为刚进入时的‘/’路径指定了Home，虽然不是未指定的空白页。于是明白了之后重新修改路由定义：

  ...
 {
        path: '/channels',
        component: Home,
        iconCls: 'fa fa-id-card-o',
        leaf:true,        
        children: [
            { path: '/channels',
              component: Guide, 
              name:'message.channelControl.menu'
          }
        ]
    },
    {
        path: '/network',
        component: Home,
        iconCls: 'el-icon-setting',
        leaf: true,//只有一个节点
        children: [
            { path: '/network',
             component: Network, 
             name:'message.Network.menu' }
        ]
  ...

这时重定向代码终于起作用了，第一次进入页面显示的是我们想要实现的效果。

（2）路由的别名
查看文档顺便过了一下别名。『重定向』的定义是：当用户访问 /a时，URL 将会被替换成 /b，然后匹配路由为 /b；别名的定义是：/a 的别名是 /b，意味着，当用户访问 /b 时，URL 会保持为 /b，但是路由匹配则为 /a，就像用户访问 /a 一样。
于是试验了一把：

{
     path:'/vaction',
     component:Layout,
     redirect:'noredirect',
     children:[
       {
        path:'index',
        component:_import('vaction/index'),
        name:'vaction',
        alias:'v',                        //别名设置为v
        meta:{
          title:'vaction',
          icon:'clipboard'
        }
       }
     ]
  },

最开始正常匹配/vaction/index路径，如下图所示：

这里写图片描述

最后的时候当输入路径为/vacation/v时，如下图所示。Url保持为访问路径，但是实际上匹配出来的页面为请假管理页面，但是如此情况下，却是新建了一个面包屑。请假管理的菜单选项也没有被激活。

这里写图片描述

首先解决第一个问题：
4.2.1 两个标签（分别通过选择菜单项的请假管理，和输入别名的路径/vaction/v，虽然都跳转至同一个页面，但却生成了两个导航标签项）
追根溯源，到标签项实现界面查看，tag的产生源是visitedViews，数据存放在store里。
这里写图片描述

然后store里关于visitedViews的改变，是通过提交Vuex的mutation属性，于是再看mutation的触发需要action来提交触发mutation。于是两个部分的核心代码如下面两个图所示。

这里写图片描述

visitedViews的是一个数组存储着访问过的历史路由，增加的核心是，判断当前路由是否匹配到该数组中的某一个路由，如果存在，则直接返回return，放弃添加！！
//最初自己犯错是因为看错了代码，一直以为是当前路由匹配到已经存在的历史路由，则将当前路由push进去！！！还一直觉得代码有问题，但实际结果又没有错。折腾了半天，后来发现自己理解错了。return直接返回，结束当前函数！
于是，在原来基础上直接再添加一条name的属性判断，避免别名条件下匹配到相同路由时再次生成了一个重复的tag。

这里写图片描述

4.2.2 关于菜单项激活状态
同理，由上面的分析，菜单项其原因应该也是类似的。需要修改菜单激活判断条件，然后就需要修改element-ui中的源代码啦。。然后折腾了一上午，没成功！
第二天重新研究后，终于成功，详见关于如何修改输入路径激活对应的导航菜单项

5.关于在服务器上运行webpack打包编译程序
（1）配置文件index中的关于输出路径及相关问题！
一直在本地跑单一的项目，数据也是直接Mock的，很久没有在服务器上跑代码了。由于编译出来的dist目录本来是存放至Vue根目录下的，所以直接拷贝至服务器的web文件夹下，根目录变为了web，于是，第一次在服务器上运行时报错找不到根目录vue-admin-master。

这里写图片描述

这里写图片描述
因此千万要记得修改build.assetsPublicPath(资源的根目录)为‘/’，否则找不到根目录当然也不能加载static里的资源渲染页面。
当然也可以改服务器的根目录名称^_^
附上博客园博主“whkl梅”的文章——对vue中默认的 config/index.js:配置的详细理解 -【以及webpack配置的理解】-config配置的目的都是为了服务webpack的配置，给不同的编译条件提供配置

6.界面上输入框的输入值类型
输入框通过v-model绑定的值都是字符串类型，最近发现之前虽然在坑里一直没发现这个问题。
这里写图片描述
如上图在控制台中打印操作加以验证，发现当字符串与数字进行“+”运算操作时，这时的“+”已经变成了连接操作符，因此将数值自动转换为字符串了，便有1231结果的显示。也导致进行（a+b-c）的计算时，虽然拿到的数据b、c是正确的，但是由于输入框中的a是字符串形式，故最后的结果是不正确的，最初没发现时发现真的是匪夷所思，思路也一直停留在之前的精度丢失的问题上，忽略a是一个字符串。于是终于在改了一次又一次后，终于在调试窗口下发现，我去！！传给我的value=“XX”。粗心的我反正是没看到，后来老大帮我瞅了一眼就发现了。又是一次深刻的教训，花费了我一下午+半个上午的时间，，再次提醒自己仔细仔细再仔细！（PS:之前没有问题的原因，是因为通过页面上计算设置的值的运算全都是减法，字符串自动转换成了数值。。）控制台输出字符串和数值也是有明显区别的呢，以后细心的自己要留心观察哟！

7.关于v-model和v-bind的区别
一般v-model用于双向绑定数据，当数据改变时，界面展示相应改变；而相应地改变了DOM属性值，例如改变了输入框值，因为用v-model进行了绑定，进而data中的message改变了，因此又反应在视图上，于是乎。Vue主要是通过数据操作视图。
v-bind则是响应式地绑定属性，即绑定后是动态地给属性添加值，一般实现格式是 v-bind:你要变化的值 = “表达式”