闲里偷忙，来点Vue

时间 2019-11-16

标签 vue 繁體版

原文原文链接

前言

最近对vue学习一段时间以后，因而本身打算经过学习实现了一个项目，在这里想与看到的您分享实战中踩过的雷和关于一些细节的处理技巧，最主要的仍是原生组件的实现。因为主要是前端界面的实现，因此在后台使用的是express来模拟数据，固然你还能够选择json-server和easy-mock这些都能进行数据的模拟。不过本身在使用过程当中发现json-server使用post请求时会出现问题，查找不少文档和资料都没找到解决的办法，最后选择了express也是很是的简单！！！html

不过这里须要注意，VUE开发请求本地数据的配置，早期的vue-lic下面有dev-server.js和dev-client.js两文件，请求本地数据在dev-server.js里配置，最新的vue-webpack-template中已经去掉了dev-server.js和dev-client.js 改用webpack.dev.conf.js代替，因此配置本地访问在webpack.dev.conf.js里配置便可。须要进行学习的同窗能够查看基于vue-cli及express模拟Ajax获取服务器数据这里面讲的很是的详细，代码只要直接copy过来就能用，看完要注意在配置接口端口号的时候不能用port + 1，否则会报错--port未定义，这里咱们手动设置端口号为8081就好啦！前端

技术栈

vue + vuex + express + webpackvue

结构简介

布局结构webpack

主界面分为上中下结构，header和footer相对简单直接在layout.vue中实现，中间的主体部分抽离为一个组件index.vue，主体部分又分为左右两个部分，左边为导航条，右上边为一个轮播组件，右下方是四个商品购买功能。git
文件结构github

浏览器图标和标题的实现步骤

设置属于本身项目特定的图标web

在项目的根目录下找到index.html而后在head里面加上下面的这句代码vuex
```
<link rel="shortcut icon" type="image/x-icon" href="static/home.ico">
复制代码
```
在这里要注意的是图标文件的位置，不能放到src里，这样的路径会让浏览器找不到。网页把根域名做为相对路径的根目录了，然而咱们文件的路径是相对于项目文件的根目录的，所以就找不到了。因而咱们须要把静态文件放在static文件下。最后刷新一下界面图标就出来咯！！！详细解释请点击查看vue-cli
设置单页界面的标题express

这里使用到了第三方npm包vue-wechat-title，安装好插件后须要在main.js导入插件以下图：

接下来就须要为咱们的router-view设置标题了，咱们每一个须要切换的页面只须要加上下面红框的代码就OK：

通过前面的两步，咱们基本就完成了，还有最后重要的一步则要让界面跳转时知道咱们设置的title，须要在router-view里面修改为以下就OK了：
```
<router-view v-wechat-title='$route.meta.title'></router-view>
复制代码
```
详细解释请查看单页面如何设置网页title

这样设置后就能够当即看到界面出现咱们想要的标题和首页图标啦！！！

关于登陆

登陆功能通常都是使用一个弹窗组件来实现，先让咱们看看效果图：

失败的状况：

成功的状况：

这里对用户名和密码的输入限制使用正则作了简单的处理，开始出现一点击登陆按钮“非法输入”就出现，为了解决这一个问题，使用了一个计算属性实时监控非法提示，它返回state和errorText两个信息：

userErrors () {
        let state, errorText;
        const reg = /^1\d{10}$/;
        if (reg.test(this.userNameModel)) {
            state = false;
            errorText = '';
        }else {
            state = true;
            errorText = '输入非法';
        }
        if (!this.isFlag) {
          errorText = '';
          this.isFlag = true;
        }
        return {
            state,
            errorText
        }
}
复制代码

关于组件

对于组件的实现，对于大多数像我同样的新手来讲考虑问题每每不能很是的全面，所作出来的也就会有局限性、通用性不强。一些须要被使用者修改的参数没有提供接口。每次修改就会说本身笨到死，哈哈！！！

轮播组件

组成：图片 + 当前图片码 + 切换条

<div class="slide-img">
      <a :href="slides[nowIndex].href">
          <transition name="slide-trans">
              <img v-if="isShow" :src="slides[nowIndex].src">
          </transition>
          <transition name="slide-trans-old">
              <img v-if="!isShow" :src="slides[nowIndex].src">
          </transition>
      </a>
  </div>
  
  <h2>{{ slides[nowIndex].title }}</h2>
  
  <ul class="slide-pages">
      <li @click="goto(prevIndex)">&lt;</li>
      <li v-for="(item, index) in slides" :key="item.id" @click="goto(index)">
          <a :class="(nowIndex === index) ? 'on':''">{{ index + 1 }}</a>
      </li>
      <li @click="goto(nextIndex)">&gt;</li>
  </ul>
复制代码

关键代码：让图片动起来

computed: {
      //   使用计算属性来实现循环播放
      prevIndex () {
            if (this.nowIndex != 0) return this.nowIndex - 1;
            else return this.slides.length - 1;
        },
        nextIndex () {
            if (this.nowIndex === this.slides.length - 1) return 0;
            else return this.nowIndex + 1;
        }
  },
 goto (index) {
      this.isShow = false;
      setTimeout(() => {
          this.nowIndex = index;
          this.isShow = true;
      }, 100);
  },
  runInv () {
      this.invId = setInterval(() => {
          this.goto(this.nextIndex);
      }, this.inv);
  }
复制代码

没错和你想的同样，就是使用计时器 + 计算属性咯！！！这里的goto()函数也出现一个计时器可是使用的却不同，关于这个相比了解计时器的都知道使用setTimeout()只执行一次code，若是想无限执行须要这样写:

function timedCount(){"须要执行的代码" + t=setTimeout("timedCount()",1000)}而使用setInterval()则能够达到同样的效果。回归正题若是不使用setTimeout()看到图片切换效果很生硬，加了时间差咱们就能够看到项目中平滑的切换了！！在这里咱们看到前面两个<img v-if="isShow" :src="slides[nowIndex].src">里面的src都同样，可是两个nowIndex却不是同一张图片，看isShow和goto()函数的参数，想必聪明的你必定明白了！

对于单选和多选、银行选择组件以及日期组件想要查看源码的能够进入个人项目地址：点击查看

结语

完成这次项目在掘金中也找到很多资源，看了一些别人写的项目学习到不少技巧！！！但愿看到的观众老爷们不要介意，由于个人文笔不太好嘻嘻！有问题欢迎留言或者改正哦，么么哒。

做者：BenTuTu（一枚掘金者）

GitHub主页：click me