Skip to content

Commit

Permalink
Update github-file-explorer
Browse files Browse the repository at this point in the history 
github-file-explorer vue2.x版本升级
  • Loading branch information
@xiaoluoboding
xiaoluoboding committed Apr 26, 2017
1 parent a3c45a4 commit 70e8bd4
Show file tree
Hide file tree
Showing 8 changed files with 80 additions and 74 deletions.
7 changes: 7 additions & 0 deletions github-file-explorer/.babelrc
View file
@@ -0,0 +1,7 @@
{
"presets": [
["latest", {
"es2015": { "modules": false }
}]
]
}
4 changes: 2 additions & 2 deletions github-file-explorer/index.html
View file
Expand Up @@ -3,7 +3,7 @@

<head>
<meta charset="utf-8">
<title>Vue Demo GitHub-File-Explorer</title>
<title>Vue2.x Demo GitHub-File-Explorer</title>

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/bootstrap/3.3.6/css/bootstrap.min.css">
Expand All @@ -13,7 +13,7 @@
</head>

<body>
<app></app>
<div id="app"></div>
<script src="dist/build.js"></script>
</body>

Expand Down
2 changes: 1 addition & 1 deletion github-file-explorer/src/App.vue
View file
Expand Up @@ -10,6 +10,6 @@

