Vue.js

demo319

2019-03-25  本文已影响19人  快乐的大鹅

新建一个git仓库

新建仓库.png

vue-cli 初始化一个项目

这里选择了手动配置(manually)

初始化时的一些配置.png 启动一下试试.png

启动没有问题，接下来看下目录结构

目录结构.png

提交一波代码

提交代码.png

安装所需依赖

安装element-ui

安装element-ui.png

安装之前可以先去yarn官网/包搜索一下 然后直接复制右侧的安装命令

安装axios

安装axios.png

安装echarts

安装echarts.png

引入依赖

引入依赖.png

路由

views文件夹下新增文件Login.vue 然后router.js配置如下

配置路由.png

填加第三方图标库

element-ui本身的图标少得可怜 因此我们从阿里图标库导入我们要的图标 具体操作如下

新建项目.png 添加图标.png 添加到项目.png 增加代码.png 导入.png 增加图标.png 效果.png

待解决问题

  • 路由守卫 尝试在main.js配置了router.beforeEach((to, from, next) => {}) 但是只有在路由变化的时候才会有效 如果直接在url输入home地址 不会走这一层鉴权

表单校验

登录作为一个基础的表单 势必要有一定的表单校验 这里使用element-ui提供的功能 具体做法可以参考这里

关于不同页面挂载不同组件的问题

由于所有.vue都通过一个入口文件main.js挂载到App.vue中 导致配置在App.vue中的公共组件在不该出现的时候显示了 具体表现为App.vue挂载了一个菜单的组件 而登录页面并不需要它 这里使用的解决方式是通过v-if的状态来进行控制 如下图

App.vue

组件.png 控制状态.png

关于导航的问题

在router.js和MenuNav.vue中配置了菜单路径但是有两个问题 第一个问题是点击导航菜单 路由没有跳转 我的配置如下 感觉应该没有问题才对

MenuNav.vue.png router.js.png

结果核查官网发现如下说法

image.png

于是配置router属性如下

配置router.png

发现还是不好使 看到了控制台的报错 这便是第二个问题

控制台报错.png

根据提示 修改为如下方式即可解决

正确的router配置形式.png

至此基本框架已经搭建差不多了 明天开始进入数据可视化设计与实现阶段

axios集成接口

同事今天提供了swagger地址 先把接口集成进来 明天上班调试

vue里声明全局变量的方法很多 这里使用较为广发使用的方式

先创建Global.vue组件

Global.vue.png

然后在需要的地方引入 这里是Dashboard.vue引入了Global.vue

引入全局组件.png

访问页面 可以看到全局组件生效 并且发出了一个post请求 我现在是断网状态 因此请求没有响应 至此全局变量的配置和axios的基本使用已经完成

发出请求.png

关于多色图标

今天下载了iconfont的多色图标 当使用的时候发现了丢失色彩的问题 如图

它本来是这样的.png 结果在我的系统里变成了这样.png

我的引用方式还是和单色图标一样

错误的多色图标引用方式.png

开始以为是继承的字体颜色影响了它 排查之后 发现是使用多色图标的方式错了 正确的应该是这样

image.png 正确写法.png 规定大小.png

关于嵌套路由

由于业务要求有双导航，即顶部一级菜单，侧边栏二级菜单和更多，因此涉及到了路由嵌套的问题，开始全配置在了router.js的同一级，但是跳转的时候直接跳出了原有的父级结构，实则应该如下配置。

首先配置父级路由，然后在父级路由对象里，添加children

router.js配置.png

然后是ViewSystem.vue配置

image.png

导航直接配置/test 不要忘记在el-menu添加router属性

image.png

关于图片路径

我这次用的vue-cli 3 + webpack 4 遇到了一个关于图片路径的问题

首先静态图片没有问题 也就说可以在.vue中做如下写法

作为背景.png 作为img标签.png

可以看到作为背景图片和img标签都是可以引入相对路径的 但是当我的路径是动态的情况时 就出现了问题 首先是动态路径引入变量编译报错

这个错误的例子是v-for循环6个卡片 想把o作为下标引入不同的6个图片

页面写法.png 编译报错.png

于是按照提示 修改为下图方式 不报错 但是发现图片没有引入

页面效果.png 页面写法.png

查看调试工具 比对了一下静态图片路径和刚刚那种写法生成的动态路径 发现应该是在打包的时候除了问题

错误路径.png 正确路径.png

解决方案是通过require引入图片的相对路径

正确页面写法.png 页面效果.png

这样就完成了动态的图片效果

关于循环

刚做循环遍历的时候有几点要记录一下

:key是必要的

不写:key 编译报错.png

支持of且数组下标如下写法

of和数组下标.png

综合用法

综合.png

另外要说一下这个:key 这个属性的意义在于唯一性 而且不能是个对象 不然报using non-primitive value as key, use string/number value instead.的错误

子组件通信

由于项目中涉及到非父子组件之间通信 也就是子组件通信 具体表现为子组件A某个点击事件获得一个参数param 然后将这个param传给子组件B触发查询方法并渲染在子组件B中 听起来很简单的一个功能 实现起来着实废了一番心思 我先是用vuex试着做了一下

文件结构为父组件C.vue 两个子组件A.vue和B.vue

