这里我会更细致的讲解vue的一些使用，但是语法什么的大家还是仔细看看文档吧～，包括如何自定义webpack项目模版，没有接触过vue的同学，可以先了解下vue的一些语法什么的，前往时空隧道：vue官方文档

先给大家推荐一些我常用的文档吧

Vue项目搭建

这里使用的是vue-cli脚手架,webpack包管理，我的设备是mac, 不知道window上是否是一样的操作～

打开终端工具，命令行输入如下

  npm install -g vue-cli # 全局安装vue-cli脚手架
  vue init webpack vueDemo #初始化vue项目 vueDemo：文件夹名称

之后会提示输入一些内容,如下

  ? Project name (vueDemo) #输入你的项目名称
  ? Project description (A Vue.js project) #输入项目描述
  ? Author (zhangdinghui <zhangdinghui@icourt.cn>) # 项目创建者
  ❯ Runtime + Compiler: recommended for most users # 直接回车即可
  ? Install vue-router? (Y/n) #输入y, 安装路由管理器
  ? Use ESLint to lint your code? (Y/n) # 选择y, 强烈推荐使用eslint规范代码
  ❯ Standard (https://github.com/standard/standard) # 直接回车
  ? Set up unit tests (Y/n) # 是否建立单元测试，我选择的是n,看情况定吧
  ? Setup e2e tests with Nightwatch? (Y/n) #选择n
  ? Should we run `npm install` for you after the project has been created? # 选择 Yes, use NPM

到这里一个新vue项目就初始化成功了，接着让我们运行一下项目看看效果

  cd vueDemo # 进行项目文件夹内
  npm run dev # 运行项目dev环境 输入localhost:8080 就能看到vue项目了

接下来我们看一下项目结构

bulid: 项目构建打包的一些配置文件
config: 项目环境配置
node_modules: 项目中使用到的依赖包
src: 项目主入口

assets: 静态资源，logo等一些图标
components: 组件文件夹，因为vue是单文件结构，每一个页面都是一个组件
router: 路由管理

接下来看一下package.json文件
其中

  "scripts": {
    "dev": "webpack-dev-server --inline --progress --config     build/webpack.dev.conf.js", # 用户本地编译, npm run dev
    "start": "npm run dev", # rpm start 和 npm run dev 一个效果
    "lint": "eslint --ext .js,.vue src",
    "build": "node build/build.js" # rpm run build 构建项目用于部署，构建完成后项目内会生成dist包
  },

filters的使用

很多时候后台接口给我们返回的时间都是时间戳格式，之前我们都是在获取到数据后将时间戳转成string格式在放到html标签中显示，现在用到filters后就方便多了

在刚初始化的项目中src目录下增加filters文件夹，创建index.js文件，内容如下

import Vue from 'vue'

Vue.filter('timestampFormat', function (time, format) {
  var date = new Date(time)
  var map = {
    'M+': date.getMonth() + 1,
    'd+': date.getDate(),
    'h+': date.getHours() % 12 === 0 ? 12 : date.getHours() % 12,
    'H+': date.getHours(),
    'm+': date.getMinutes(),
    's+': date.getSeconds()
  }
  if (/(y+)/.test(format)) {
    format = format.replace(RegExp.$1, (date.getFullYear() + '').substr(4 - RegExp.$1.length))
  }
  for (var key in map) {
    if (new RegExp(`(${key})`).test(format)) {
      format = format.replace(RegExp.$1, RegExp.$1.length === 1 ? map[key] : numHelper(map[key]))
    }
  }
  return format
})

function numHelper (num) {
  if (num < 10) {
    return '0' + num
  } else {
    return num + ''
  }
}

上述代码就是定义了一个时间戳转日期string的一个filter方法，下面就是如何使用它, 修改
src->components->HelloWorld.vue的内容如下

<template>
  <div class="hello">
      <div>{{timestamp | timestampFormat('yyyy-MM-dd')}}</div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      timestamp: 1535175345000
    }
  }
}
</script>

<style lang="stylus" scoped>
</style>

这样就可以直接将时间戳转成日期string了，试试吧

directives的使用

directives 主要是绑定html标签，拿到dom节点并监听属性变化后做一些事物处理，这里用上拉加载更多数据来做演示～

在src下创建directives文件夹，并新增loadmore.js文件，内容如下

export default {
  inserted (el, binding) {
    var loading = false
    el.addEventListener('scroll', (event) => {
      var func = binding.value
      if (!func) return
      var scrollHeight = el.scrollHeight
      var scrollTop = el.scrollTop
      var offsetHeight = el.offsetHeight
      if (scrollTop >= scrollHeight - offsetHeight - 40) {
        if (!loading) {
          loading = true
          var p = () => { loading = false }
          func(p)
        }
      }
    }, { passive: true })
  }
}

这里监听的是节点scroll属性，当滚动距离与内容高度相差40的时候通知绑定者并传入一个callback,在callback没返回之前不在处理滚动事件, 接下来我们接着看vue文件中如何写

<template>
  <div class="hello">
      <!-- v-loadmore 是vue语法，这里给div绑定了上拉加载更多，触发后会执行loadmoreEvent方法-->
      <div class="list-box" v-loadmore="loadmoreEvent">
        <div v-for="item in list" :key="item" class="list">{{item}}</div>
      </div>
  </div>
</template>

<script>
// 引用刚创建的文件
import loadmore from '@/directives/loadmore'

export default {
  name: 'HelloWorld',
  // 项目引用loadmore
  directives: { loadmore },
  data () {
    return {
      // 定义一个数组
      list: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
    }
  },
  methods: {
    loadmoreEvent (callback) {
      // 增加数据,这里一般是网络请求
      this.list.push(...this.list.map(item => {
        return item + this.list.length
      }))
      // 通过callback() 告知loadmore可以继续了～
      callback()
    }
  }
}
</script>

<style lang="stylus" scoped>
.hello
  width 100%
  height 100%
  display flex
  justify-content center
  flex-direction column
  align-items center
  overflow hidden
.list-box
  width 50px
  height 200px
  border 1px #000 solid
  overflow scroll
  .list
    width 100%
    padding 10px 0px
    font-size 14px
    display flex
    justify-content center
    border-bottom 1px solid #000
</style>

一波操作后是不是觉得很酷炫呢～

自定义Vue-cli的webpack项目模版

我之前按照我自己的项目规范创建了一个项目模版，大家可以先试一下
打开命令行工具,输入

  vue init GitMen/webpack

是不是与之前 init webpack有很大区别呢～

推荐给搭建一篇文章，讲的很细致，所以我就不讲这里了～写文章太累
有兴趣的同学前往自定义自己的vue-cli模板

搞事情

Vue项目的搭建和以及filters和directives的使用