<template>
<div id="app">
<github></github>
<github />
</div>
</template>
64 changes: 31 additions & 33 deletions github-file-explorer/src/components/FileExplorer.vue
View file
@@ -1,7 +1,7 @@
<script>
export default {
name: "FileExplorer",
data: function() {
data () {
return {
path: '/',
files: []
Expand All @@ -18,58 +18,56 @@
}
},
computed: {
fullRepoUrl: function() {
return this.username + '/' + this.repo;
fullRepoUrl() {
return this.username + '/' + this.repo
},
sortedFiles: function() {
sortedFiles() {
return this.files.slice(0).sort(function(a, b) {
if (a.type !== b.type) {
if (a.type === 'dir') {
return -1;
return -1
} else {
return 1;
return 1
}
} else {
if (a.name < b.name) {
return -1;
return -1
} else {
return 1;
return 1
}
}
});
})
}
},
methods: {
getFiles: function() {
this.$http.get('https://api.github.com/repos/' + this.fullRepoUrl + '/contents' + this.path,
function(data) {
this.files = data;
}
);
getFiles() {
const apiUrl = `https://api.github.com/repos/${this.fullRepoUrl}/contents${this.path}`
this.$http.get(apiUrl).then(response => {
this.files = response.body
});
},
changePath: function(path) {
this.path = '/' + path;
this.getFiles();
changePath(path) {
this.path = '/' + path
this.getFiles()
},
goBack: function() {
this.path = this.path.split('/').slice(0, -1).join('/');
if (this.path === '') this.path = '/';
this.getFiles();
goBack() {
this.path = this.path.split('/').slice(0, -1).join('/')
if (this.path === '') this.path = '/'
this.getFiles()
}
},
watch: {
repo: function(newVal, oldVal) {
this.path = '/';
this.getFiles();
repo(newVal, oldVal) {
this.path = '/'
this.getFiles()
}
},
created: function() {
if (this.username && this.repo) this.getFiles();
created() {
if (this.username && this.repo) this.getFiles()
}
};
}
</script>
<template>
<!-- {{ $data | json }} -->
<div class="row">
<div class="col-md-12 col-sm-12">
<table class="table table-hover">
Expand All @@ -82,19 +80,19 @@
</tr>
</thead>
<tbody>
<tr v-for="file in sortedFiles">
<tr v-for="(file, index) in sortedFiles" :key="index">
<td>
<div class="file" v-if="file.type === 'file'">
<span class="octicon octicon-file-text"></span>
<a href="#"> {{ file.name }}</a>
<a href="#"><span v-text="file.name"></span></a>
</div>
<div class="directory" v-if="file.type === 'dir'">
<span class="octicon octicon-file-directory"></span>
<a href="#" @click="changePath(file.path)"> {{ file.name }}</a>
<a href="#" @click="changePath(file.path)"><span v-text="file.name"></span></a>
</div>
</td>
<td class="text-right">
<a href="{{ file.download_url }}" download="file" v-if="file.type === 'file'">
<a :href="file.download_url" download="file" v-if="file.type === 'file'">
<span class="octicon octicon-cloud-download"></span>
</a>
</td>
Expand Down
2 changes: 1 addition & 1 deletion github-file-explorer/src/components/Github.vue
View file
Expand Up @@ -3,7 +3,7 @@
export default {
name: 'Github',
data: function() {
data () {
return {
fullRepoName: '',
username: '',
Expand Down
4 changes: 2 additions & 2 deletions github-file-explorer/src/main.js
View file
Expand Up @@ -5,6 +5,6 @@ import App from './App.vue'
Vue.use(VueResource)

new Vue({
el: 'body',
components: { App }
el: '#app',
render: h => h(App)
})
42 changes: 23 additions & 19 deletions github-file-explorer/webpack.config.js
View file
Expand Up @@ -8,59 +8,63 @@ module.exports = {
publicPath: '/dist/',
filename: 'build.js'
},
resolveLoader: {
root: path.join(__dirname, 'node_modules'),
},
module: {
loaders: [
rules: [
{
test: /\.vue$/,
loader: 'vue'
loader: 'vue-loader',
options: {
loaders: {
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel',
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.json$/,
loader: 'json'
},
{
test: /\.html$/,
loader: 'vue-html'
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'url',
query: {
limit: 10000,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}

if (process.env.NODE_ENV === 'production') {
module.exports.devtool = '#source-map'
// http://vuejs.github.io/vue-loader/workflow/production.html
// http://vue-loader.vuejs.org/en/workflow/production.html
module.exports.plugins = (module.exports.plugins || []).concat([
new webpack.DefinePlugin({
'process.env': {
NODE_ENV: '"production"'
}
}),
new webpack.optimize.UglifyJsPlugin({
sourceMap: true,
compress: {
warnings: false
}
}),
new webpack.optimize.OccurenceOrderPlugin()
new webpack.LoaderOptionsPlugin({
minimize: true
})
])
}
29 changes: 13 additions & 16 deletions package.json
View file
Expand Up @@ -10,30 +10,27 @@
"build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
},
"dependencies": {
"babel-runtime": "^6.0.0",
"mongoose": "^4.5.7",
"vue": "^1.0.0",
"vue-resource": "^0.7.4",
"vue-router": "^0.7.13",
"vuex": "^0.6.3",
"vux": "^0.1.3"
"vue": "^2.2.1",
"vue-resource": "^1.3.1",
"vue-router": "^2.5.2",
"vuex": "^2.3.1"
},
"devDependencies": {
"babel-core": "^6.0.0",
"babel-loader": "^6.0.0",
"babel-plugin-transform-runtime": "^6.0.0",
"babel-preset-es2015": "^6.0.0",
"babel-preset-stage-2": "^6.0.0",
"cross-env": "^1.0.6",
"css-loader": "^0.23.0",
"file-loader": "^0.8.4",
"babel-preset-latest": "^6.0.0",
"babel-runtime": "^6.0.0",
"cross-env": "^3.0.0",
"css-loader": "^0.25.0",
"file-loader": "^0.9.0",
"json-loader": "^0.5.4",
"url-loader": "^0.5.7",
"vue-hot-reload-api": "^1.2.0",
"vue-html-loader": "^1.0.0",
"vue-loader": "^8.2.1",
"vue-loader": "^11.1.4",
"vue-style-loader": "^1.0.0",
"webpack": "^1.12.2",
"webpack-dev-server": "^1.12.0"
"vue-template-compiler": "^2.2.6",
"webpack": "^2.2.0",
"webpack-dev-server": "^2.2.0"
}
}

0 comments on commit 70e8bd4

Please sign in to comment.