diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..13f0e47
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,14 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "comments": false,
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..268e3e7
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,56 @@
+*.py[cod]
+
+# C extensions
+*.so
+
+# Packages
+*.egg
+*.egg-info
+dist
+#build
+eggs
+parts
+bin
+var
+sdist
+develop-eggs
+.installed.cfg
+lib
+lib64
+__pycache__
+
+# Installer logs
+pip-log.txt
+
+# Unit test / coverage reports
+.coverage
+.tox
+nosetests.xml
+
+# Translations
+*.mo
+
+# Mr Developer
+.mr.developer.cfg
+.project
+.pydevproject
+
+# SQLite databases
+*.sqlite
+
+# Virtual environment
+venv/
+myenv/
+.env
+
+backup
+.idea
+
+# webpack map
+*.map
+platforms/
+plugins/
+node_modules/
+platforms/
+dump.rdb
+package-lock.json
diff --git a/.postcssrc.js b/.postcssrc.js
new file mode 100644
index 0000000..ea9a5ab
--- /dev/null
+++ b/.postcssrc.js
@@ -0,0 +1,8 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  "plugins": {
+    // to edit target browsers: use "browserlist" field in package.json
+    "autoprefixer": {}
+  }
+}
diff --git a/build/build.js b/build/build.js
new file mode 100644
index 0000000..6b8add1
--- /dev/null
+++ b/build/build.js
@@ -0,0 +1,35 @@
+require('./check-versions')()
+
+process.env.NODE_ENV = 'production'
+
+var ora = require('ora')
+var rm = require('rimraf')
+var path = require('path')
+var chalk = require('chalk')
+var webpack = require('webpack')
+var config = require('../config')
+var webpackConfig = require('./webpack.prod.conf')
+
+var spinner = ora('building for production...')
+spinner.start()
+
+rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => {
+  if (err) throw err
+  webpack(webpackConfig, function (err, stats) {
+    spinner.stop()
+    if (err) throw err
+    process.stdout.write(stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false
+    }) + '\n\n')
+
+    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.yellow(
+      '  Tip: built files are meant to be served over an HTTP server.\n' +
+      '  Opening index.html over file:// won\'t work.\n'
+    ))
+  })
+})
diff --git a/build/check-versions.js b/build/check-versions.js
new file mode 100644
index 0000000..6548ba1
--- /dev/null
+++ b/build/check-versions.js
@@ -0,0 +1,45 @@
+var chalk = require('chalk')
+var semver = require('semver')
+var packageConfig = require('../package.json')
+
+function exec (cmd) {
+  return require('child_process').execSync(cmd).toString().trim()
+}
+
+var versionRequirements = [
+  {
+    name: 'node',
+    currentVersion: semver.clean(process.version),
+    versionRequirement: packageConfig.engines.node
+  },
+  {
+    name: 'npm',
+    currentVersion: exec('npm --version'),
+    versionRequirement: packageConfig.engines.npm
+  }
+]
+
+module.exports = function () {
+  var warnings = []
+  for (var i = 0; i < versionRequirements.length; i++) {
+    var mod = versionRequirements[i]
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+      warnings.push(mod.name + ': ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.green(mod.versionRequirement)
+      )
+    }
+  }
+
+  if (warnings.length) {
+    console.log('')
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log()
+    for (var i = 0; i < warnings.length; i++) {
+      var warning = warnings[i]
+      console.log('  ' + warning)
+    }
+    console.log()
+    process.exit(1)
+  }
+}
diff --git a/build/dev-client.js b/build/dev-client.js
new file mode 100644
index 0000000..18aa1e2
--- /dev/null
+++ b/build/dev-client.js
@@ -0,0 +1,9 @@
+/* eslint-disable */
+require('eventsource-polyfill')
+var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true')
+
+hotClient.subscribe(function (event) {
+  if (event.action === 'reload') {
+    window.location.reload()
+  }
+})
diff --git a/build/dev-server.js b/build/dev-server.js
new file mode 100644
index 0000000..cc96300
--- /dev/null
+++ b/build/dev-server.js
@@ -0,0 +1,81 @@
+require('./check-versions')()
+
+var config = require('../config')
+if (!process.env.NODE_ENV) {
+  process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV)
+}
+
+var opn = require('opn')
+var path = require('path')
+var express = require('express')
+var webpack = require('webpack')
+var proxyMiddleware = require('http-proxy-middleware')
+var webpackConfig = require('./webpack.dev.conf')
+
+// default port where dev server listens for incoming traffic
+var port = process.env.PORT || config.dev.port
+// automatically open browser, if not set will be false
+var autoOpenBrowser = !!config.dev.autoOpenBrowser
+// Define HTTP proxies to your custom API backend
+// https://github.com/chimurai/http-proxy-middleware
+var proxyTable = config.dev.proxyTable
+
+var app = express()
+var compiler = webpack(webpackConfig)
+
+var devMiddleware = require('webpack-dev-middleware')(compiler, {
+  publicPath: webpackConfig.output.publicPath,
+  quiet: true
+})
+
+var hotMiddleware = require('webpack-hot-middleware')(compiler, {
+  log: () => {}
+})
+// force page reload when html-webpack-plugin template changes
+compiler.plugin('compilation', function (compilation) {
+  compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) {
+    hotMiddleware.publish({ action: 'reload' })
+    cb()
+  })
+})
+
+// proxy api requests
+Object.keys(proxyTable).forEach(function (context) {
+  var options = proxyTable[context]
+  if (typeof options === 'string') {
+    options = { target: options }
+  }
+  app.use(proxyMiddleware(options.filter || context, options))
+})
+
+// handle fallback for HTML5 history API
+app.use(require('connect-history-api-fallback')())
+
+// serve webpack bundle output
+app.use(devMiddleware)
+
+// enable hot-reload and state-preserving
+// compilation error display
+app.use(hotMiddleware)
+
+// serve pure static assets
+var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory)
+app.use(staticPath, express.static('./static'))
+
+var uri = 'http://localhost:' + port
+
+devMiddleware.waitUntilValid(function () {
+  console.log('> Listening at ' + uri + '\n')
+})
+
+module.exports = app.listen(port, function (err) {
+  if (err) {
+    console.log(err)
+    return
+  }
+
+  // when env is testing, don't need open it
+  if (autoOpenBrowser && process.env.NODE_ENV !== 'testing') {
+    opn(uri)
+  }
+})
diff --git a/build/utils.js b/build/utils.js
new file mode 100644
index 0000000..3f2ef2a
--- /dev/null
+++ b/build/utils.js
@@ -0,0 +1,71 @@
+var path = require('path')
+var config = require('../config')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+
+exports.assetsPath = function (_path) {
+  var assetsSubDirectory = process.env.NODE_ENV === 'production'
+    ? config.build.assetsSubDirectory
+    : config.dev.assetsSubDirectory
+  return path.posix.join(assetsSubDirectory, _path)
+}
+
+exports.cssLoaders = function (options) {
+  options = options || {}
+
+  var cssLoader = {
+    loader: 'css-loader',
+    options: {
+      minimize: process.env.NODE_ENV === 'production',
+      sourceMap: options.sourceMap
+    }
+  }
+
+  // generate loader string to be used with extract text plugin
+  function generateLoaders (loader, loaderOptions) {
+    var loaders = [cssLoader]
+    if (loader) {
+      loaders.push({
+        loader: loader + '-loader',
+        options: Object.assign({}, loaderOptions, {
+          sourceMap: options.sourceMap
+        })
+      })
+    }
+
+    // Extract CSS when that option is specified
+    // (which is the case during production build)
+    if (options.extract) {
+      return ExtractTextPlugin.extract({
+        use: loaders,
+        fallback: 'vue-style-loader'
+      })
+    } else {
+      return ['vue-style-loader'].concat(loaders)
+    }
+  }
+
+  // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html
+  return {
+    css: generateLoaders(),
+    postcss: generateLoaders(),
+    less: generateLoaders('less'),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
+    scss: generateLoaders('sass'),
+    stylus: generateLoaders('stylus'),
+    styl: generateLoaders('stylus')
+  }
+}
+
+// Generate loaders for standalone style files (outside of .vue)
+exports.styleLoaders = function (options) {
+  var output = []
+  var loaders = exports.cssLoaders(options)
+  for (var extension in loaders) {
+    var loader = loaders[extension]
+    output.push({
+      test: new RegExp('\\.' + extension + '$'),
+      use: loader
+    })
+  }
+  return output
+}
diff --git a/build/vue-loader.conf.js b/build/vue-loader.conf.js
new file mode 100644
index 0000000..7aee79b
--- /dev/null
+++ b/build/vue-loader.conf.js
@@ -0,0 +1,12 @@
+var utils = require('./utils')
+var config = require('../config')
+var isProduction = process.env.NODE_ENV === 'production'
+
+module.exports = {
+  loaders: utils.cssLoaders({
+    sourceMap: isProduction
+      ? config.build.productionSourceMap
+      : config.dev.cssSourceMap,
+    extract: isProduction
+  })
+}
diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js
new file mode 100644
index 0000000..c3930d9
--- /dev/null
+++ b/build/webpack.base.conf.js
@@ -0,0 +1,58 @@
+var path = require('path')
+var utils = require('./utils')
+var config = require('../config')
+var vueLoaderConfig = require('./vue-loader.conf')
+
+function resolve (dir) {
+  return path.join(__dirname, '..', dir)
+}
+
+module.exports = {
+  entry: {
+    app: './src/main.js'
+  },
+  output: {
+    path: config.build.assetsRoot,
+    filename: '[name].js',
+    publicPath: process.env.NODE_ENV === 'production'
+      ? config.build.assetsPublicPath
+      : config.dev.assetsPublicPath
+  },
+  resolve: {
+    extensions: ['.js', '.vue', '.json'],
+    alias: {
+      'vue$': 'vue/dist/vue.esm.js',
+      '@': resolve('src'),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.vue$/,
+        loader: 'vue-loader',
+        options: vueLoaderConfig
+      },
+      {
+        test: /\.js$/,
+        loader: 'babel-loader',
+        include: [resolve('src'), resolve('test')]
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+        }
+      },
+      {
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        loader: 'url-loader',
+        query: {
+          limit: 10000,
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+        }
+      }
+    ]
+  }
+}
diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js
new file mode 100644
index 0000000..5470402
--- /dev/null
+++ b/build/webpack.dev.conf.js
@@ -0,0 +1,35 @@
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+
+// add hot-reload related code to entry chunks
+Object.keys(baseWebpackConfig.entry).forEach(function (name) {
+  baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name])
+})
+
+module.exports = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap })
+  },
+  // cheap-module-eval-source-map is faster for development
+  devtool: '#cheap-module-eval-source-map',
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': config.dev.env
+    }),
+    // https://github.com/glenjamin/webpack-hot-middleware#installation--usage
+    new webpack.HotModuleReplacementPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
+    // https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: 'index.html',
+      template: 'index.html',
+      inject: true
+    }),
+    new FriendlyErrorsPlugin()
+  ]
+})
diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js
new file mode 100644
index 0000000..23d408d
--- /dev/null
+++ b/build/webpack.prod.conf.js
@@ -0,0 +1,114 @@
+var path = require('path')
+var utils = require('./utils')
+var webpack = require('webpack')
+var config = require('../config')
+var merge = require('webpack-merge')
+var baseWebpackConfig = require('./webpack.base.conf')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
+const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
+	
+var env = config.build.env
+
+var webpackConfig = merge(baseWebpackConfig, {
+  module: {
+    rules: utils.styleLoaders({
+      sourceMap: config.build.productionSourceMap,
+      extract: true
+    })
+  },
+  devtool: config.build.productionSourceMap ? '#source-map' : false,
+  output: {
+    path: config.build.assetsRoot,
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+  },
+  plugins: [
+    // http://vuejs.github.io/vue-loader/en/workflow/production.html
+    new webpack.DefinePlugin({
+      'process.env': env
+    }),
+    new UglifyJsPlugin({
+      sourceMap: true
+    }),
+    // extract css into its own file
+    new ExtractTextPlugin({
+      filename: utils.assetsPath('css/[name].[contenthash].css')
+    }),
+    // Compress extracted CSS. We are using this plugin so that possible
+    // duplicated CSS from different components can be deduped.
+    new OptimizeCSSPlugin(),
+    // generate dist index.html with correct asset hash for caching.
+    // you can customize output by editing /index.html
+    // see https://github.com/ampedandwired/html-webpack-plugin
+    new HtmlWebpackPlugin({
+      filename: config.build.index,
+      template: 'index.html',
+      inject: true,
+      minify: {
+        removeComments: true,
+        collapseWhitespace: true,
+        removeAttributeQuotes: true
+        // more options:
+        // https://github.com/kangax/html-minifier#options-quick-reference
+      },
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      chunksSortMode: 'dependency'
+    }),
+    // split vendor js into its own file
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'vendor',
+      minChunks: function (module, count) {
+        // any required modules inside node_modules are extracted to vendor
+        return (
+          module.resource &&
+          /\.js$/.test(module.resource) &&
+          module.resource.indexOf(
+            path.join(__dirname, '../node_modules')
+          ) === 0
+        )
+      }
+    }),
+    // extract webpack runtime and module manifest to its own file in order to
+    // prevent vendor hash from being updated whenever app bundle is updated
+    new webpack.optimize.CommonsChunkPlugin({
+      name: 'manifest',
+      chunks: ['vendor']
+    }),
+    // copy custom static assets
+    new CopyWebpackPlugin([
+      {
+        from: path.resolve(__dirname, '../static'),
+        to: config.build.assetsSubDirectory,
+        ignore: ['.*']
+      }
+    ])
+  ]
+})
+
+if (config.build.productionGzip) {
+  var CompressionWebpackPlugin = require('compression-webpack-plugin')
+
+  webpackConfig.plugins.push(
+    new CompressionWebpackPlugin({
+      asset: '[path].gz[query]',
+      algorithm: 'gzip',
+      test: new RegExp(
+        '\\.(' +
+        config.build.productionGzipExtensions.join('|') +
+        ')$'
+      ),
+      threshold: 10240,
+      minRatio: 0.8
+    })
+  )
+}
+
+if (config.build.bundleAnalyzerReport) {
+  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
+  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
+}
+
+module.exports = webpackConfig
diff --git a/config/dev.env.js b/config/dev.env.js
new file mode 100644
index 0000000..efead7c
--- /dev/null
+++ b/config/dev.env.js
@@ -0,0 +1,6 @@
+var merge = require('webpack-merge')
+var prodEnv = require('./prod.env')
+
+module.exports = merge(prodEnv, {
+  NODE_ENV: '"development"'
+})
diff --git a/config/index.js b/config/index.js
new file mode 100644
index 0000000..cf631f8
--- /dev/null
+++ b/config/index.js
@@ -0,0 +1,38 @@
+// see http://vuejs-templates.github.io/webpack for documentation.
+var path = require('path')
+
+module.exports = {
+  build: {
+    env: require('./prod.env'),
+    index: path.resolve(__dirname, '../dist/index.html'),
+    assetsRoot: path.resolve(__dirname, '../dist'),
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '',
+    productionSourceMap: true,
+    // Gzip off by default as many popular static hosts such as
+    // Surge or Netlify already gzip all static assets for you.
+    // Before setting to `true`, make sure to:
+    // npm install --save-dev compression-webpack-plugin
+    productionGzip: false,
+    productionGzipExtensions: ['js', 'css'],
+    // Run the build command with an extra argument to
+    // View the bundle analyzer report after build finishes:
+    // `npm run build --report`
+    // Set to `true` or `false` to always turn it on or off
+    bundleAnalyzerReport: process.env.npm_config_report
+  },
+  dev: {
+    env: require('./dev.env'),
+    port: 8080,
+    autoOpenBrowser: true,
+    assetsSubDirectory: 'static',
+    assetsPublicPath: '',
+    proxyTable: {},
+    // CSS Sourcemaps off by default because relative paths are "buggy"
+    // with this option, according to the CSS-Loader README
+    // (https://github.com/webpack/css-loader#sourcemaps)
+    // In our experience, they generally work as expected,
+    // just be aware of this issue when enabling this option.
+    cssSourceMap: false
+  }
+}
diff --git a/config/prod.env.js b/config/prod.env.js
new file mode 100644
index 0000000..773d263
--- /dev/null
+++ b/config/prod.env.js
@@ -0,0 +1,3 @@
+module.exports = {
+  NODE_ENV: '"production"'
+}
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..9fd7f14
--- /dev/null
+++ b/index.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <!-- Required meta tags-->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
+    <meta name="apple-mobile-web-app-capable" content="yes">
+    <!-- Color theme for statusbar -->
+    <meta name="theme-color" content="#2196f3">
+    <!-- Your app title -->
+    <title>My App</title>
+    <!-- Path to Framework7 Library CSS, Material Theme -->
+    <link href="https://cdn.bootcss.com/framework7/2.0.6/css/framework7.min.css" rel="stylesheet">
+    <script defer src="https://use.fontawesome.com/releases/v5.0.4/js/all.js"></script>
+    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
+    <!-- Path to your custom app styles-->
+    <!-- <link rel="stylesheet" href="path/to/my-app.css"> -->
+    <!-- built style files will be auto injected -->
+</head>
+
+<body>
+    <div id="app"></div>
+    <!-- built script files will be auto injected -->
+</body>
+
+</html>
diff --git a/package.json b/package.json
new file mode 100644
index 0000000..af68327
--- /dev/null
+++ b/package.json
@@ -0,0 +1,81 @@
+{
+  "name": "framework7-vue-webpack-template",
+  "version": "1.0.1",
+  "description": "Framework7 Vue + Webpack starter app template",
+  "scripts": {
+    "dev": "node build/dev-server.js",
+    "build": "node build/build.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/nolimits4web/Framework7-Vue-Webpack-Template.git"
+  },
+  "keywords": [
+    "ios",
+    "webpack",
+    "framework7",
+    "vue",
+    "vuejs",
+    "material",
+    "mobile",
+    "app",
+    "f7"
+  ],
+  "author": "Vladimir Kharlampidi",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/nolimits4web/Framework7-Vue-Webpack-Template/issues"
+  },
+  "homepage": "http://framework7.io/vue/",
+  "dependencies": {
+    "framework7": "^2.0.6",
+    "framework7-vue": "^2.0.0",
+    "vue": "^2.5.13"
+  },
+  "devDependencies": {
+    "autoprefixer": "^6.7.2",
+    "babel-core": "^6.22.1",
+    "babel-loader": "^6.2.10",
+    "babel-plugin-transform-runtime": "^6.22.0",
+    "babel-preset-env": "^1.2.1",
+    "babel-preset-stage-2": "^6.22.0",
+    "babel-register": "^6.22.0",
+    "chalk": "^1.1.3",
+    "connect-history-api-fallback": "^1.3.0",
+    "copy-webpack-plugin": "^4.0.1",
+    "css-loader": "^0.26.1",
+    "eventsource-polyfill": "^0.9.6",
+    "express": "^4.14.1",
+    "extract-text-webpack-plugin": "^2.0.0",
+    "file-loader": "^0.10.0",
+    "friendly-errors-webpack-plugin": "^1.1.3",
+    "function-bind": "^1.1.0",
+    "html-webpack-plugin": "^2.28.0",
+    "http-proxy-middleware": "^0.17.3",
+    "opn": "^4.0.2",
+    "optimize-css-assets-webpack-plugin": "^1.3.0",
+    "ora": "^1.1.0",
+    "rimraf": "^2.6.0",
+    "semver": "^5.3.0",
+    "uglify-es": "^3.3.9",
+    "uglifyjs-webpack-plugin": "^1.1.8",
+    "url-loader": "^0.5.7",
+    "vue-loader": "^11.1.4",
+    "vue-style-loader": "^2.0.0",
+    "vue-template-compiler": "^2.2.4",
+    "webpack": "^3.10.0",
+    "webpack-bundle-analyzer": "^2.2.1",
+    "webpack-dev-middleware": "^1.10.0",
+    "webpack-hot-middleware": "^2.16.1",
+    "webpack-merge": "^2.6.1"
+  },
+  "engines": {
+    "node": ">= 4.0.0",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}
diff --git a/src/app.vue b/src/app.vue
new file mode 100644
index 0000000..f14d953
--- /dev/null
+++ b/src/app.vue
@@ -0,0 +1,14 @@
+<template>
+    <!-- App -->
+    <div id="app">
+        <f7-statusbar></f7-statusbar>
+        <f7-view url="/" :main="true" class="ios-edges"></f7-view>
+    </div>
+</template>
+<script>
+export default {
+  name: 'App', 
+  mounted() {
+    },
+}
+</script>
diff --git a/src/assets/css/.gitkeep b/src/assets/css/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/fonts/.gitkeep b/src/assets/fonts/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/images/.gitkeep b/src/assets/images/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/js/.gitkeep b/src/assets/js/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/json/.gitkeep b/src/assets/json/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/assets/sass/.gitkeep b/src/assets/sass/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/f7-table.vue b/src/components/f7-table.vue
new file mode 100644
index 0000000..d8a5a3f
--- /dev/null
+++ b/src/components/f7-table.vue
@@ -0,0 +1,165 @@
+<template>
+    <div class="data-table data-table-init card" id="data_table">
+        <div class="card-header">
+            <div class="data-table-header">
+                <f7-label v-if="querydata.total>0">{{querydata.from}}-{{querydata.to}} of {{querydata.total}}</f7-label>
+                <f7-label v-else="querydata.total==0">No data available</f7-label>
+                <div class="data-table-actions">
+                    <f7-list form form-store-data inline-labels>
+                        <f7-list-item :title="per_page.title" class="per-page text-color-gray">
+                            <f7-input type="select" placeholder="Please choose..." @input="per_page.selected = $event.target.value" :value="per_page.selected">
+                                <option :value="index" v-for="(item, index) of per_page.data">{{item}}</option>
+                            </f7-input>
+                            <!-- pagination -->
+                            <f7-link @click="page_change(querydata.current_page-1)">
+				    <span v-show="querydata.current_page>1"><f7-icon icon="fas fa-chevron-left color-blue"></f7-icon></span>
+					<span v-show="querydata.current_page<=1"><f7-icon icon="fas fa-chevron-left color-gray" ></f7-icon></span>
+				    </f7-link>
+                            <f7-link popover-open="#pop-paging" href="#" class="text-color-blue">{{querydata.current_page}} / {{querydata.last_page}}</f7-link>
+    					<f7-link @click="page_change(querydata.current_page+1)">
+				    <span v-show="querydata.current_page<querydata.last_page"><f7-icon icon="fas fa-chevron-right color-blue"></f7-icon></span>
+					<span v-show="querydata.current_page>=querydata.last_page"><f7-icon icon="fas fa-chevron-right color-gray" ></f7-icon></span>
+				    </f7-link>
+                        </f7-list-item>
+                    </f7-list>
+                </div>
+            </div>
+            <slot name="data-table-header-selected">
+                <div slot="data-table-header-selected" class="data-table-header-selected">
+                <div class="data-table-title-selected">
+                    {{selectIndex.length}} items selected
+                </div>
+            </div>
+    </slot>
+        </div>
+        <div class="card-content">
+            <table>
+                <thead>
+                    <tr>
+                        <th v-if="__checkbox" class="checkbox-cell" title="Select/Unselect All">
+                            <f7-checkbox />
+                        </th>
+                        <th v-for="item in fields" :key="item.name" :class="(item.name=='id') ? 'label-cell sortable-cell sortable-cell-active' : (item.sortTable!=undefined) ? 'sortable-cell '+item.titleClass : item.titleClass" @click="set_sortkey(item.name, item.sortTable)">{{item.title}}
+                        </th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <!-- https://vuejs.org/v2/guide/components#Scoped-Slots-->
+                    <slot name="rows" v-for="(item, index) in querydata.data" :tr="item" :tr_index="index">
+                    	  <tr v-for="(item, index) in querydata.data">
+                <td v-if="__checkbox" class="checkbox-cell">
+                    <label class="checkbox"><input type="checkbox" :value="index" v-model="selectIndex"><i class="icon-checkbox"></i></label>
+                </td>
+                <td v-for="f in fields">
+                {{ item[f.name] }}
+                </td>
+            	</tr>
+            </slot>
+                </tbody>
+            </table>
+        </div>
+        <f7-popover class="popover-menu popover-max-height" id="pop-paging">
+            <f7-list>
+                <f7-list-item link="#" :title="sr" v-for="(sr, index) in querydata.last_page" :key="index" class="popover-close" @click="page_change(sr)" :class="querydata.current_page==sr ? 'color-blue' : ''">
+                </f7-list-item>
+            </f7-list>
+        </f7-popover>
+    </div>
+</template>
+<style>
+.per-page .item-content .item-inner .item-title {
+    min-width: 70px;
+    font-size: 14px;
+}
+.md .item-input-wrap {
+    min-width: 30px;
+}
+.md .list select {
+	font-size: 14px;
+}
+.data-table .data-table-actions a.link {
+    min-width: max-content;
+}
+
+</style>
+<script>
+import { f7Icon, f7List, f7ListItem, f7Popover, f7Label, f7Link, f7Row, f7Col, f7Checkbox, f7Input  } from 'framework7-vue';
+export default {
+    name: 'f7table',
+    components: {
+    	f7Icon, f7List, f7ListItem, f7Popover, f7Label, f7Link, f7Row, f7Col, f7Checkbox, f7Input,
+    },    	
+    props: {
+        fields: { type: Array, required: true, },
+        querydata: { type: Object, required: true, },
+        __checkbox: { type: Boolean, default: false, },
+        sortOrders: {
+            type: Object,
+            default: () => {
+                return {
+                    'id': { direction: 'desc', table: '' }, //  asc or 'desc'
+                    '__activeField': 'id', // current sort field
+                }
+            }
+        },
+        per_page: {
+            type: Object,
+            default: () => {
+                return {
+                    title: 'Per Page: ',
+                    data: [5, 20, 50, 100, 200],
+                    selected: 0,
+                    next_page: -1,
+                }
+            }
+        },
+    },
+    data() {
+        return {
+        	selectIndex: [],  // the index of selected rows
+        }
+    },
+    filters: {
+        filter1(para) {
+            return para;
+        }
+    },
+    created() {},
+    mounted() {},
+    beforeDestroy() {},
+    computed: {
+        name1() {
+            return;
+        },
+    },
+    methods: {
+        set_sortkey(sort_key, sortTable) {
+            // console.log(`sort_key: ${sort_key}`)
+            // if sort-key was clicked before
+            if (this.sortOrders[sort_key]) {
+                // same key
+                if (sort_key == this.sortOrders.__activeField)
+                    this.sortOrders[sort_key].direction = (this.sortOrders[sort_key].direction == 'desc') ? 'asc' : 'desc'
+            }
+            // if key never clicked before
+            else {
+                this.sortOrders[sort_key] = { direction: 'desc', table: sortTable, }
+            }
+            this.sortOrders.__activeField = sort_key
+            // console.log(JSON.stringify(this.sortOrders))
+            this.per_page.next_page = 1
+            // bi-sync with parent's prop
+            this.$emit('update:sortOrders', this.sortOrders)
+            this.$emit('update:per_page', this.per_page)
+            // emit event to parent
+            this.$emit('orderChange')
+        },
+        page_change(page) {
+            this.per_page.next_page = page
+            this.$emit('update:per_page', this.per_page)
+            this.$emit('pageChange')
+        },
+    }
+}
+
+</script>
diff --git a/src/main.js b/src/main.js
new file mode 100644
index 0000000..4edf9f5
--- /dev/null
+++ b/src/main.js
@@ -0,0 +1,33 @@
+// Import Vue
+import Vue from 'vue'
+
+// Import F7 (with all components)
+import Framework7 from 'framework7/dist/framework7.esm.bundle.js';
+import Framework7Vue from 'framework7-vue/dist/framework7-vue.esm.bundle.js';
+
+// Import Routes
+import routes from './routes.js'
+
+// Import App Component
+import app from './app.vue'
+
+// Init F7 Vue Plugin
+Vue.use(Framework7Vue, Framework7)
+
+let theme = 'md';
+if (document.location.search.indexOf('theme=') >= 0) {
+  theme = document.location.search.split('theme=')[1].split('&')[0];
+}
+
+// Init Vue App
+export default new Vue({
+  // Root Element
+  el: '#app',
+  render: c => c('app'),
+  components: { app },
+  framework7: {
+    id: 'io.framework7.testapp',
+    theme, // md or ios
+  },
+  routes,
+});
diff --git a/src/pages/basic-table.vue b/src/pages/basic-table.vue
new file mode 100644
index 0000000..f781ef0
--- /dev/null
+++ b/src/pages/basic-table.vue
@@ -0,0 +1,134 @@
+<template>
+    <f7-page>
+        <f7-navbar title="Basic Table" back-link="Back" sliding>
+            <f7-nav-right>
+                <f7-link icon="icon-bars" open-panel="left"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+        <f7-table :fields="fields" :querydata="querydata" @pageChange="query_data_from_api()">
+		<!-- slot: data-table-header-selected -->
+            <!-- thead -->
+            <!-- tbody - slot props available -->
+    		<!-- slot: rows -->
+        </f7-table>
+    </f7-page>
+</template>
+<style>
+
+
+</style>
+<script>
+import { querydata } from '../querydata.js'
+export default {
+    name: 'basic',
+    components: {
+        "f7-table": require('../components/f7-table.vue'),
+    },
+    data() {
+        return {
+            fields: [
+              {
+                    name: 'id',
+                    title: '种子ID',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                    // callback: this.obidCallback,
+                },
+                {
+                    name: 'size_f',
+                    title: '大小(GB)',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'seeds',
+                    title: '做种',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'securer_assigned',
+                    title: '已分配',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'securer_accepted',
+                    title: '已认领',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'self_downloaded',
+                    title: '自行下载',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'seed_since',
+                    title: '发布',
+                    titleClass: 'label-cell',
+                    // callback: toSmartDate,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'desc',
+                    title: 'Description',
+                    titleClass: 'label-cell',
+                    // callback: this.strToInput,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'title',
+                    title: 'Title',
+                    titleClass: 'label-cell',
+                    // callback: this.strToInput,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'download_size',
+                    title: '下载(GB)',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'download_duration',
+                    title: '下载时长',
+                    titleClass: 'label-cell tablet-only',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'seeding_duration',
+                    title: '做种时长',
+                    titleClass: 'label-cell tablet-only',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'upload_size',
+                    title: '上传(GB)',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'finishes',
+                    title: '完成次数',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+            ],
+		querydata: querydata,
+        }
+    },
+    created() {
+    },
+    methods: {
+        query_data_from_api() {
+          console.log('getting data from api...')
+      },
+    }
+}
+
+</script>
diff --git a/src/pages/cell-action-table.vue b/src/pages/cell-action-table.vue
new file mode 100644
index 0000000..3e5d337
--- /dev/null
+++ b/src/pages/cell-action-table.vue
@@ -0,0 +1,170 @@
+<template>
+    <f7-page>
+        <f7-navbar title="f7-table with cell-action" back-link="Back" sliding>
+            <f7-nav-right>
+                <f7-link icon="icon-bars" open-panel="left"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+        <f7table :fields="fields" :querydata="querydata" :__checkbox="true" :sortOrders.sync="sortOrders" :per_page.sync="per_page" @orderChange="query_data_from_api()" @pageChange="query_data_from_api()">
+            <div slot="data-table-header-selected" class="data-table-header-selected">
+                <div class="data-table-title-selected">
+                    已选中：
+                    <f7-badge color="blue">{{selectIndex.length}}</f7-badge> 种子
+                    <f7-badge color="blue">{{selected_size_sum.toFixed(1)}}</f7-badge>GB
+                </div>
+            </div>
+            <!-- thead -->
+            <!-- tbody 可以自定义字段显示格式 -->
+            <tr slot="rows" slot-scope="props">
+                <td class="checkbox-cell">
+                    <!-- <f7-checkbox v-model="selectIndex" /> -->
+                    <label class="checkbox"><input type="checkbox" :value="props.tr_index" v-model="selectIndex"><i class="icon-checkbox"></i></label>
+                </td>
+                <td v-for="f in fields" @click="cell_clicked(props.tr_index, f.name, props.tr[f.name])">
+                    {{ props.tr[f.name] }}
+                </td>
+            </tr>
+        </f7table>
+    </f7-page>
+</template>
+<style>
+
+
+</style>
+<script>
+import { querydata } from '../querydata.js'
+export default {
+    name: 'report',
+    components: {
+        f7table: require('../components/f7-table.vue'),
+    },
+    data() {
+        return {
+            fields: [
+              {
+                    name: 'id',
+                    title: '种子ID',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                    // callback: this.obidCallback,
+                },
+                {
+                    name: 'size_f',
+                    title: '大小(GB)',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'seeds',
+                    title: '做种',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'securer_assigned',
+                    title: '已分配',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'securer_accepted',
+                    title: '已认领',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'self_downloaded',
+                    title: '自行下载',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'seed_since',
+                    title: '发布',
+                    titleClass: 'label-cell',
+                    // callback: toSmartDate,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'desc',
+                    title: 'Description',
+                    titleClass: 'label-cell',
+                    // callback: this.strToInput,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'title',
+                    title: 'Title',
+                    titleClass: 'label-cell',
+                    // callback: this.strToInput,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'download_size',
+                    title: '下载(GB)',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'download_duration',
+                    title: '下载时长',
+                    titleClass: 'label-cell tablet-only',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'seeding_duration',
+                    title: '做种时长',
+                    titleClass: 'label-cell tablet-only',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'upload_size',
+                    title: '上传(GB)',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'finishes',
+                    title: '完成次数',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+            ],
+            sortOrders: {
+                'id': { direction: 'desc', table: 'Ob' }, //  asc or 'desc'
+                '__activeField': 'id', // 当前选择的排序字段
+            },
+            per_page: {
+                title: '每页显示',
+                data: [5, 20, 50, 100, 200],
+                selected: 1,
+                next_page: -1,    // pagination indicator
+            },
+            selectIndex: [],  // 选中列的Index
+            querydata: querydata,
+        }
+    },
+    computed: {
+        selected_size_sum() {
+          let sum = 0
+          this.selectIndex.forEach((sr, index, array) => {
+            sum += this.querydata.data[sr].size_f
+          })
+          return sum
+        },
+    },
+    methods: {
+        query_data_from_api(page) {
+          if (!page) page=this.per_page.next_page
+          console.log(`query_data_from_api: ${JSON.stringify(this.per_page)}, per_page.selected: ${this.per_page.selected}, sortOrders: ${JSON.stringify(this.sortOrders)}`)
+        },
+        	cell_clicked(index, name, value) {
+        		alert(`Cell clicked: index=${index}, name=${name}, value=${value}`)
+        	}
+    }
+}
+
+</script>
diff --git a/src/pages/checkbox-table.vue b/src/pages/checkbox-table.vue
new file mode 100644
index 0000000..c111462
--- /dev/null
+++ b/src/pages/checkbox-table.vue
@@ -0,0 +1,153 @@
+<template>
+    <f7-page>
+        <f7-navbar title="Table with checkbox" back-link="Back" sliding>
+            <f7-nav-right>
+                <f7-link icon="icon-bars" open-panel="left"></f7-link>
+            </f7-nav-right>
+        </f7-navbar>
+        <f7table :fields="fields" :querydata="querydata" :__checkbox="true" :sortOrders.sync="sortOrders" :per_page.sync="per_page" @orderChange="query_data_from_api()" @pageChange="query_data_from_api()">
+		<!-- slot: data-table-header-selected -->
+            <!-- thead -->
+            <!-- tbody 可以自定义字段显示格式 -->
+    		<!-- slot: rows -->
+        </f7table>
+    </f7-page>
+</template>
+<style>
+
+
+</style>
+<script>
+import { querydata } from '../querydata.js'
+export default {
+    name: 'history',
+    components: {
+        f7table: require('../components/f7-table.vue'),
+    },
+    data() {
+        return {
+            fields: [
+              {
+                    name: 'id',
+                    title: '种子ID',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                    // callback: this.obidCallback,
+                },
+                {
+                    name: 'size_f',
+                    title: '大小(GB)',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'seeds',
+                    title: '做种',
+                    titleClass: 'label-cell',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'securer_assigned',
+                    title: '已分配',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'securer_accepted',
+                    title: '已认领',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'self_downloaded',
+                    title: '自行下载',
+                    titleClass: 'label-cell action-cell',
+                },
+                {
+                    name: 'seed_since',
+                    title: '发布',
+                    titleClass: 'label-cell',
+                    // callback: toSmartDate,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'desc',
+                    title: 'Description',
+                    titleClass: 'label-cell',
+                    // callback: this.strToInput,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'title',
+                    title: 'Title',
+                    titleClass: 'label-cell',
+                    // callback: this.strToInput,
+                    sortTable: 'Ob',
+                },
+                {
+                    name: 'download_size',
+                    title: '下载(GB)',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'download_duration',
+                    title: '下载时长',
+                    titleClass: 'label-cell tablet-only',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'seeding_duration',
+                    title: '做种时长',
+                    titleClass: 'label-cell tablet-only',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'upload_size',
+                    title: '上传(GB)',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'ourbits_users',
+                },
+                {
+                    name: 'finishes',
+                    title: '完成次数',
+                    titleClass: 'label-cell tablet-only',
+                    dataClass: 'numeric-cell',
+                    sortTable: 'Ob',
+                },
+            ],
+            sortOrders: {
+                'id': { direction: 'desc', table: 'Ob' }, //  asc or 'desc'
+                '__activeField': 'id', // 当前选择的排序字段
+            },
+            per_page: {
+                title: '每页显示',
+                data: [5, 20, 50, 100, 200],
+                selected: 1,
+                next_page: -1,    // pagination indicator
+            },
+            selectIndex: [],  // 选中列的Index
+            querydata: querydata,
+        }
+    },
+    computed: {
+        selected_size_sum() {
+          let sum = 0
+          this.selectIndex.forEach((sr, index, array) => {
+            sum += this.querydata.data[sr].size_f
+          })
+          return sum
+        },
+    },
+    methods: {
+        query_data_from_api(page) {
+          if (!page) page=this.per_page.next_page
+            console.log(`query_data_from_api: ${JSON.stringify(this.per_page)}, per_page.selected: ${this.per_page.selected}`)
+        }
+    }
+}
+
+</script>
diff --git a/src/pages/index.vue b/src/pages/index.vue
new file mode 100644
index 0000000..d2aaf80
--- /dev/null
+++ b/src/pages/index.vue
@@ -0,0 +1,34 @@
+<template>
+    <f7-page>
+        <f7-navbar>
+            <div class="title">Framework7 Table Components</div>
+        </f7-navbar>
+        <f7-block-title>Introduction</f7-block-title>
+        <f7-block inner>
+            <p>This is re-usable component of Framework7 table for Vue.js, including Pagination, Sorting, Selection, customized cell action.</p>
+        </f7-block>
+        <f7-block-title>Demos</f7-block-title>
+        <f7-list>
+            <f7-list-item link="/basic-table/" title="basic table">
+                <f7-icon slot="media" icon="far fa-list-alt fa-lg fa-fw"></f7-icon>
+            </f7-list-item>
+            <f7-list-item link="/checkbox-table/" title="checkbox table">
+                <f7-icon slot="media" icon="far fa-check-square fa-lg fa-fw"></f7-icon>
+            </f7-list-item>
+            <f7-list-item link="/cell-action-table/" title="cell action table">
+                <f7-icon slot="media" icon="fas fa-paper-plane fa-lg fa-fw"></f7-icon>
+            </f7-list-item>
+            <f7-list-item link="">
+                            <f7-icon slot="media" icon="fab fa-github fa-fw"></f7-icon>
+                            <f7-link href="https://github.com/kevinqqnj/f7-table" target="_blank" external class="item-link">
+                                Github <i class="fas fa-link fa-xs" color="" /></f7-link>
+                        </f7-list-item>
+        </f7-list>
+    </f7-page>
+</template>
+	<style>
+
+	</style>
+<script>
+export default {};
+</script>
diff --git a/src/querydata.js b/src/querydata.js
new file mode 100644
index 0000000..61d4aef
--- /dev/null
+++ b/src/querydata.js
@@ -0,0 +1,564 @@
+const querydata = {
+  "current_page": 1, 
+  "data": [
+    {
+      "desc": " \u00a0\u5269\u4f59\u65f6\u95f4\uff1a7\u65f624\u5206\u5b98\u65b9\u56fd\u8bed\u4e2d\u5b57\u7981\u8f6c\u4f60\u8bf4\u7684\u90fd\u5bf9 \u7b2c\u4e00\u5b63 20180123 \u7b2c6\u671f 2017 | \u8521\u5eb7\u6c38 \u718a\u6893\u6dc7 \u6c88\u68a6\u8fb0 \u9773\u68a6\u4f73 \u8881\u7855 \u5218\u4e5f\u884c", 
+      "download_duration": "", 
+      "download_size": 0.81, 
+      "faults": [], 
+      "finishes": 18, 
+      "id": 68262, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517277378, 
+      "seeding_duration": "", 
+      "seeds": 17, 
+      "self_downloaded": [], 
+      "size_f": 0.81, 
+      "title": "Tell Me Why S01 2017 S01E06 1080p WEB-DL AAC H264-OurTV", 
+      "upload_size": 0.0
+    }, 
+    {
+      "desc": " \u00a0\u5269\u4f59\u65f6\u95f4\uff1a7\u65f613\u5206\u5b98\u65b9\u56fd\u8bed\u4e2d\u5b57\u7981\u8f6c\u4e09\u65e5\u4e3a\u671f \u7b2c5\u96c6 2018 | \u66fe\u8f76\u53ef \u4fde\u704f\u660e", 
+      "download_duration": "", 
+      "download_size": 0.29, 
+      "faults": [], 
+      "finishes": 20, 
+      "id": 68261, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517276727, 
+      "seeding_duration": "", 
+      "seeds": 17, 
+      "self_downloaded": [], 
+      "size_f": 0.29, 
+      "title": "San Ri Wei Qi S01 2018 S01E05.1080p WEB-DL AAC H264-OurTV", 
+      "upload_size": 0.01
+    }, 
+    {
+      "desc": " [\u70ed\u95e8] \u5b98\u65b9\u4e2d\u5b57\u5bfb\u68a6\u73af\u6e38\u8bb0/\u53ef\u53ef\u591c\u603b\u4f1a(\u53f0)/\u73a9\u8f6c\u6781\u4e50\u56ed(\u6e2f) 2017\u5e74\u5ea6\u50ac\u6cea\u5927\u4f5c \u5728\u7231\u7684\u8bb0\u5fc6\u6d88\u5931\u4e4b\u524d\u8bf7\u8bb0\u4f4f\u6211 \u4e2d\u82f1\u53cc\u97f3\u8f68", 
+      "download_duration": "5:21", 
+      "download_size": 1.59, 
+      "faults": [], 
+      "finishes": 84, 
+      "id": 68258, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517245439, 
+      "seeding_duration": "1:29:12", 
+      "seeds": 71, 
+      "self_downloaded": [], 
+      "size_f": 1.59, 
+      "title": "Coco 2017 1080p WEB-DL 2Audios AAC H264-OurTV", 
+      "upload_size": 0.94
+    }, 
+    {
+      "desc": " \u00a0\u5269\u4f59\u65f6\u95f4\uff1a12\u65f631\u5206\u5b98\u65b9\u4e2d\u5b57\u7981\u8f6c\u65b0\u00b7\u5965\u7279Q \u516812\u96c6 2013 | \u7530\u8fb9\u8bda\u4e00 \u9ad8\u68a8\u4e34 \u5c3e\u4e0a\u5bbd\u4e4b [1080p\u00b7HEVC\u7248]", 
+      "download_duration": "3:31", 
+      "download_size": 6.4, 
+      "faults": [], 
+      "finishes": 48, 
+      "id": 68255, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517241765, 
+      "seeding_duration": "2:00:00", 
+      "seeds": 38, 
+      "self_downloaded": [], 
+      "size_f": 6.4, 
+      "title": "Neo Ultra Q 2013 Complete 1080p WEB-DL AAC H265-OurTV", 
+      "upload_size": 0.11
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u8ff7\u9547\u51f6\u6848 [\u82f1\u8bed \u7b80\u7e41\u4e2d\u82f1\u6587PGS\u5b57\u5e55+\u7ae0\u8282]", 
+      "download_duration": "3:56", 
+      "download_size": 9.75, 
+      "faults": [], 
+      "finishes": 29, 
+      "id": 68252, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517240611, 
+      "seeding_duration": "2:20:00", 
+      "seeds": 20, 
+      "self_downloaded": [], 
+      "size_f": 9.75, 
+      "title": "Suburbicon 2017 1080p Bluray DTS-HD MA 5.1 x264-PbK", 
+      "upload_size": 0.0
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u8ff7\u9547\u51f6\u6848 [\u82f1\u8bed \u7b80\u7e41\u4e2d\u82f1\u6587PGS\u5b57\u5e55+\u7ae0\u8282]", 
+      "download_duration": "1:52", 
+      "download_size": 4.31, 
+      "faults": [], 
+      "finishes": 25, 
+      "id": 68251, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517240605, 
+      "seeding_duration": "2:20:00", 
+      "seeds": 18, 
+      "self_downloaded": [], 
+      "size_f": 4.31, 
+      "title": "Suburbicon 2017 720p Bluray DTS 5.1 x264-PbK", 
+      "upload_size": 0.0
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4eb2\u7231\u7684\uff0c\u6211\u628a\u5b69\u5b50\u7f29\u5c0f\u4e86/\u8c46\u4e01\u5c0f\u7cbe\u7075[\u7b80\u82f1PGS\u5b57\u5e55+\u7ae0\u8282]", 
+      "download_duration": "7:20:13", 
+      "download_size": 13.05, 
+      "faults": [], 
+      "finishes": 35, 
+      "id": 68248, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517236210, 
+      "seeding_duration": "1:00:00", 
+      "seeds": 34, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 5.89, 
+          "finished_since": "", 
+          "leechers": 41, 
+          "ob_username": "possible964", 
+          "seeders": 1, 
+          "seeding_duration": "", 
+          "status": 3, 
+          "upload_size": 7.96
+        }
+      ], 
+      "size_f": 13.05, 
+      "title": "Honey, I Shrunk the Kids 1989 1080p BluRay DTS-HD MA 5.1 x264-PbK", 
+      "upload_size": 20.89
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4eb2\u7231\u7684\uff0c\u6211\u628a\u5b69\u5b50\u7f29\u5c0f\u4e86/\u8c46\u4e01\u5c0f\u7cbe\u7075[\u7b80\u82f1PGS\u5b57\u5e55+\u7ae0\u8282]", 
+      "download_duration": "6:14:01", 
+      "download_size": 5.77, 
+      "faults": [], 
+      "finishes": 24, 
+      "id": 68247, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517236086, 
+      "seeding_duration": "2:00:01", 
+      "seeds": 18, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 3.68, 
+          "finished_since": "", 
+          "leechers": 23, 
+          "ob_username": "possible964", 
+          "seeders": 1, 
+          "seeding_duration": "", 
+          "status": 3, 
+          "upload_size": 4.91
+        }
+      ], 
+      "size_f": 5.77, 
+      "title": "Honey, I Shrunk the Kids 1989 720p BluRay DTS x264-PbK", 
+      "upload_size": 9.94
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4eb2\u7231\u7684\uff0c\u6211\u628a\u5b69\u5b50\u653e\u5927\u4e86/\u8c46\u9489\u5c0f\u7cbe\u7075[\u7b80\u82f1PGS\u5b57\u5e55+\u7ae0\u8282]", 
+      "download_duration": "6:19:57", 
+      "download_size": 12.31, 
+      "faults": [], 
+      "finishes": 29, 
+      "id": 68244, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517233957, 
+      "seeding_duration": "2:20:00", 
+      "seeds": 26, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 8.75, 
+          "finished_since": "", 
+          "leechers": 35, 
+          "ob_username": "possible964", 
+          "seeders": 1, 
+          "seeding_duration": "", 
+          "status": 3, 
+          "upload_size": 5.76
+        }
+      ], 
+      "size_f": 12.31, 
+      "title": "Honey I Blew Up The Kid 1992.1080p BluRay DTS-HD MA 5.1 x264-PbK", 
+      "upload_size": 9.32
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u7edd\u5730\u9003\u4ea1/\u8de8\u5883\u8ffd\u6355/ \u8df3\u8dc3\u8ffd\u8e2a[\u7b80\u7e41+\u7b80\u7e41\u82f1\u53cc\u8bedPGS\u5b57\u5e55/\u7ae0\u8282]", 
+      "download_duration": "15:06", 
+      "download_size": 10.32, 
+      "faults": [], 
+      "finishes": 33, 
+      "id": 68243, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517233851, 
+      "seeding_duration": "8:06:44", 
+      "seeds": 22, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 10.32, 
+          "finished_since": "", 
+          "leechers": 3, 
+          "ob_username": "possible964", 
+          "seeders": 32, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 1.98
+        }
+      ], 
+      "size_f": 10.32, 
+      "title": "Skiptrace 2016 1080p BluRay DTS-HD MA 5.1 x264-PbK", 
+      "upload_size": 2.01
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4eb2\u7231\u7684\uff0c\u6211\u628a\u5b69\u5b50\u653e\u5927\u4e86/\u8c46\u9489\u5c0f\u7cbe\u7075[\u7b80\u82f1PGS\u5b57\u5e55+\u7ae0\u8282]", 
+      "download_duration": "1:31:06", 
+      "download_size": 5.65, 
+      "faults": [], 
+      "finishes": 28, 
+      "id": 68242, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517233794, 
+      "seeding_duration": "8:02:08", 
+      "seeds": 21, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 5.65, 
+          "finished_since": "", 
+          "leechers": 0, 
+          "ob_username": "possible964", 
+          "seeders": 29, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 3.78
+        }
+      ], 
+      "size_f": 5.65, 
+      "title": "Honey I Blew Up The Kid 1992 720p BluRay DTS x264-PbK", 
+      "upload_size": 3.78
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u7edd\u5730\u9003\u4ea1/\u8de8\u5883\u8ffd\u6355/ \u8df3\u8dc3\u8ffd\u8e2a[\u7b80\u7e41+\u7b80\u7e41\u82f1\u53cc\u8bedPGS\u5b57\u5e55/\u7ae0\u8282]", 
+      "download_duration": "53:08", 
+      "download_size": 4.23, 
+      "faults": [], 
+      "finishes": 25, 
+      "id": 68241, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517233737, 
+      "seeding_duration": "9:33:21", 
+      "seeds": 17, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 4.23, 
+          "finished_since": "", 
+          "leechers": 0, 
+          "ob_username": "possible964", 
+          "seeders": 25, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 0.9
+        }
+      ], 
+      "size_f": 4.23, 
+      "title": "Skiptrace 2016 720p BluRay DTS x264-PbK", 
+      "upload_size": 0.9
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u7535\u952f\u60ca\u9b42/\u4f60\u6b7b\u6211\u6d3b/\u6050\u60e7\u6597\u5ba4(\u6e2f)/\u593a\u9b42\u952f(\u53f0)[\u7b80\u7e41\u82f1\u53cc\u8bedPGS\u5b57\u5e55]", 
+      "download_duration": "2:57:13", 
+      "download_size": 12.03, 
+      "faults": [], 
+      "finishes": 33, 
+      "id": 68237, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517231425, 
+      "seeding_duration": "5:23:38", 
+      "seeds": 22, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 12.03, 
+          "finished_since": "", 
+          "leechers": 2, 
+          "ob_username": "possible964", 
+          "seeders": 31, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 18.33
+        }
+      ], 
+      "size_f": 12.03, 
+      "title": "Saw 2004 1080p BluRay DTS-ES 6 1 x264-PbK", 
+      "upload_size": 18.36
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u7535\u952f\u60ca\u9b42/\u4f60\u6b7b\u6211\u6d3b/\u6050\u60e7\u6597\u5ba4(\u6e2f)/\u593a\u9b42\u952f(\u53f0)[\u7b80\u7e41\u82f1\u53cc\u8bedPGS\u5b57\u5e55]", 
+      "download_duration": "14:10", 
+      "download_size": 5.77, 
+      "faults": [], 
+      "finishes": 23, 
+      "id": 68236, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517230797, 
+      "seeding_duration": "11:00:09", 
+      "seeds": 17, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 5.77, 
+          "finished_since": "", 
+          "leechers": 0, 
+          "ob_username": "possible964", 
+          "seeders": 21, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 0.0
+        }
+      ], 
+      "size_f": 5.77, 
+      "title": "Saw 2004 720p BluRay DTS-ES 6 1 x264-PbK", 
+      "upload_size": 0.0
+    }, 
+    {
+      "desc": " [\u70ed\u95e8] \u00a0\u5269\u4f59\u65f6\u95f4\uff1a9\u65f60\u5206\u5b98\u65b9\u56fd\u8bed\u4e2d\u5b57\u7981\u8f6c\u5c0f\u620f\u9aa8\u4e4b\u516b\u4ed9\u8fc7\u6d77 \u516810\u96c6 2018 [1080p\u00b7HEVC\u7248]", 
+      "download_duration": "53:26", 
+      "download_size": 3.66, 
+      "faults": [], 
+      "finishes": 84, 
+      "id": 68232, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517229098, 
+      "seeding_duration": "40:03", 
+      "seeds": 62, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 3.66, 
+          "finished_since": "", 
+          "leechers": 1, 
+          "ob_username": "possible964", 
+          "seeders": 59, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 0.04
+        }
+      ], 
+      "size_f": 3.66, 
+      "title": "Star Of Tomorrow The Eight Immortals Cross The Sea 2018 Complete 1080p WEB-DL AAC H265-OurTV", 
+      "upload_size": 0.0
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u7b2c60\u5c4a\u683c\u83b1\u7f8e\u5956\u9881\u5956\u5178\u793c 2018 [1080p\u00b7HEVC\u7248] *\u606d\u559c\u706b\u661f\u54e5* *\u65e0\u6c34\u5370*", 
+      "download_duration": "1:35", 
+      "download_size": 3.53, 
+      "faults": [], 
+      "finishes": 49, 
+      "id": 68225, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517218347, 
+      "seeding_duration": "15:04:33", 
+      "seeds": 31, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 3.53, 
+          "finished_since": "", 
+          "leechers": 2, 
+          "ob_username": "possible964", 
+          "seeders": 36, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 0.65
+        }
+      ], 
+      "size_f": 3.53, 
+      "title": "The 60th Annual Grammy Awards 2018 1080p WEB-DL AAC H265-OurTV", 
+      "upload_size": 0.65
+    }, 
+    {
+      "desc": " [\u70ed\u95e8] \u00a0\u5269\u4f59\u65f6\u95f4\uff1a3\u65f615\u5206\u5b98\u65b9DIY\u4e2d\u5b57\u8ff7\u9547\u51f6\u6848/\u5b8c\u7f8e\u793e\u533a\u8c0b\u6740\u6848(\u53f0)/\u575a\u79bb\u5730\u6b7b\u4eba\u52ab\u6848(\u6e2f)/\u8ff7\u9547/\u5c0f\u9547\u90ca\u533a \u3010DIY\u7b80\u7e41+\u7b80\u7e41\u82f1\u5b57\u5e55\u3011", 
+      "download_duration": "11:06:02", 
+      "download_size": 40.9, 
+      "faults": [], 
+      "finishes": 165, 
+      "id": 68214, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517208413, 
+      "seeding_duration": "5:00:14", 
+      "seeds": 138, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 39.99, 
+          "finished_since": "", 
+          "leechers": 158, 
+          "ob_username": "possible964", 
+          "seeders": 3, 
+          "seeding_duration": "", 
+          "status": 3, 
+          "upload_size": 106.63
+        }, 
+        {
+          "download_duration": "", 
+          "download_size": 40.14, 
+          "finished_since": "", 
+          "leechers": 158, 
+          "ob_username": "SkyRabbit", 
+          "seeders": 2, 
+          "seeding_duration": "", 
+          "status": 3, 
+          "upload_size": 20.51
+        }
+      ], 
+      "size_f": 40.9, 
+      "title": "Suburbicon.2017.BluRay.1080p.AVC.DTS-HD.MA5.1-lingfriendly@OurBits", 
+      "upload_size": 22.83
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u4e2d\u5b57\u7981\u8f6c\u7b2c60\u5c4a\u683c\u83b1\u7f8e\u5956\u9881\u5956\u5178\u793c 2018 *\u606d\u559c\u706b\u661f\u54e5* *\u6709\u6c34\u5370\uff0c\u4e0d\u559c\u52ff\u4e0b*", 
+      "download_duration": "2:23:31", 
+      "download_size": 4.93, 
+      "faults": [], 
+      "finishes": 31, 
+      "id": 68213, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517207897, 
+      "seeding_duration": "10:40:28", 
+      "seeds": 18, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 4.93, 
+          "finished_since": "", 
+          "leechers": 2, 
+          "ob_username": "possible964", 
+          "seeders": 22, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 8.19
+        }
+      ], 
+      "size_f": 4.93, 
+      "title": "The 60th Annual Grammy Awards 2018 1080p WEB-DL AAC H264-OurTV", 
+      "upload_size": 8.22
+    }, 
+    {
+      "desc": " \u5b98\u65b9\u56fd\u8bed\u4e2d\u5b57\u7981\u8f6c\u58f0\u4e34\u5176\u5883 \u7b2c4\u671f 2018 | \u738b\u51ef \u8d75\u7acb\u65b0 \u5468\u4e00\u56f4 \u6f58\u7ca4\u660e \u5f20\u6b46\u827a \u5510\u56fd\u5f3a \u5f20\u94c1\u6797 \u9648\u5efa\u658c \u5b81\u9759 \u7fdf\u5929\u4e34 *\u6709\u6c34\u5370\uff0c\u4e0d\u559c\u52ff\u4e0b*", 
+      "download_duration": "1:12:34", 
+      "download_size": 1.74, 
+      "faults": [], 
+      "finishes": 45, 
+      "id": 68206, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517192199, 
+      "seeding_duration": "21:01:25", 
+      "seeds": 26, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 1.74, 
+          "finished_since": "", 
+          "leechers": 0, 
+          "ob_username": "possible964", 
+          "seeders": 30, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 2.78
+        }
+      ], 
+      "size_f": 1.74, 
+      "title": "The Sound 2018 E04 1080p WEB-DL AAC H264-OurTV", 
+      "upload_size": 2.78
+    }, 
+    {
+      "desc": " [\u70ed\u95e8] \u5b98\u65b9\u56fd\u8bed\u4e2d\u5b57\u65b0\u7cbe\u6b66\u95e8/\u65b0\u7cbe\u6b66\u95e8\u4e00\u4e5d\u4e5d\u4e00 | \u4e3b\u6f14: \u5468\u661f\u9a70/\u949f\u9547\u6d9b/\u5f20\u654f/\u5143\u594e/\u5c39\u626c\u660e [\u56fd\u8bed/\u5185\u5d4c\u4e2d\u5b57]\u30101080p\u8d85\u9ad8\u7801\u7248\u3011", 
+      "download_duration": "11:07:05", 
+      "download_size": 10.23, 
+      "faults": [], 
+      "finishes": 100, 
+      "id": 68203, 
+      "is_faulty": false, 
+      "securer_accepted": [], 
+      "securer_assigned": [], 
+      "seed_since": 1517186501, 
+      "seeding_duration": "15:05:54", 
+      "seeds": 64, 
+      "self_downloaded": [
+        {
+          "download_duration": "", 
+          "download_size": 9.17, 
+          "finished_since": "", 
+          "leechers": 86, 
+          "ob_username": "ninjawang", 
+          "seeders": 1, 
+          "seeding_duration": "", 
+          "status": 3, 
+          "upload_size": 17.3
+        }, 
+        {
+          "download_duration": "", 
+          "download_size": 10.23, 
+          "finished_since": "", 
+          "leechers": 0, 
+          "ob_username": "possible964", 
+          "seeders": 65, 
+          "seeding_duration": "", 
+          "status": 2, 
+          "upload_size": 12.69
+        }
+      ], 
+      "size_f": 10.23, 
+      "title": "Fist of Fury 1991 1080p WEB-DL AAC H264-OurTV", 
+      "upload_size": 12.69
+    }
+  ], 
+  "from": 1, 
+  "last_page": 13, 
+  "per_page": 20, 
+  "to": 20, 
+  "total": 255
+}
+
+export { 
+	querydata
+}
\ No newline at end of file
diff --git a/src/routes.js b/src/routes.js
new file mode 100644
index 0000000..c1593c7
--- /dev/null
+++ b/src/routes.js
@@ -0,0 +1,17 @@
+export default [{
+        path: '/',
+        component: require('./pages/index.vue')
+    },
+    {
+        path: '/basic-table/',
+        component: require('./pages/basic-table.vue')
+    },
+    {
+        path: '/checkbox-table/',
+        component: require('./pages/checkbox-table.vue')
+    },
+    {
+        path: '/cell-action-table/',
+        component: require('./pages/cell-action-table.vue')
+    },
+]
diff --git a/static/.gitkeep b/static/.gitkeep
new file mode 100644
index 0000000..e69de29