入坑集锦(二)

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:你要变化的值 = “表达式”

猜你喜欢

转载自blog.csdn.net/bonjourjw/article/details/78627481