vue装逼神器简述

主要是分享下用vuejs开发项目过程中遇到的问题，vuejs开发的优势和需要注意的地方。

项目主要页面：主页,最新，分类，分类列表，详情页，结果页，斗图（列表，制作页）

效果图：

地址：https://zbimetest.iflyresearch.com/#/index?appid=tangdaoya

工具：vue脚手架：vue-cli 

项目结构：

 

知识点：vue语法、vue-router(路由)、Mint UI(基于vue的移动端组件库)、es6(箭头函数，axios等)、webpack配置等

优点：

1.组件式开发。vuejs可以实现组件式开发，每个页面通用的元素都可以抽取为一个公用的组件，比如上面的搜索框和导航栏可以抽取成一个SearchResult.vue文件。其他页面需要用就直接导入

export default {
    components: {
      NavBar,
      Search,
      InfiniteLoading
    }

这样极大地节省了开发工作量。

2.路由。vue有router组件集成了路由功能，利用#网页定位的功能，实现多功能的单页应用，也称为前段路由，详情看http://www.cnblogs.com/zhouyangla/p/6392404.html。

路由的跳转可以统一配置：

export default new Router({
  routes: [
    {
      path: '/index',
      name: 'index',
      component: Index,
      meta: {
        keepAlive: true // 需要被缓存
      }
    },
    {
      path: '/new',
      name: 'new',
      component: New,
      meta: {
        keepAlive: true // 需要被缓存
      }
    }
}）

如果地址后面有查询参数可以这样接收：let id = self.$route.params.id;

页面是否需要缓存：可以加上keepAlive字段进行控制，显然主页包括大量的图片是需要缓存的。

监测路由变化：

watch: {
      '$route'(to, from){
        console.log('从' + from.fullPath + '到' + to.fullPath);
        let toStr=to.fullPath;
        let fromStr=from.fullPath;
        if (!toStr.includes('/index')) {
          this.$refs.infiniteLoading.isLoading = true;
        } else {
          this.$refs.infiniteLoading.isLoading = false;
        }
      }
    }

因为是单页应用，所以在主页"跳转后"到其他页面后，有的插件对主页的监听事件还没结束，导致事件继续执行，这时候就可以通过监听路由的方式，灵活的对事件进行控制。

3，es6 import ，需要什么组件直接引入，省略无关开销。

import {Toast} from 'mint-ui'//导入弹窗组件

4，一些小技巧，基于vue自身双向绑定和数据驱动的特性。

li点击高亮，以前的做法就是点击这个li标签，后加上active class，然后移除其他的active。vue可以这样实现：

<li class="item" v-for="item in items" @click="selected(item)" :class="{active: active == item}">{{item}}</li>

selected (item) {
        this.active = item;
 }

需要灵活变动的表单：比如说下拉框最后一个选项支持用户自定义文字，vue可以这样写：

　　selectChange(e){
    if (e.target.value == '自定义文本') {
      this.inputShow = true;//显示文本输入框
     } else {
      this.inputShow = false;//隐藏
     }
     }

5，vue-cli使用webpack打包，优化页面性能，自动解决flex布局等不同浏览器的兼容性问题，给开发提供热加载功能及时响应页面变化，
支持es6和less高级语法等
6，状态管理vux，因为项目中没有状态需要集中管理，所以暂时没用到。

缺点：
1.因为很多插件是直接在网页上引入脚本使用的，不支持import的方式引用。包括cnzz统计脚本等，不能集成到vue中去，给开发带来一些麻烦。
2.有的时候不需要双向绑定，只需要数据单向流动，这时候用vue就比较麻烦

   心得：

　1.开发项目当去实现小功能去网上找插件有的时候是很麻烦的，不光是因为实现的功能不尽人意，还因为引入的大量的多余代码，导致出现未知的 错误。所以有时间尽量自己去造“轮子”，这样才能完美解决问题。

   2.就是vue+es6开发项目很快，以后es6是主流，要逐渐习惯用es6的语法去写代码。

   3.开发一些简单的项目用不到jquery，原生js的要开始熟悉。https://github.com/oneuijs/You-Dont-Need-jQuery