一、用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
三、开发相关参考
官方开发文档
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表情？
使用多级过滤器
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});
}
}
