最近几个月在学习Vue.js
并把它应用到实际项目中,在通读官方中文教程之后,前期学习期间Create a GitHub File Explorer Using Vue.js这篇文章给我了较好的启发。于是结合自己最新的学习成果写下这篇总结。
源码地址:github-file-explorer
See DEMO
开发环境搭建
参考官方教程构建大型应用中提到的脚手架工具vue-cli,我初次了解到了webpack
,vue-cli
是一个简单的脚手架,可以帮助你快速地构建 Vue 项目:单文件 Vue 组件,热加载,保存时检查代码,单元测试等功能。vue-cli
中有五个模板,我想用webpack-simple
模板作为demo的开发环境再好不过了。
$> npm install vue-cli -g
创建第一个Vue应用
$> vue init webpack-simple github-file-explorer
$> cd github-file-explorer
$> npm install
$> npm run dev
打开浏览器,输入http://localhost:8080
Boom,你会发现我们创建的第一个Vue应用启动了。
更改默认端口
webpack-simple
集成了webpack-dev-server
,默认启动的端口为8080,端口容易冲突。
翻阅文档,修改配置文件package.json
,更换端口为8090。
"scripts": {
"dev": "webpack-dev-server --inline --hot --port 8090",
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
热重载
webpack
结合vue-loader
以及vue-hot-reload-api
实现了热重载,让开发体验极速提升。保存秒级更新,再也不用reload浏览器了。那些年我们都习惯了F5。
组件化开发体验
项目结构
引入资源
简单vue指令的使用
计算属性
数据观察
组件间数据传递
项目结构
引入资源
在index.html中引入资源,采用jsdelivr
CDN加速。
<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
<!-- Octicons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/octicons/3.5.0/octicons.css">
简单vue指令的使用
v-model
表单控件绑定v-if
根据表达式的值的真假条件渲染元素v-for
列表渲染@click
是v-on:click
的简写,绑定事件监听
计算属性
computed
可以对Vue实例上的数据进行再计算,根据需求,再次拼接fullRepoUrl。
fullRepoUrl: function() {
return this.username + '/' + this.repo;
}
数据观察
watch
可以观察每一个Vue实例上的数据变动。当数据发生变化的时候会触发方法。通过这个机制我们可以实现更换repo来触发列表更新。
watch: {
repo: function(newVal, oldVal) {
this.path = '/';
this.getFiles();
}
}
组件间数据传递
组件(Component)是Vue.js最强大的功能之一。
在官方教程中组件占了绝大部分内容,说明组件在Vue中占有很重要的地位。
下图是我对github-file-explorer
构建的简单组件链。
main.js
,是Vue的根实例,它扩展了App.vue作为父组件。
import Vue from 'vue'
import VueResource from 'vue-resource'
import App from './App.vue'
Vue.use(VueResource)
new Vue({
el: 'body',
components: { App }
})
A,
App
作为父组件,建议App中不写业务逻辑,作为应用的layout,根据需求,做一个布局。比如:Header/Container/Sidebar。B,
Github
是App组件的子组件,同时也是FileExplorer组件的父组件,实现form表单获取github文件API列表。C,
FileExplorer
组件为Github组件的子组件,实现列表清单。
组件关系:App > Github > FileExplorer
父组件与子组件间通讯(使用Props传递数据):
组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用
props
把数据传给子组件。
父组件Github通过动态绑定Props向子组件传递数据
<file-explorer :username="username" :repo="repo"></file-explorer>
子组件FileExplorer通过Props接收父组件传递的数据
props: {
username: {
type: String,
required: true
},
repo: {
type: String,
required: true
}
},
使用Vue插件
vue-resource,通过 XMLHttpRequest 或 JSONP 发起请求并处理响应
通过vue-resource请求github的API
getFiles: function() {
this.$http.get('https://api.github.com/repos/' + this.fullRepoUrl + '/contents' + this.path,
function(data) {
this.files = data;
}
);
}
使用Vue Devtools提升开发效率
下图是对github-file-explorer
组件链作用域的简单演示
Vue Devtools
可以大大提升Vue应用的调试效率,再也不用{{ $data | json }}
打印调试数据了,并且它还可以调试Vuex,当你在使用Vuex时候可能对数据流转很困惑。那么使用Vue DevTools中的Vuex调试工具可以解决你的烦恼。关于Vuex的使用后续我会再写篇文章总结下,很好用的状态管理插件。不过Vue Devtools目前只有Chrome。意味着你只能在Chrome浏览器中才能使用Vue Devtools。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。