子组件A的点击事件

.png js.png

然后在store.js中声明状态

store.js.png

最后在子组件B使用计算属性

html.png js.png

注意使用computed时 不需要使用模型 即data不会有vcode 并且需要定义好get和set方法 不然会报错

虽然vuex让我们实现了值的传递 但也只是将值显示在页面上 而是用这个值去调用方法 这和我们想要的功能还差了一些 因此再考虑通过父组件作为公共仓库来实现这个功能

但是也遇到了问题 具体表现为子组件使用$emit()父组件使用$on()但是父组件方法无效 后来找到解决方法后 自己思考这个$on()应该作用在真正的父组件上 其实我这里的父组件和子组件都是挂载在app.vue上 理论上都是他的子组件

最后曲线救国 引入了公共仓库bus.js 下面具体说下子组件之间的通信方式

创建bus.js

bus.js.png

子组件A.vue引入bus.js

引入.png

点击方法传值到父组件C.vue

传值.png

父组件C.vue同样引入bus.js

引入.png

接收这个子组件传过来的方法

image.png

这里有个问题是$on()会出发多次的问题 使用$off()先解除绑定

接下来就是传值到另一个子组件B.vue了

继续在父组件C.vue编码

.png js.png

最后是子组件B.vue

html.png vue.png

这样总算完成了子组件之间的通信 但是我一直觉得通过vuex可以轻松的解决这个问题 以后还要再研究一下

尝试部署

执行yarn run build之后会看到一个新生成的文件夹dist 我们现在是把这个文件夹下面的所有文件 放到主机上的tomcat下的webapps下的dc下 但是一直404 考虑重启一下服务 执行ssh -t {用户名}@{IP} -p {端口}连接到主机 但是重启之后依然不好使 考虑baseurl的问题 在项目的根目录下 创建 vue.config.js 然后 增加如下代码 （由于这里用的是vue-cli 3所以不再有baseurl的东西）

官方解释.png

其实配置就是多了一个.

配置.png

然后还要记得把路由的//mode: 'history',注释掉 这样访问地址如下

访问地址.png

会发现一直有个index.html 这个之后要考虑如何去掉

这里安利一个工具 cyberduck 用来连接远程主机上传代码 比iterm的lrzsz 多了可视化的界面 而且我一直下不了lrzsz

不过还是记录一下lrzs的方法

如果是手动下载 找不到/usr/local/bin/ 就打开finder 然后command+shift+g 输入路径就可以找到了

在iterm中对应的profile中AdvanceTrigger中填入

Regular expression: rz waiting to receive.\*\*B0100 Action: Run Silent Coprocess Parameters: /usr/local/bin/iterm2-send-zmodem.sh Instant: checked Regular expression: \*\*B00000000000000 Action: Run Silent Coprocess Parameters: /usr/local/bin/iterm2-recv-zmodem.sh Instant: checked

最后在主机上也安装

执行yum install lrzsz -y

上传 rz

下载 sz filename

至此 整个项目已然做了半月有余 完成了从零搭建到部署上线 由于无人可以请教 只能自己不断摸索 期间诸多问题悬而未决 日后仍要上下求索 每每受挫身心俱疲 然解决之后又顿觉神清气爽 望自己越挫越勇

今天开始新的爬坑之路 我们的征途是星辰大海

关于子组件修改父组件的参数

遇到了一个场景 子组件要使用父组件props的参数作为局部变量 我尝试直接修改this.view结果报错 因为这样违反了vue单项数据流的设计思想

单项数据流.png

于是官方给出了如下的方式

两个方式.png

但是我这两个方式都尝试了 均没有达到我的理想 需要继续研究

关于keyup事件

我的项目用了element-ui作为UI框架 于是在input标签绑定keyup事件的时候遇到了该事件不生效的问题 原始写法如下 想要在输入回车的时候触发某个方法

原始keyup.png

修改为如下方式即可解决 加上1.native1取消掉1element1封装的方法

生效.png

关于百度地图

折腾了一中午 搞定了vue引入百度地图的问题 之前一直想用引入脚本的方式 然后脚本通常都要挂载在index.html上 然而我使用的vue-cli 3 就没有这个文件啊 然后又用import js的方式引入 一顿报错 类似BMap is undefined BMAP api is not a function的错误 搞得头很大 今天中午偶然发现百度地图支持以组件的形式被引入 于是找到了新的方法

vue-baidu-map官网

yarn add vue-baidu-map

在main.js加入下面这句

注册.png

在组件里添加

使用.png

引入之后发现地图一片空白 于是加入了一些属性zoom center 然后发现无法鼠标滚轮缩放 再加入属性scroll-wheel-zoom 变成如下这样

配置.png

然后又加入了热力图的组件部分 最后变成如下这样

html.png js.png 配置.png 函数.png 效果.png

至此 简单的vue结合百度地图就完成了 下一步尝试 vue+echarts+baidu-map

由于演示已经结束 demo-319的内容也告一段落 接下来 我会投入到另个一基于vue的项目 如感兴趣 请移步至k8s 我将继续以开发日志的形式 记录学习过程中的每一步以及遇到的问题和相应的解决方案

上一篇 下一篇

猜你喜欢

热点阅读