闲里偷忙，来点Vue最近对vue学习一段时间之后，于是自己打算通过学习实现了一个项目，在这里想与看到的您分享实战中踩过的

前言

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

不过这里需要注意，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 + webpack

结构简介

布局结构

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

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

设置属于自己项目特定的图标

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

这里使用到了第三方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