vue2 实践小结

[Hugo-seth]

vue2出来也一段时间了，各方面的反响都挺好的，作为一个一直在用 ng1 的前端，必须找时间熟悉一下大热的 vue2。虽然工作上还在用 ng1，但我自己前段时间闲暇时也做了个 ng2 的 demo 项目。有了 ng1比较足的经验和 ng2 的小试牛刀，vue2 对于我可以说是上手毫无难度的。

我选的是 github 的 api 来提供数据， vue2 做前端展示。效果点击查看，源码，欢迎各位大大拍砖。

其实也只是简单的尝试了下 vue2，并没有用到很深的东西，用到的全家桶也只有 vue-router，当然也因为 vue-resource 被尤大抛弃了，不过确实不好用，所以我选的是 axios 。

为了快速起步，肯定选 vue-cli 脚手架，按照示例很简单就能跑起来了。下面遇到的问题基本都是文档写的不详细导致的，这不是故意黑，对比 ng2 的文档，确实差点意思。

vue-router

当我把 vue-router 引入之后，突然发现不知道怎么启动。因为文档的例子是报错的，应该是不兼容用 vue-cli 下的项目，所以我去 github 搜了好几个 rep 才找到正确的写法，因为大部分的 rep 用的还是 vue1。

import VueRouter from 'vue-router'

Vue.use(VueRouter)

const NotFound = { template: '<div>not-found</div>' }
const routes = [
  { path: '/articles', component: HomePage },
  { path: '/articles/:number', component: ArticleDetail },
  { path: '', redirect: '/articles' },
  { path: '*', component: NotFound }
]

const router = new VueRouter({
  routes: routes
})

const app = new Vue({
  router: router,// 或简写成 router //(ES6)
  render: h => h(App)
}).$mount('#app')

routes 的顺序一定不能错了，路由是按顺序来匹配的，如果把 * 写在最前面，那么所有的路由将返回 NotFound 组件。这里是用来匹配 404 的，当然页面的样式可以随意设计，我这里只是为了演示。

<router-link> 应该是不能用相对路径的，这个有点不好用。<router-link> 的 to 属性不写或者 <a> 的 href 属性值为空或者 # 都是匹配到空（ '' ）路径，而不是像 ng1 的 ui-router 那样不跳转。而且 template 里是不能用 <a> 做跳转的，这个有点坑。

props

向子组件传递数据是经常会用到的，一般是在子组件定义 props 来接受数据，当父组件改变数据时子组件的数据也会进行更新。但这里是有一个坑的，先看代码：

<pagination :params="params"></pagination>

data: function() {
  return {
    params: {
      per_page: 3
    }
  }
},
created: function() {
  this.params.page = 1;
}

// child-component

<p> {{ params.per_page }} {{ params.page }} </p>// 3 1

props: {
   total: Number,
   params: Object
}

这里传递的是一个 object，在父组件中定义一个方法改变 params 的 per_page 和 page 的值，但子组件只有 params.per_page 的值更新了，page 的值是没有更新的。这是因为 vue 只会跟踪 data 函数里定义的变量，所以想要 page 也更新，在 data 的 params 里加上 page 属性就行了。

methods: {
  changeParams() {
    this.params.per_page = 5
    this.params.page = 2   
  }
}

// child-component

<p> {{ params.per_page }} {{ params.page }} </p>// 5 1

public-filter

vue 的文档只大概的介绍了怎么定义一个 filter，虽然也提到了在 vue 实例上定义公用 filter，但是并没有说明怎么在组件中使用定义好的公用 filter。这对像我一样刚接触 vue 的还是有点头疼。我探索了一会实现了，简直非常简单。首先，先定义，然后 import 就行了。

// fileName: formatDate.js

import Vue from 'vue'

Vue.filter('formatDate', function(value) {
  return new Date(value).toLocaleString()
})

const formatDate = Vue.filter('formatDate')

export default formatDate

// component

<p>Posted at {{article.created_at | formatDate}}</p> 

import formatDate from '../filters/formatDate.js'

当然不止是 filter，所有公用的 component、directive 都是一样的。

vue-cli

最后谈谈 vue-cli 脚手架的一个小问题，我下载的是基于 webpack 的项目配置。当我们运行 npm run build 编译打包我们的文件时，dist 目录的所有跟路径有关的如 css、js 的引入还有 css 里的图片都是绝对路径也就是根路径 / 。这个对于很多把 dist 目录下的文件放在网站的根目录下是没有任何问题的。但我是部署到 github-page （hugo-seth.github.io/blog/）上的，这个地址的根路径其实是 hugo-seth.github.io ，这个时候就会有问题了，所有的资源都是 404 ，网站是没办法用的，我是这样解决的，首先 打开 config 目录的 index.js 文件，把里面的build 的 assetsPublicPath 改为 ./

这样设置之后 dist 的 index.html 里的链接是没有问题了，但 css 里的图片引用还是有问题，所以我找了个 node 插件 replace-in-file，照文档写了个替换 css 里替换字符串路径的 js，如图，文件是 build/replace.js

但 template 里的图片路径有没问题我不太清楚，因为我没用到，不过就算有问题的话，在 replace.js 里加几行 js 就行了，这个就留给读者自己去探索了。