Permalink
Browse files

Update github-file-explorer

github-file-explorer vue2.x版本升级
  • Loading branch information...
xiaoluoboding committed Apr 26, 2017
1 parent a3c45a4 commit 70e8bd4edd418900d7650365ca2082cb16fd7979
@@ -0,0 +1,7 @@
+{
+ "presets": [
+ ["latest", {
+ "es2015": { "modules": false }
+ }]
+ ]
+}
@@ -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">
@@ -13,7 +13,7 @@
</head>
<body>
- <app></app>
+ <div id="app"></div>
<script src="dist/build.js"></script>
</body>
@@ -10,6 +10,6 @@
<template>
<div id="app">
- <github></github>
+ <github />
</div>
</template>
@@ -1,7 +1,7 @@
<script>
export default {
name: "FileExplorer",
- data: function() {
+ data () {
return {
path: '/',
files: []
@@ -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">
@@ -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>
@@ -3,7 +3,7 @@
export default {
name: 'Github',
- data: function() {
+ data () {
return {
fullRepoName: '',
username: '',
@@ -5,6 +5,6 @@ import App from './App.vue'
Vue.use(VueResource)
new Vue({
- el: 'body',
- components: { App }
+ el: '#app',
+ render: h => h(App)
})
@@ -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
+ })
])
}
View
@@ -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.