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

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

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

• Element UI 样式框架文档
• ECharts 图形绘制文档
• stylus 语法文档,区别于传统css语法
• css 动画样式文档
• HTML CSS 特殊字符表
• css 中content内容特殊形状

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 ) # 项目创建者
  ❯ 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的内容如下

这样就可以直接将时间戳转成日期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文件中如何写

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

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

---

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

  vue init GitMen/webpack

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

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

搞事情