├── .babelrc ├── .editorconfig ├── .gitignore ├── LICENSE ├── README.md ├── build ├── build.js ├── check-versions.js ├── dev-client.js ├── dev-server.js ├── utils.js ├── webpack.base.conf.js ├── webpack.dev.conf.js └── webpack.prod.conf.js ├── config ├── dev.env.js ├── index.js └── prod.env.js ├── index.html ├── package.json ├── src ├── App.vue ├── assets │ ├── components │ │ └── backtop.vue │ ├── css │ │ ├── base.scss │ │ ├── common │ │ │ ├── _animation.scss │ │ │ ├── _github-markdown.scss │ │ │ ├── _iconfont.scss │ │ │ ├── _reset.scss │ │ │ └── _variable.scss │ │ └── fonts │ │ │ ├── iconfont.eot │ │ │ ├── iconfont.svg │ │ │ ├── iconfont.ttf │ │ │ └── iconfont.woff │ ├── images │ │ └── preLoad.gif │ ├── logo.png │ └── view │ │ ├── about.vue │ │ ├── all.vue │ │ ├── preLoader.vue │ │ └── topic.vue ├── main.js └── routes.js └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-2"], 3 | "plugins": ["transform-runtime"], 4 | "comments": false 5 | } 6 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | root = true 2 | 3 | [*] 4 | charset = utf-8 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | insert_final_newline = true 9 | trim_trailing_whitespace = true 10 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules/ 3 | dist/ 4 | npm-debug.log 5 | .idea/ 6 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2016 McChen 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # Vue-cnode 2 | 3 | 基于Vue&Vue-router(2.0)，利用CNode API重写CNode社区。 4 | 5 | ## 线上实例Demo 6 | 7 | [线上Demo请狠狠戳这里](http://mcchen.club/project/vue-cnode/index.html) 8 | 9 | ## 文档 10 | 11 | [文档](http://mcchen.club/2016/12/23/vue入门实例-基于vue&vue-router重写Cnode社区/) 12 | 13 | ## 快速上手 14 | 15 | ### 项目克隆`git clone`或者直接Download 16 | 17 | ```Bash 18 | git clone https://github.com/ChenJiaH/vue-cnode.git 19 | ``` 20 | 21 | ### 安装依赖 22 | 23 | ``` bash 24 | npm install 25 | ``` 26 | 27 | ### 运行 28 | 29 | ``` bash 30 | npm run dev 31 | ``` 32 | 33 | ### 发布 34 | 35 | ``` bash 36 | npm run dev 37 | ``` 38 | 39 | ## 交流反馈 40 | 41 | [交流或者反馈意见](https://github.com/ChenJiaH/vue-cnode/issues) 42 | 43 | ## License 44 | 45 | [MIT License](https://github.com/ChenJiaH/vue-cnode/blob/master/LICENSE) 46 | -------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | // https://github.com/shelljs/shelljs 2 | require('./check-versions')() 3 | require('shelljs/global') 4 | env.NODE_ENV = 'production' 5 | 6 | var path = require('path') 7 | var config = require('../config') 8 | var ora = require('ora') 9 | var webpack = require('webpack') 10 | var webpackConfig = require('./webpack.prod.conf') 11 | 12 | console.log( 13 | ' Tip:\n' + 14 | ' Built files are meant to be served over an HTTP server.\n' + 15 | ' Opening index.html over file:// won\'t work.\n' 16 | ) 17 | 18 | var spinner = ora('building for production...') 19 | spinner.start() 20 | 21 | var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) 22 | rm('-rf', assetsPath) 23 | mkdir('-p', assetsPath) 24 | cp('-R', 'static/*', assetsPath) 25 | 26 | webpack(webpackConfig, function (err, stats) { 27 | spinner.stop() 28 | if (err) throw err 29 | process.stdout.write(stats.toString({ 30 | colors: true, 31 | modules: false, 32 | children: false, 33 | chunks: false, 34 | chunkModules: false 35 | }) + '\n') 36 | }) 37 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | var semver = require('semver') 2 | var chalk = require('chalk') 3 | var packageConfig = require('../package.json') 4 | var exec = function (cmd) { 5 | return require('child_process') 6 | .execSync(cmd).toString().trim() 7 | } 8 | 9 | var versionRequirements = [ 10 | { 11 | name: 'node', 12 | currentVersion: semver.clean(process.version), 13 | versionRequirement: packageConfig.engines.node 14 | }, 15 | { 16 | name: 'npm', 17 | currentVersion: exec('npm --version'), 18 | versionRequirement: packageConfig.engines.npm 19 | } 20 | ] 21 | 22 | module.exports = function () { 23 | var warnings = [] 24 | for (var i = 0; i < versionRequirements.length; i++) { 25 | var mod = versionRequirements[i] 26 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 27 | warnings.push(mod.name + ': ' + 28 | chalk.red(mod.currentVersion) + ' should be ' + 29 | chalk.green(mod.versionRequirement) 30 | ) 31 | } 32 | } 33 | 34 | if (warnings.length) { 35 | console.log('') 36 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 37 | console.log() 38 | for (var i = 0; i < warnings.length; i++) { 39 | var warning = warnings[i] 40 | console.log(' ' + warning) 41 | } 42 | console.log() 43 | process.exit(1) 44 | } 45 | } 46 | -------------------------------------------------------------------------------- /build/dev-client.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable */ 2 | require('eventsource-polyfill') 3 | var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') 4 | 5 | hotClient.subscribe(function (event) { 6 | if (event.action === 'reload') { 7 | window.location.reload() 8 | } 9 | }) 10 | -------------------------------------------------------------------------------- /build/dev-server.js: -------------------------------------------------------------------------------- 1 | require('./check-versions')() 2 | var config = require('../config') 3 | if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) 4 | var path = require('path') 5 | var express = require('express') 6 | var webpack = require('webpack') 7 | var opn = require('opn') 8 | var proxyMiddleware = require('http-proxy-middleware') 9 | var webpackConfig = require('./webpack.dev.conf') 10 | 11 | // default port where dev server listens for incoming traffic 12 | var port = process.env.PORT || config.dev.port 13 | // Define HTTP proxies to your custom API backend 14 | // https://github.com/chimurai/http-proxy-middleware 15 | var proxyTable = config.dev.proxyTable 16 | 17 | var app = express() 18 | var compiler = webpack(webpackConfig) 19 | 20 | var devMiddleware = require('webpack-dev-middleware')(compiler, { 21 | publicPath: webpackConfig.output.publicPath, 22 | stats: { 23 | colors: true, 24 | chunks: false 25 | } 26 | }) 27 | 28 | var hotMiddleware = require('webpack-hot-middleware')(compiler) 29 | // force page reload when html-webpack-plugin template changes 30 | compiler.plugin('compilation', function (compilation) { 31 | compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { 32 | hotMiddleware.publish({ action: 'reload' }) 33 | cb() 34 | }) 35 | }) 36 | 37 | // proxy api requests 38 | Object.keys(proxyTable).forEach(function (context) { 39 | var options = proxyTable[context] 40 | if (typeof options === 'string') { 41 | options = { target: options } 42 | } 43 | app.use(proxyMiddleware(context, options)) 44 | }) 45 | 46 | // handle fallback for HTML5 history API 47 | app.use(require('connect-history-api-fallback')()) 48 | 49 | // serve webpack bundle output 50 | app.use(devMiddleware) 51 | 52 | // enable hot-reload and state-preserving 53 | // compilation error display 54 | app.use(hotMiddleware) 55 | 56 | // serve pure static assets 57 | var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) 58 | app.use(staticPath, express.static('./static')) 59 | 60 | module.exports = app.listen(port, function (err) { 61 | if (err) { 62 | console.log(err) 63 | return 64 | } 65 | var uri = 'http://localhost:' + port 66 | console.log('Listening at ' + uri + '\n') 67 | 68 | // when env is testing, don't need open it 69 | if (process.env.NODE_ENV !== 'testing') { 70 | opn(uri) 71 | } 72 | }) 73 | -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 4 | 5 | exports.assetsPath = function (_path) { 6 | var assetsSubDirectory = process.env.NODE_ENV === 'production' 7 | ? config.build.assetsSubDirectory 8 | : config.dev.assetsSubDirectory 9 | return path.posix.join(assetsSubDirectory, _path) 10 | } 11 | 12 | exports.cssLoaders = function (options) { 13 | options = options || {} 14 | // generate loader string to be used with extract text plugin 15 | function generateLoaders (loaders) { 16 | var sourceLoader = loaders.map(function (loader) { 17 | var extraParamChar 18 | if (/\?/.test(loader)) { 19 | loader = loader.replace(/\?/, '-loader?') 20 | extraParamChar = '&' 21 | } else { 22 | loader = loader + '-loader' 23 | extraParamChar = '?' 24 | } 25 | return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') 26 | }).join('!') 27 | 28 | // Extract CSS when that option is specified 29 | // (which is the case during production build) 30 | if (options.extract) { 31 | return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) 32 | } else { 33 | return ['vue-style-loader', sourceLoader].join('!') 34 | } 35 | } 36 | 37 | // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html 38 | return { 39 | css: generateLoaders(['css']), 40 | postcss: generateLoaders(['css']), 41 | less: generateLoaders(['css', 'less']), 42 | sass: generateLoaders(['css', 'sass?indentedSyntax']), 43 | scss: generateLoaders(['css', 'sass']), 44 | stylus: generateLoaders(['css', 'stylus']), 45 | styl: generateLoaders(['css', 'stylus']) 46 | } 47 | } 48 | 49 | // Generate loaders for standalone style files (outside of .vue) 50 | exports.styleLoaders = function (options) { 51 | var output = [] 52 | var loaders = exports.cssLoaders(options) 53 | for (var extension in loaders) { 54 | var loader = loaders[extension] 55 | output.push({ 56 | test: new RegExp('\\.' + extension + '$'), 57 | loader: loader 58 | }) 59 | } 60 | return output 61 | } 62 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var projectRoot = path.resolve(__dirname, '../') 5 | 6 | var env = process.env.NODE_ENV 7 | // check env & config/index.js to decide weither to enable CSS Sourcemaps for the 8 | // various preprocessor loaders added to vue-loader at the end of this file 9 | var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) 10 | var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) 11 | var useCssSourceMap = cssSourceMapDev || cssSourceMapProd 12 | 13 | module.exports = { 14 | entry: { 15 | app: './src/main.js' 16 | }, 17 | output: { 18 | path: config.build.assetsRoot, 19 | publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, 20 | filename: '[name].js' 21 | }, 22 | resolve: { 23 | extensions: ['', '.js', '.vue'], 24 | fallback: [path.join(__dirname, '../node_modules')], 25 | alias: { 26 | 'vue$': 'vue/dist/vue.common.js', 27 | 'src': path.resolve(__dirname, '../src'), 28 | 'assets': path.resolve(__dirname, '../src/assets'), 29 | 'components': path.resolve(__dirname, '../src/components') 30 | } 31 | }, 32 | resolveLoader: { 33 | fallback: [path.join(__dirname, '../node_modules')] 34 | }, 35 | module: { 36 | loaders: [ 37 | { 38 | test: /\.vue$/, 39 | loader: 'vue' 40 | }, 41 | { 42 | test: /\.js$/, 43 | loader: 'babel', 44 | include: projectRoot, 45 | exclude: /node_modules/ 46 | }, 47 | { 48 | test: /\.json$/, 49 | loader: 'json' 50 | }, 51 | { 52 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 53 | loader: 'url', 54 | query: { 55 | limit: 10000, 56 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 57 | } 58 | }, 59 | { 60 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 61 | loader: 'url', 62 | query: { 63 | limit: 10000, 64 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 65 | } 66 | } 67 | ] 68 | }, 69 | vue: { 70 | loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), 71 | postcss: [ 72 | require('autoprefixer')({ 73 | browsers: ['last 3 versions', 'Android >= 4.0', 'iOS >= 7.0'] 74 | }) 75 | ] 76 | } 77 | } 78 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | var config = require('../config') 2 | var webpack = require('webpack') 3 | var merge = require('webpack-merge') 4 | var utils = require('./utils') 5 | var baseWebpackConfig = require('./webpack.base.conf') 6 | var HtmlWebpackPlugin = require('html-webpack-plugin') 7 | 8 | // add hot-reload related code to entry chunks 9 | Object.keys(baseWebpackConfig.entry).forEach(function (name) { 10 | baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) 11 | }) 12 | 13 | module.exports = merge(baseWebpackConfig, { 14 | module: { 15 | loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) 16 | }, 17 | // eval-source-map is faster for development 18 | devtool: '#eval-source-map', 19 | plugins: [ 20 | new webpack.DefinePlugin({ 21 | 'process.env': config.dev.env 22 | }), 23 | // https://github.com/glenjamin/webpack-hot-middleware#installation--usage 24 | new webpack.optimize.OccurenceOrderPlugin(), 25 | new webpack.HotModuleReplacementPlugin(), 26 | new webpack.NoErrorsPlugin(), 27 | // https://github.com/ampedandwired/html-webpack-plugin 28 | new HtmlWebpackPlugin({ 29 | filename: 'index.html', 30 | template: 'index.html', 31 | inject: true 32 | }) 33 | ] 34 | }) 35 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | var path = require('path') 2 | var config = require('../config') 3 | var utils = require('./utils') 4 | var webpack = require('webpack') 5 | var merge = require('webpack-merge') 6 | var baseWebpackConfig = require('./webpack.base.conf') 7 | var ExtractTextPlugin = require('extract-text-webpack-plugin') 8 | var HtmlWebpackPlugin = require('html-webpack-plugin') 9 | var env = config.build.env 10 | 11 | var webpackConfig = merge(baseWebpackConfig, { 12 | module: { 13 | loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) 14 | }, 15 | devtool: config.build.productionSourceMap ? '#source-map' : false, 16 | output: { 17 | path: config.build.assetsRoot, 18 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 19 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 20 | }, 21 | vue: { 22 | loaders: utils.cssLoaders({ 23 | sourceMap: config.build.productionSourceMap, 24 | extract: true 25 | }) 26 | }, 27 | plugins: [ 28 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 29 | new webpack.DefinePlugin({ 30 | 'process.env': env 31 | }), 32 | new webpack.optimize.UglifyJsPlugin({ 33 | compress: { 34 | warnings: false 35 | } 36 | }), 37 | new webpack.optimize.OccurrenceOrderPlugin(), 38 | // extract css into its own file 39 | new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), 40 | // generate dist index.html with correct asset hash for caching. 41 | // you can customize output by editing /index.html 42 | // see https://github.com/ampedandwired/html-webpack-plugin 43 | new HtmlWebpackPlugin({ 44 | filename: config.build.index, 45 | template: 'index.html', 46 | inject: true, 47 | minify: { 48 | removeComments: true, 49 | collapseWhitespace: true, 50 | removeAttributeQuotes: true 51 | // more options: 52 | // https://github.com/kangax/html-minifier#options-quick-reference 53 | }, 54 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 55 | chunksSortMode: 'dependency' 56 | }), 57 | // split vendor js into its own file 58 | new webpack.optimize.CommonsChunkPlugin({ 59 | name: 'vendor', 60 | minChunks: function (module, count) { 61 | // any required modules inside node_modules are extracted to vendor 62 | return ( 63 | module.resource && 64 | /\.js$/.test(module.resource) && 65 | module.resource.indexOf( 66 | path.join(__dirname, '../node_modules') 67 | ) === 0 68 | ) 69 | } 70 | }), 71 | // extract webpack runtime and module manifest to its own file in order to 72 | // prevent vendor hash from being updated whenever app bundle is updated 73 | new webpack.optimize.CommonsChunkPlugin({ 74 | name: 'manifest', 75 | chunks: ['vendor'] 76 | }) 77 | ] 78 | }) 79 | 80 | if (config.build.productionGzip) { 81 | var CompressionWebpackPlugin = require('compression-webpack-plugin') 82 | 83 | webpackConfig.plugins.push( 84 | new CompressionWebpackPlugin({ 85 | asset: '[path].gz[query]', 86 | algorithm: 'gzip', 87 | test: new RegExp( 88 | '\\.(' + 89 | config.build.productionGzipExtensions.join('|') + 90 | ')$' 91 | ), 92 | threshold: 10240, 93 | minRatio: 0.8 94 | }) 95 | ) 96 | } 97 | 98 | module.exports = webpackConfig 99 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | var merge = require('webpack-merge') 2 | var prodEnv = require('./prod.env') 3 | 4 | module.exports = merge(prodEnv, { 5 | NODE_ENV: '"development"' 6 | }) 7 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | // see http://vuejs-templates.github.io/webpack for documentation. 2 | var path = require('path') 3 | 4 | module.exports = { 5 | build: { 6 | env: require('./prod.env'), 7 | index: path.resolve(__dirname, '../dist/index.html'), 8 | assetsRoot: path.resolve(__dirname, '../dist'), 9 | assetsSubDirectory: 'static', 10 | assetsPublicPath: '/', 11 | productionSourceMap: true, 12 | // Gzip off by default as many popular static hosts such as 13 | // Surge or Netlify already gzip all static assets for you. 14 | // Before setting to `true`, make sure to: 15 | // npm install --save-dev compression-webpack-plugin 16 | productionGzip: false, 17 | productionGzipExtensions: ['js', 'css'] 18 | }, 19 | dev: { 20 | env: require('./dev.env'), 21 | port: 8080, 22 | assetsSubDirectory: 'static', 23 | assetsPublicPath: '/', 24 | proxyTable: {}, 25 | // CSS Sourcemaps off by default because relative paths are "buggy" 26 | // with this option, according to the CSS-Loader README 27 | // (https://github.com/webpack/css-loader#sourcemaps) 28 | // In our experience, they generally work as expected, 29 | // just be aware of this issue when enabling this option. 30 | cssSourceMap: false 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | NODE_ENV: '"production"' 3 | } 4 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | vue-cnode 6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-cnode", 3 | "version": "1.0.0", 4 | "description": "A Vue.js project", 5 | "author": "McChen ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "node build/dev-server.js", 9 | "build": "node build/build.js" 10 | }, 11 | "keywords": [ 12 | "cnode", 13 | "Vue", 14 | "Webpack", 15 | "vue.js" 16 | ], 17 | "dependencies": { 18 | "vue": "^2.1.0", 19 | "vue-router": "^2.1.1" 20 | }, 21 | "devDependencies": { 22 | "autoprefixer": "^6.4.0", 23 | "babel-core": "^6.0.0", 24 | "babel-loader": "^6.0.0", 25 | "babel-plugin-transform-runtime": "^6.0.0", 26 | "babel-preset-es2015": "^6.0.0", 27 | "babel-preset-stage-2": "^6.0.0", 28 | "babel-register": "^6.0.0", 29 | "chalk": "^1.1.3", 30 | "connect-history-api-fallback": "^1.1.0", 31 | "css-loader": "^0.25.0", 32 | "eventsource-polyfill": "^0.9.6", 33 | "express": "^4.13.3", 34 | "extract-text-webpack-plugin": "^1.0.1", 35 | "fastclick": "^1.0.6", 36 | "file-loader": "^0.9.0", 37 | "function-bind": "^1.0.2", 38 | "html-webpack-plugin": "^2.8.1", 39 | "http-proxy-middleware": "^0.17.2", 40 | "json-loader": "^0.5.4", 41 | "node-sass": "^4.1.1", 42 | "opn": "^4.0.2", 43 | "ora": "^0.3.0", 44 | "sass-loader": "^4.1.1", 45 | "semver": "^5.3.0", 46 | "shelljs": "^0.7.4", 47 | "style-loader": "^0.13.1", 48 | "url-loader": "^0.5.7", 49 | "vue-loader": "^10.0.0", 50 | "vue-style-loader": "^1.0.0", 51 | "vue-template-compiler": "^2.1.0", 52 | "webpack": "^1.13.2", 53 | "webpack-dev-middleware": "^1.8.3", 54 | "webpack-hot-middleware": "^2.12.2", 55 | "webpack-merge": "^0.14.1", 56 | "webpack-zepto": "0.0.1" 57 | }, 58 | "engines": { 59 | "node": ">= 4.0.0", 60 | "npm": ">= 3.0.0" 61 | } 62 | } 63 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 12 | 13 | 17 | -------------------------------------------------------------------------------- /src/assets/components/backtop.vue: -------------------------------------------------------------------------------- 1 | 4 | 5 | 32 | 33 | 38 | -------------------------------------------------------------------------------- /src/assets/css/base.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @import 3 | "./common/_reset.scss", 4 | "./common/_variable.scss", 5 | "./common/_animation.scss", 6 | "./common/_iconfont.scss", 7 | "./common/_github-markdown.scss"; 8 | 9 | // mm 在autoprefixer不会做编译，自己加吧 10 | @mixin mm { 11 | display: -webkit-box; 12 | -webkit-box-pack: center; 13 | box-pack: center; 14 | -webkit-box-align: center; 15 | box-align: center; 16 | } 17 | 18 | body { line-height: 1;} 19 | img { width: 100%;} 20 | .hidden { display: none;} 21 | .vh { visibility: hidden;} 22 | .pdr16 { padding-right: 16px;} 23 | [v-cloak] { 24 | display: none; 25 | } 26 | -------------------------------------------------------------------------------- /src/assets/css/common/_animation.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @keyframes fadeIn { 4 | 0% { opacity: 0;} 5 | 100% { opacity: 1;} 6 | } 7 | -------------------------------------------------------------------------------- /src/assets/css/common/_github-markdown.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | @font-face { 3 | font-family: octicons-anchor; 4 | src: url(data:font/woff;charset=utf-8;base64,d09GRgABAAAAAAYcAA0AAAAACjQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABwAAAAca8vGTk9TLzIAAAFMAAAARAAAAFZG1VHVY21hcAAAAZAAAAA+AAABQgAP9AdjdnQgAAAB0AAAAAQAAAAEACICiGdhc3AAAAHUAAAACAAAAAj//wADZ2x5ZgAAAdwAAADRAAABEKyikaNoZWFkAAACsAAAAC0AAAA2AtXoA2hoZWEAAALgAAAAHAAAACQHngNFaG10eAAAAvwAAAAQAAAAEAwAACJsb2NhAAADDAAAAAoAAAAKALIAVG1heHAAAAMYAAAAHwAAACABEAB2bmFtZQAAAzgAAALBAAAFu3I9x/Nwb3N0AAAF/AAAAB0AAAAvaoFvbwAAAAEAAAAAzBdyYwAAAADP2IQvAAAAAM/bz7t4nGNgZGFgnMDAysDB1Ml0hoGBoR9CM75mMGLkYGBgYmBlZsAKAtJcUxgcPsR8iGF2+O/AEMPsznAYKMwIkgMA5REMOXicY2BgYGaAYBkGRgYQsAHyGMF8FgYFIM0ChED+h5j//yEk/3KoSgZGNgYYk4GRCUgwMaACRoZhDwCs7QgGAAAAIgKIAAAAAf//AAJ4nHWMMQrCQBBF/0zWrCCIKUQsTDCL2EXMohYGSSmorScInsRGL2DOYJe0Ntp7BK+gJ1BxF1stZvjz/v8DRghQzEc4kIgKwiAppcA9LtzKLSkdNhKFY3HF4lK69ExKslx7Xa+vPRVS43G98vG1DnkDMIBUgFN0MDXflU8tbaZOUkXUH0+U27RoRpOIyCKjbMCVejwypzJJG4jIwb43rfl6wbwanocrJm9XFYfskuVC5K/TPyczNU7b84CXcbxks1Un6H6tLH9vf2LRnn8Ax7A5WQAAAHicY2BkYGAA4teL1+yI57f5ysDNwgAC529f0kOmWRiYVgEpDgYmEA8AUzEKsQAAAHicY2BkYGB2+O/AEMPCAAJAkpEBFbAAADgKAe0EAAAiAAAAAAQAAAAEAAAAAAAAKgAqACoAiAAAeJxjYGRgYGBhsGFgYgABEMkFhAwM/xn0QAIAD6YBhwB4nI1Ty07cMBS9QwKlQapQW3VXySvEqDCZGbGaHULiIQ1FKgjWMxknMfLEke2A+IJu+wntrt/QbVf9gG75jK577Lg8K1qQPCfnnnt8fX1NRC/pmjrk/zprC+8D7tBy9DHgBXoWfQ44Av8t4Bj4Z8CLtBL9CniJluPXASf0Lm4CXqFX8Q84dOLnMB17N4c7tBo1AS/Qi+hTwBH4rwHHwN8DXqQ30XXAS7QaLwSc0Gn8NuAVWou/gFmnjLrEaEh9GmDdDGgL3B4JsrRPDU2hTOiMSuJUIdKQQayiAth69r6akSSFqIJuA19TrzCIaY8sIoxyrNIrL//pw7A2iMygkX5vDj+G+kuoLdX4GlGK/8Lnlz6/h9MpmoO9rafrz7ILXEHHaAx95s9lsI7AHNMBWEZHULnfAXwG9/ZqdzLI08iuwRloXE8kfhXYAvE23+23DU3t626rbs8/8adv+9DWknsHp3E17oCf+Z48rvEQNZ78paYM38qfk3v/u3l3u3GXN2Dmvmvpf1Srwk3pB/VSsp512bA/GG5i2WJ7wu430yQ5K3nFGiOqgtmSB5pJVSizwaacmUZzZhXLlZTq8qGGFY2YcSkqbth6aW1tRmlaCFs2016m5qn36SbJrqosG4uMV4aP2PHBmB3tjtmgN2izkGQyLWprekbIntJFing32a5rKWCN/SdSoga45EJykyQ7asZvHQ8PTm6cslIpwyeyjbVltNikc2HTR7YKh9LBl9DADC0U/jLcBZDKrMhUBfQBvXRzLtFtjU9eNHKin0x5InTqb8lNpfKv1s1xHzTXRqgKzek/mb7nB8RZTCDhGEX3kK/8Q75AmUM/eLkfA+0Hi908Kx4eNsMgudg5GLdRD7a84npi+YxNr5i5KIbW5izXas7cHXIMAau1OueZhfj+cOcP3P8MNIWLyYOBuxL6DRylJ4cAAAB4nGNgYoAALjDJyIAOWMCiTIxMLDmZedkABtIBygAAAA==) format('woff'); 5 | } 6 | 7 | .markdown-body { 8 | -webkit-text-size-adjust: 100%; 9 | text-size-adjust: 100%; 10 | color: #333; 11 | font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, freesans, sans-serif; 12 | font-size: 16px; 13 | line-height: 1.6; 14 | word-wrap: break-word; 15 | } 16 | 17 | .markdown-body a { 18 | background-color: transparent; 19 | } 20 | 21 | .markdown-body a:active, 22 | .markdown-body a:hover { 23 | outline: 0; 24 | } 25 | 26 | .markdown-body strong { 27 | font-weight: bold; 28 | } 29 | 30 | .markdown-body h1 { 31 | font-size: 2em; 32 | margin: 0.67em 0; 33 | } 34 | 35 | .markdown-body img { 36 | border: 0; 37 | } 38 | 39 | .markdown-body hr { 40 | box-sizing: content-box; 41 | height: 0; 42 | } 43 | 44 | .markdown-body pre { 45 | overflow: auto; 46 | } 47 | 48 | .markdown-body code, 49 | .markdown-body kbd, 50 | .markdown-body pre { 51 | font-family: monospace, monospace; 52 | font-size: 1em; 53 | } 54 | 55 | .markdown-body input { 56 | color: inherit; 57 | font: inherit; 58 | margin: 0; 59 | } 60 | 61 | .markdown-body html input[disabled] { 62 | cursor: default; 63 | } 64 | 65 | .markdown-body input { 66 | line-height: normal; 67 | } 68 | 69 | .markdown-body input[type="checkbox"] { 70 | box-sizing: border-box; 71 | padding: 0; 72 | } 73 | 74 | .markdown-body table { 75 | border-collapse: collapse; 76 | border-spacing: 0; 77 | } 78 | 79 | .markdown-body td, 80 | .markdown-body th { 81 | padding: 0; 82 | } 83 | 84 | .markdown-body * { 85 | box-sizing: border-box; 86 | } 87 | 88 | .markdown-body input { 89 | font: 13px/1.4 Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"; 90 | } 91 | 92 | .markdown-body a { 93 | color: #4078c0; 94 | text-decoration: none; 95 | } 96 | 97 | .markdown-body a:hover, 98 | .markdown-body a:active { 99 | text-decoration: underline; 100 | } 101 | 102 | .markdown-body hr { 103 | height: 0; 104 | margin: 15px 0; 105 | overflow: hidden; 106 | background: transparent; 107 | border: 0; 108 | border-bottom: 1px solid #ddd; 109 | } 110 | 111 | .markdown-body hr:before { 112 | display: table; 113 | content: ""; 114 | } 115 | 116 | .markdown-body hr:after { 117 | display: table; 118 | clear: both; 119 | content: ""; 120 | } 121 | 122 | .markdown-body h1, 123 | .markdown-body h2, 124 | .markdown-body h3, 125 | .markdown-body h4, 126 | .markdown-body h5, 127 | .markdown-body h6 { 128 | margin-top: 15px; 129 | margin-bottom: 15px; 130 | line-height: 1.1; 131 | } 132 | 133 | .markdown-body h1 { 134 | font-size: 30px; 135 | } 136 | 137 | .markdown-body h2 { 138 | font-size: 21px; 139 | } 140 | 141 | .markdown-body h3 { 142 | font-size: 16px; 143 | } 144 | 145 | .markdown-body h4 { 146 | font-size: 14px; 147 | } 148 | 149 | .markdown-body h5 { 150 | font-size: 12px; 151 | } 152 | 153 | .markdown-body h6 { 154 | font-size: 11px; 155 | } 156 | 157 | .markdown-body blockquote { 158 | margin: 0; 159 | } 160 | 161 | .markdown-body ul, 162 | .markdown-body ol { 163 | padding: 0; 164 | margin-top: 0; 165 | margin-bottom: 0; 166 | } 167 | 168 | .markdown-body ol ol, 169 | .markdown-body ul ol { 170 | list-style-type: lower-roman; 171 | } 172 | 173 | .markdown-body ul ul ol, 174 | .markdown-body ul ol ol, 175 | .markdown-body ol ul ol, 176 | .markdown-body ol ol ol { 177 | list-style-type: lower-alpha; 178 | } 179 | 180 | .markdown-body dd { 181 | margin-left: 0; 182 | } 183 | 184 | .markdown-body code { 185 | font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace; 186 | font-size: 12px; 187 | } 188 | 189 | .markdown-body pre { 190 | margin-top: 0; 191 | margin-bottom: 0; 192 | font: 12px Consolas, "Liberation Mono", Menlo, Courier, monospace; 193 | } 194 | 195 | .markdown-body .select::-ms-expand { 196 | opacity: 0; 197 | } 198 | 199 | .markdown-body .octicon { 200 | font: normal normal normal 16px/1 octicons-anchor; 201 | display: inline-block; 202 | text-decoration: none; 203 | text-rendering: auto; 204 | -webkit-font-smoothing: antialiased; 205 | -moz-osx-font-smoothing: grayscale; 206 | user-select: none; 207 | } 208 | 209 | .markdown-body .octicon-link:before { 210 | content: '\f05c'; 211 | } 212 | 213 | .markdown-body>*:first-child { 214 | margin-top: 0 !important; 215 | } 216 | 217 | .markdown-body>*:last-child { 218 | margin-bottom: 0 !important; 219 | } 220 | 221 | .markdown-body a:not([href]) { 222 | color: inherit; 223 | text-decoration: none; 224 | } 225 | 226 | .markdown-body .anchor { 227 | display: inline-block; 228 | padding-right: 2px; 229 | margin-left: -18px; 230 | } 231 | 232 | .markdown-body .anchor:focus { 233 | outline: none; 234 | } 235 | 236 | .markdown-body h1, 237 | .markdown-body h2, 238 | .markdown-body h3, 239 | .markdown-body h4, 240 | .markdown-body h5, 241 | .markdown-body h6 { 242 | margin-top: 1em; 243 | margin-bottom: 16px; 244 | font-weight: bold; 245 | line-height: 1.4; 246 | } 247 | 248 | .markdown-body h1 .octicon-link, 249 | .markdown-body h2 .octicon-link, 250 | .markdown-body h3 .octicon-link, 251 | .markdown-body h4 .octicon-link, 252 | .markdown-body h5 .octicon-link, 253 | .markdown-body h6 .octicon-link { 254 | color: #000; 255 | vertical-align: middle; 256 | visibility: hidden; 257 | } 258 | 259 | .markdown-body h1:hover .anchor, 260 | .markdown-body h2:hover .anchor, 261 | .markdown-body h3:hover .anchor, 262 | .markdown-body h4:hover .anchor, 263 | .markdown-body h5:hover .anchor, 264 | .markdown-body h6:hover .anchor { 265 | text-decoration: none; 266 | } 267 | 268 | .markdown-body h1:hover .anchor .octicon-link, 269 | .markdown-body h2:hover .anchor .octicon-link, 270 | .markdown-body h3:hover .anchor .octicon-link, 271 | .markdown-body h4:hover .anchor .octicon-link, 272 | .markdown-body h5:hover .anchor .octicon-link, 273 | .markdown-body h6:hover .anchor .octicon-link { 274 | visibility: visible; 275 | } 276 | 277 | .markdown-body h1 { 278 | padding-bottom: 0.3em; 279 | font-size: 2.25em; 280 | line-height: 1.2; 281 | border-bottom: 1px solid #eee; 282 | } 283 | 284 | .markdown-body h1 .anchor { 285 | line-height: 1; 286 | } 287 | 288 | .markdown-body h2 { 289 | padding-bottom: 0.3em; 290 | font-size: 1.75em; 291 | line-height: 1.225; 292 | border-bottom: 1px solid #eee; 293 | } 294 | 295 | .markdown-body h2 .anchor { 296 | line-height: 1; 297 | } 298 | 299 | .markdown-body h3 { 300 | font-size: 1.5em; 301 | line-height: 1.43; 302 | } 303 | 304 | .markdown-body h3 .anchor { 305 | line-height: 1.2; 306 | } 307 | 308 | .markdown-body h4 { 309 | font-size: 1.25em; 310 | } 311 | 312 | .markdown-body h4 .anchor { 313 | line-height: 1.2; 314 | } 315 | 316 | .markdown-body h5 { 317 | font-size: 1em; 318 | } 319 | 320 | .markdown-body h5 .anchor { 321 | line-height: 1.1; 322 | } 323 | 324 | .markdown-body h6 { 325 | font-size: 1em; 326 | color: #777; 327 | } 328 | 329 | .markdown-body h6 .anchor { 330 | line-height: 1.1; 331 | } 332 | 333 | .markdown-body p, 334 | .markdown-body blockquote, 335 | .markdown-body ul, 336 | .markdown-body ol, 337 | .markdown-body dl, 338 | .markdown-body table, 339 | .markdown-body pre { 340 | margin-top: 0; 341 | margin-bottom: 16px; 342 | } 343 | 344 | .markdown-body hr { 345 | height: 4px; 346 | padding: 0; 347 | margin: 16px 0; 348 | background-color: #e7e7e7; 349 | border: 0 none; 350 | } 351 | 352 | .markdown-body ul, 353 | .markdown-body ol { 354 | padding-left: 2em; 355 | } 356 | 357 | .markdown-body ul ul, 358 | .markdown-body ul ol, 359 | .markdown-body ol ol, 360 | .markdown-body ol ul { 361 | margin-top: 0; 362 | margin-bottom: 0; 363 | } 364 | 365 | .markdown-body li>p { 366 | margin-top: 16px; 367 | } 368 | 369 | .markdown-body dl { 370 | padding: 0; 371 | } 372 | 373 | .markdown-body dl dt { 374 | padding: 0; 375 | margin-top: 16px; 376 | font-size: 1em; 377 | font-style: italic; 378 | font-weight: bold; 379 | } 380 | 381 | .markdown-body dl dd { 382 | padding: 0 16px; 383 | margin-bottom: 16px; 384 | } 385 | 386 | .markdown-body blockquote { 387 | padding: 0 15px; 388 | color: #777; 389 | border-left: 4px solid #ddd; 390 | } 391 | 392 | .markdown-body blockquote>:first-child { 393 | margin-top: 0; 394 | } 395 | 396 | .markdown-body blockquote>:last-child { 397 | margin-bottom: 0; 398 | } 399 | 400 | .markdown-body table { 401 | display: block; 402 | width: 100%; 403 | overflow: auto; 404 | word-break: normal; 405 | word-break: keep-all; 406 | } 407 | 408 | .markdown-body table th { 409 | font-weight: bold; 410 | } 411 | 412 | .markdown-body table th, 413 | .markdown-body table td { 414 | padding: 6px 13px; 415 | border: 1px solid #ddd; 416 | } 417 | 418 | .markdown-body table tr { 419 | background-color: #fff; 420 | border-top: 1px solid #ccc; 421 | } 422 | 423 | .markdown-body table tr:nth-child(2n) { 424 | background-color: #f8f8f8; 425 | } 426 | 427 | .markdown-body img { 428 | max-width: 100%; 429 | box-sizing: content-box; 430 | background-color: #fff; 431 | } 432 | 433 | .markdown-body code { 434 | padding: 0; 435 | padding-top: 0.2em; 436 | padding-bottom: 0.2em; 437 | margin: 0; 438 | font-size: 85%; 439 | background-color: rgba(0,0,0,0.04); 440 | border-radius: 3px; 441 | } 442 | 443 | .markdown-body code:before, 444 | .markdown-body code:after { 445 | letter-spacing: -0.2em; 446 | content: "\00a0"; 447 | } 448 | 449 | .markdown-body pre>code { 450 | padding: 0; 451 | margin: 0; 452 | font-size: 100%; 453 | word-break: normal; 454 | white-space: pre; 455 | background: transparent; 456 | border: 0; 457 | } 458 | 459 | .markdown-body .highlight { 460 | margin-bottom: 16px; 461 | } 462 | 463 | .markdown-body .highlight pre, 464 | .markdown-body pre { 465 | padding: 16px; 466 | overflow: auto; 467 | font-size: 85%; 468 | line-height: 1.45; 469 | background-color: #f7f7f7; 470 | border-radius: 3px; 471 | } 472 | 473 | .markdown-body .highlight pre { 474 | margin-bottom: 0; 475 | word-break: normal; 476 | } 477 | 478 | .markdown-body pre { 479 | word-wrap: normal; 480 | } 481 | 482 | .markdown-body pre code { 483 | display: inline; 484 | max-width: initial; 485 | padding: 0; 486 | margin: 0; 487 | overflow: initial; 488 | line-height: inherit; 489 | word-wrap: normal; 490 | background-color: transparent; 491 | border: 0; 492 | } 493 | 494 | .markdown-body pre code:before, 495 | .markdown-body pre code:after { 496 | content: normal; 497 | } 498 | 499 | .markdown-body kbd { 500 | display: inline-block; 501 | padding: 3px 5px; 502 | font-size: 11px; 503 | line-height: 10px; 504 | color: #555; 505 | vertical-align: middle; 506 | background-color: #fcfcfc; 507 | border: solid 1px #ccc; 508 | border-bottom-color: #bbb; 509 | border-radius: 3px; 510 | box-shadow: inset 0 -1px 0 #bbb; 511 | } 512 | 513 | .markdown-body .pl-c { 514 | color: #969896; 515 | } 516 | 517 | .markdown-body .pl-c1, 518 | .markdown-body .pl-s .pl-v { 519 | color: #0086b3; 520 | } 521 | 522 | .markdown-body .pl-e, 523 | .markdown-body .pl-en { 524 | color: #795da3; 525 | } 526 | 527 | .markdown-body .pl-s .pl-s1, 528 | .markdown-body .pl-smi { 529 | color: #333; 530 | } 531 | 532 | .markdown-body .pl-ent { 533 | color: #63a35c; 534 | } 535 | 536 | .markdown-body .pl-k { 537 | color: #a71d5d; 538 | } 539 | 540 | .markdown-body .pl-pds, 541 | .markdown-body .pl-s, 542 | .markdown-body .pl-s .pl-pse .pl-s1, 543 | .markdown-body .pl-sr, 544 | .markdown-body .pl-sr .pl-cce, 545 | .markdown-body .pl-sr .pl-sra, 546 | .markdown-body .pl-sr .pl-sre { 547 | color: #183691; 548 | } 549 | 550 | .markdown-body .pl-v { 551 | color: #ed6a43; 552 | } 553 | 554 | .markdown-body .pl-id { 555 | color: #b52a1d; 556 | } 557 | 558 | .markdown-body .pl-ii { 559 | background-color: #b52a1d; 560 | color: #f8f8f8; 561 | } 562 | 563 | .markdown-body .pl-sr .pl-cce { 564 | color: #63a35c; 565 | font-weight: bold; 566 | } 567 | 568 | .markdown-body .pl-ml { 569 | color: #693a17; 570 | } 571 | 572 | .markdown-body .pl-mh, 573 | .markdown-body .pl-mh .pl-en, 574 | .markdown-body .pl-ms { 575 | color: #1d3e81; 576 | font-weight: bold; 577 | } 578 | 579 | .markdown-body .pl-mq { 580 | color: #008080; 581 | } 582 | 583 | .markdown-body .pl-mi { 584 | color: #333; 585 | font-style: italic; 586 | } 587 | 588 | .markdown-body .pl-mb { 589 | color: #333; 590 | font-weight: bold; 591 | } 592 | 593 | .markdown-body .pl-md { 594 | background-color: #ffecec; 595 | color: #bd2c00; 596 | } 597 | 598 | .markdown-body .pl-mi1 { 599 | background-color: #eaffea; 600 | color: #55a532; 601 | } 602 | 603 | .markdown-body .pl-mdr { 604 | color: #795da3; 605 | font-weight: bold; 606 | } 607 | 608 | .markdown-body .pl-mo { 609 | color: #1d3e81; 610 | } 611 | 612 | .markdown-body kbd { 613 | display: inline-block; 614 | padding: 3px 5px; 615 | font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace; 616 | line-height: 10px; 617 | color: #555; 618 | vertical-align: middle; 619 | background-color: #fcfcfc; 620 | border: solid 1px #ccc; 621 | border-bottom-color: #bbb; 622 | border-radius: 3px; 623 | box-shadow: inset 0 -1px 0 #bbb; 624 | } 625 | 626 | .markdown-body:before { 627 | display: table; 628 | content: ""; 629 | } 630 | 631 | .markdown-body:after { 632 | display: table; 633 | clear: both; 634 | content: ""; 635 | } 636 | 637 | .markdown-body .task-list-item { 638 | list-style-type: none; 639 | } 640 | 641 | .markdown-body .task-list-item+.task-list-item { 642 | margin-top: 3px; 643 | } 644 | 645 | .markdown-body .task-list-item input { 646 | margin: 0 0.35em 0.25em -1.6em; 647 | vertical-align: middle; 648 | } 649 | 650 | .markdown-body :checked+.radio-label { 651 | z-index: 1; 652 | position: relative; 653 | border-color: #4078c0; 654 | } 655 | -------------------------------------------------------------------------------- /src/assets/css/common/_iconfont.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | @font-face {font-family: "iconfont"; 4 | src: url('./assets/css/fonts/iconfont.eot?t=1482392872144'); /* IE9*/ 5 | src: url('./assets/css/fonts/iconfont.eot?t=1482392872144#iefix') format('embedded-opentype'), /* IE6-IE8 */ 6 | url('./assets/css/fonts/iconfont.woff?t=1482392872144') format('woff'), /* chrome, firefox */ 7 | url('./assets/css/fonts/iconfont.ttf?t=1482392872144') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 8 | url('./assets/css/fonts/iconfont.svg?t=1482392872144#iconfont') format('svg'); /* iOS 4.1- */ 9 | } 10 | 11 | .iconfont { 12 | font-family:"iconfont" !important; 13 | font-size:16px; 14 | font-style:normal; 15 | -webkit-font-smoothing: antialiased; 16 | -moz-osx-font-smoothing: grayscale; 17 | } 18 | 19 | .icon-zan:before { content: "\e659"; } 20 | 21 | .icon-backtop:before { content: "\e681"; } 22 | 23 | -------------------------------------------------------------------------------- /src/assets/css/common/_reset.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | /* @update: 2015-9-10 11:31:31 */ 4 | body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0}h1,h2,h3,h4,h5,h6,input,textarea,select,button{font-size:100%;font-weight:normal}ul,ol{list-style-type:none;list-style-image:none}li{list-style:none}html,body{-webkit-user-select:none;-moz-user-select:none;user-select:none}a,img{-webkit-touch-callout:none}a{text-decoration:none;color:#333}a:active,a:hover{outline:0 none}a:focus{outerline:1px dotted}img{vertical-align:middle}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}body,button,input,select,textarea{font-family:'helvetica neue', tahoma, 'hiragino sans gb', stheiti, 'wenquanyi micro hei', \5FAE\8F6F\96C5\9ED1, \5B8B\4F53, sans-serif}button,input,select,textarea{font-family:inherit;font-size:100%;vertical-align:baseline}textarea{overflow:auto;vertical-align:top;resize:vertical}section,article,aside,header,footer,nav,figure,menu{display:block;padding:0;margin:0}*{-webkit-tap-highlight-color:transparent}html,body,form,fieldset,p,div,h1,h2,h3,h4,h5,h6{-webkit-text-size-adjust:none}input,button,select,textarea{outline:none;-webkit-appearance:none}input{border:none}input:focus::-webkit-input-placeholder{color:#efefef}html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%;font-size:62.5%}body{font-size:14px;line-height:1.5}article,aside,figcaption,figure,footer,header,nav,section,summary{display:block}html,body{width:100%;min-width:320px;min-height:100%}html{height:100%}.ex-mode{height:100%;overflow-y:scroll;-webkit-touch-scrolling:touch}.os-mode{width:100%;height:100%;overflow:hidden}.size10{font-size:10px}.size12{font-size:12px}.size13{font-size:13px}.size14{font-size:14px}.size15{font-size:15px}.size16{font-size:16px}.size17{font-size:17px}.size18{font-size:18px}.size19{font-size:19px}.size20{font-size:20px}.size22{font-size:22px}.size24{font-size:24px}.size26{font-size:26px}.size28{font-size:28px}.size30{font-size:30px}.size32{font-size:32px}.size34{font-size:34px}.size36{font-size:36px}.size38{font-size:38px}.size40{font-size:40px}.font-bold{font-weight:bold}.ta-l{text-align:left}.ta-c{text-align:center}.ta-r{text-align:right}.va-tb{vertical-align:text-bottom}.va-m{vertical-align:middle}.block{display:block}.blockA{display:block;width:100%;height:100%;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;-ms-box-sizing:border-box;box-sizing:border-box}.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.fl{float:left}.fr{float:right}.clearfix{display:inline-table;display:block;zoom:1}.clearfix:after{clear:both;content:".";display:block;height:0;visibility:hidden}.pr{position:relative}.abs-lt{position:absolute;left:0;top:0}.abs-lm{position:absolute;left:0;top:50%;-webkit-transform:translate3d(0, -50%, 0);-moz-transform:translate3d(0, -50%, 0);-ms-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}.abs-lb{position:absolute;left:0;bottom:0}.abs-mt{position:absolute;left:50%;top:0;-webkit-transform:translate3d(-50%, 0, 0);-moz-transform:translate3d(-50%, 0, 0);-ms-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0)}.abs-mm{position:absolute;left:50%;top:50%;-webkit-transform:translate3d(-50%, -50%, 0);-moz-transform:translate3d(-50%, -50%, 0);-ms-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0)}.abs-mb{position:absolute;left:50%;bottom:0;-webkit-transform:translate3d(-50%, 0, 0);-moz-transform:translate3d(-50%, 0, 0);-ms-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0)}.abs-rt{position:absolute;right:0;top:0}.abs-rm{position:absolute;right:0;top:50%;-webkit-transform:translate3d(0, -50%, 0);-moz-transform:translate3d(0, -50%, 0);-ms-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}.abs-rb{position:absolute;right:0;bottom:0}.fix-lt{position:fixed;left:0;top:0}.fix-lm{position:fixed;left:0;top:50%;-webkit-transform:translate3d(0, -50%, 0);-moz-transform:translate3d(0, -50%, 0);-ms-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}.fix-lb{position:fixed;left:0;bottom:0}.fix-mt{position:fixed;left:50%;top:0;-webkit-transform:translate3d(-50%, 0, 0);-moz-transform:translate3d(-50%, 0, 0);-ms-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0)}.fix-mm{position:fixed;left:50%;top:50%;-webkit-transform:translate3d(-50%, -50%, 0);-moz-transform:translate3d(-50%, -50%, 0);-ms-transform:translate3d(-50%, -50%, 0);transform:translate3d(-50%, -50%, 0)}.fix-mb{position:fixed;left:50%;bottom:0;-webkit-transform:translate3d(-50%, 0, 0);-moz-transform:translate3d(-50%, 0, 0);-ms-transform:translate3d(-50%, 0, 0);transform:translate3d(-50%, 0, 0)}.fix-rt{position:fixed;right:0;top:0}.fix-rm{position:fixed;right:0;top:50%;-webkit-transform:translate3d(0, -50%, 0);-moz-transform:translate3d(0, -50%, 0);-ms-transform:translate3d(0, -50%, 0);transform:translate3d(0, -50%, 0)}.fix-rb{position:fixed;right:0;bottom:0}.center-box{font-size:0;height:100%;letter-spacing:-5px}.center-box .center-hack{display:inline-block;font-size:0;width:0;height:100%;vertical-align:middle}.center-box .center-body{letter-spacing:normal;word-spacing:normal;display:inline-block;vertical-align:middle;padding:0 !important;margin:0 !important;width:100%;white-space:normal;word-wrap:break-word}.center-box .center-img{display:inline-block;width:100%;text-align:center;vertical-align:middle;padding:0 !important;margin:0 !important}.center-box img{vertical-align:middle}.auto{margin-left:auto;margin-right:auto}.m5{margin:5px}.m10{margin:10px}.m15{margin:15px}.m20{margin:20px}.m25{margin:25px}.mtb5{margin-top:5px;margin-bottom:5px}.mtb10{margin-top:10px;margin-bottom:10px}.mtb15{margin-top:15px;margin-bottom:15px}.mtb20{margin-top:20px;margin-bottom:20px}.mtb25{margin-top:25px;margin-bottom:25px}.mlr5{margin-left:5px;margin-right:5px}.mlr10{margin-left:10px;margin-right:10px}.mlr15{margin-left:15px;margin-right:15px}.mlr20{margin-left:20px;margin-right:20px}.mlr25{margin-left:25px;margin-right:25px}.mt5{margin-top:5px}.mt10{margin-top:10px}.mt15{margin-top:15px}.mt20{margin-top:20px}.mt25{margin-top:25px}.mr5{margin-right:5px}.mr10{margin-right:10px}.mr15{margin-right:15px}.mr20{margin-right:20px}.mr25{margin-right:25px}.mb5{margin-bottom:5px}.mb10{margin-bottom:10px}.mb15{margin-bottom:15px}.mb20{margin-bottom:20px}.mb25{margin-bottom:25px}.ml5{margin-left:5px}.ml10{margin-left:10px}.ml15{margin-left:15px}.ml20{margin-left:20px}.ml25{margin-left:25px}.p5{padding:5px}.p10{padding:10px}.p15{padding:15px}.p20{padding:20px}.p25{padding:25px}.ptb5{padding-top:5px;padding-bottom:5px}.ptb10{padding-top:10px;padding-bottom:10px}.ptb15{padding-top:15px;padding-bottom:15px}.ptb20{padding-top:20px;padding-bottom:20px}.ptb25{padding-top:25px;padding-bottom:25px}.plr5{padding-left:5px;padding-right:5px}.plr10{padding-left:10px;padding-right:10px}.plr15{padding-left:15px;padding-right:15px}.plr20{padding-left:20px;padding-right:20px}.plr25{padding-left:25px;padding-right:25px}.pt5{padding-top:5px}.pt10{padding-top:10px}.pt15{padding-top:15px}.pt20{padding-top:20px}.pt25{padding-top:25px}.pr5{padding-right:5px}.pr10{padding-right:10px}.pr15{padding-right:15px}.pr20{padding-right:20px}.pr25{padding-right:25px}.pb5{padding-bottom:5px}.pb10{padding-bottom:10px}.pb15{padding-bottom:15px}.pb20{padding-bottom:20px}.pb25{padding-bottom:25px}.pl5{padding-left:5px}.pl10{padding-left:10px}.pl15{padding-left:15px}.pl20{padding-left:20px}.pl25{padding-left:25px}.placeBlock-5{width:100%;height:5px;display:block}.placeBlock-10{width:100%;height:10px;display:block}.placeBlock-15{width:100%;height:15px;display:block}.placeBlock-20{width:100%;height:20px;display:block}.placeBlock-25{width:100%;height:25px;display:block}.placeBlock-30{width:100%;height:30px;display:block}.placeBlock-40{width:100%;height:40px;display:block}.placeBlock-50{width:100%;height:50px;display:block}.pct5{width:5%}.pct10{width:10%}.pct15{width:15%}.pct20{width:20%}.pct25{width:25%}.pct30{width:30%}.pct33{width:33.3%}.pct40{width:40%}.pct50{width:50%}.pct60{width:60%}.pct66{width:66.6%}.pct70{width:70%}.pct75{width:75%}.pct80{width:80%}.pct90{width:90%}.pct100{width:100%}.h10{height:10%}.h20{height:20%}.h30{height:30%}.h40{height:40%}.h50{height:50%}.h55{height:55%}.h60{height:60%}.h65{height:65%}.h70{height:70%}.h75{height:75%}.h80{height:80%}.h85{height:85%}.h90{height:90%}.h95{height:95%}.h100{height:100%}.fullLayer{width:100%;height:100%} 5 | -------------------------------------------------------------------------------- /src/assets/css/common/_variable.scss: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | // color 4 | $white: #ffffff; 5 | $green: #80bd01; 6 | $black: #333333; 7 | $secondBlack: #666666; 8 | $dark: #999999; 9 | $border: #dddddd; 10 | // z-index 11 | -------------------------------------------------------------------------------- /src/assets/css/fonts/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChenJiaH/vue-cnode/f8a4f1dee294f21e398a3c9bf5a250e94a2de87f/src/assets/css/fonts/iconfont.eot -------------------------------------------------------------------------------- /src/assets/css/fonts/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Created by FontForge 20120731 at Thu Dec 22 15:47:52 2016 6 | By admin 7 | 8 | 9 | 10 | 24 | 26 | 28 | 30 | 32 | 34 | 38 | 42 | 50 | 51 | 52 | -------------------------------------------------------------------------------- /src/assets/css/fonts/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChenJiaH/vue-cnode/f8a4f1dee294f21e398a3c9bf5a250e94a2de87f/src/assets/css/fonts/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/css/fonts/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChenJiaH/vue-cnode/f8a4f1dee294f21e398a3c9bf5a250e94a2de87f/src/assets/css/fonts/iconfont.woff -------------------------------------------------------------------------------- /src/assets/images/preLoad.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChenJiaH/vue-cnode/f8a4f1dee294f21e398a3c9bf5a250e94a2de87f/src/assets/images/preLoad.gif -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChenJiaH/vue-cnode/f8a4f1dee294f21e398a3c9bf5a250e94a2de87f/src/assets/logo.png -------------------------------------------------------------------------------- /src/assets/view/about.vue: -------------------------------------------------------------------------------- 1 | 40 | 202 | 318 | 319 | -------------------------------------------------------------------------------- /src/assets/view/all.vue: -------------------------------------------------------------------------------- 1 | 52 | 212 | 385 | -------------------------------------------------------------------------------- /src/assets/view/preLoader.vue: -------------------------------------------------------------------------------- 1 | 4 | 22 | 26 | -------------------------------------------------------------------------------- /src/assets/view/topic.vue: -------------------------------------------------------------------------------- 1 | 58 | 141 | 271 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | // The Vue build version to load with the `import` command 2 | // (runtime-only or standalone) has been set in webpack.base.conf with an alias. 3 | import Vue from 'vue'; 4 | import $ from 'webpack-zepto'; 5 | import VueRouter from 'vue-router'; 6 | import routes from './routes'; 7 | import FastClick from 'fastclick'; 8 | import App from './App' 9 | 10 | $.ajaxSettings.crossDomain = true; 11 | 12 | /* eslint-disable no-new */ 13 | 14 | Vue.use(VueRouter); 15 | 16 | var router = new VueRouter({ 17 | routes 18 | }); 19 | FastClick.attach(document.body); 20 | 21 | var vm = new Vue({ 22 | el: "#app", 23 | router, 24 | template: '', 25 | components: { 26 | App 27 | } 28 | }); 29 | -------------------------------------------------------------------------------- /src/routes.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @Author: Created By McChen 3 | * @Date: 2016/12/21 4 | * @Mail: chenjiahao@jd.com 5 | * @Version: V1.0.0 6 | */ 7 | 8 | import preLoader from './assets/view/preLoader.vue'; 9 | import all from './assets/view/all.vue'; 10 | import topic from './assets/view/topic.vue'; 11 | import about from './assets/view/about.vue'; 12 | 13 | export default [ 14 | { 15 | path: "/", 16 | name: "home", 17 | component: preLoader 18 | }, 19 | { 20 | path: "/all", 21 | name: "all", 22 | component: all 23 | }, 24 | { 25 | path: "/topic/:id", 26 | name: "topic", 27 | component: topic 28 | }, 29 | { 30 | path: "/about", 31 | name: "about", 32 | component: about 33 | } 34 | ]; 35 | -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/ChenJiaH/vue-cnode/f8a4f1dee294f21e398a3c9bf5a250e94a2de87f/static/.gitkeep --------------------------------------------------------------------------------