Vue实践小结

一、用Vue改造React的一个Demo

Game 2048

https://github.com/pengfu/vue-2048

二、快速搭建Vue开发环境

利用官方脚手架工具快速初始化项目

项目：https://github.com/vuejs-templates/webpack

步骤：

$npm install -g vue-cli

$vue init webpack my-project

$cd my-project

$npm install

$npm run dev

三、开发相关参考

官方开发文档

https://cn.vuejs.org/

Vue-router文档

https://router.vuejs.org/zh-cn/

UI框架

https://github.com/museui/muse-ui star:2.6k

https://github.com/ElemeFE/mint-ui star:5.5k

https://github.com/ElemeFE/element star: 11.8k

https://github.com/iview/iview star: 5.9k

学习优秀代码

Vue-awesome https://github.com/vuejs/awesome-vue

四、项目实践

1、如何显示聊天内容中的qq表情，emoij表情？

使用多级过滤器

分别用qq表情、emoij表情过滤

2、如何显示多层次的部门架构？

使用递归组件

递归组件展示部门树

五、Vue中使用JS库

1、全局变量引入

在入口文件entry.js中引用，

Window.jQuery = require(‘jqurey’)

export default {

created() {

jQuery.parseJson()

}

}

2、在所有使用的文件中分别引用

MyComponent.vue

import jQuery from jquery;

export default {

created() {

jQuery.parseJson()

}

}

3、更好的方式

entry.js

import moment from 'moment';

Object.defineProperty(Vue.prototype, '$moment', { value:

moment });

MyNewComponent.vue

export default {

created() {

console.log('The time is ' . this.$moment().format("HH:mm"));

}

}

Vue.prototype.$moment = moment;

Object.defineProperty有另外一个优点：防止定义的函数被篡改，更加健壮。

5、写成Vue plugin

axios.js

importaxiosfrom 'axios';

export default {

install: function(Vue,) {

Object.defineProperty(Vue.prototype, '$http', { value:axios});

}

}