├── .babelrc ├── .editorconfig ├── .gitignore ├── .postcssrc.js ├── README.md ├── build ├── build.js ├── check-versions.js ├── logo.png ├── utils.js ├── vue-loader.conf.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 ├── pic ├── Animation1.gif ├── Animation2.gif └── Animation3.gif ├── src ├── App.vue ├── assets │ ├── css │ │ └── reset.css │ ├── icons │ │ ├── demo.css │ │ ├── demo_fontclass.html │ │ ├── iconfont.css │ │ ├── iconfont.eot │ │ ├── iconfont.js │ │ ├── iconfont.svg │ │ ├── iconfont.ttf │ │ └── iconfont.woff │ ├── img │ │ ├── banner-1.jpg │ │ ├── banner-2.jpg │ │ ├── book-cover.jpg │ │ ├── category-icon.png │ │ ├── female-icon.png │ │ ├── finish-icon.png │ │ ├── male-icon.png │ │ └── rank-icon.png │ └── logo.png ├── components │ ├── bookinfo.vue │ ├── bookinfo │ │ ├── info-content.vue │ │ └── info-recommend.vue │ ├── bookrank.vue │ ├── bookranklist.vue │ ├── category.vue │ ├── category │ │ ├── female-category.vue │ │ └── male-category.vue │ ├── categorylist.vue │ ├── common │ │ ├── footer.vue │ │ └── header.vue │ ├── homepage.vue │ ├── homepage │ │ ├── index-banner.vue │ │ ├── index-channel.vue │ │ ├── index-female.vue │ │ ├── index-male.vue │ │ ├── index-navcategory.vue │ │ └── index-newbook.vue │ ├── listitem │ │ └── listitem.vue │ ├── me.vue │ ├── reader.vue │ ├── reader │ │ ├── reader-catalog.vue │ │ ├── reader-content.vue │ │ └── reader-menu.vue │ └── search.vue ├── main.js ├── router │ └── index.js ├── service │ └── api.js ├── store │ └── index.js └── util │ └── util.js └── static └── .gitkeep /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | ["env", { 4 | "modules": false, 5 | "targets": { 6 | "browsers": ["> 1%", "last 2 versions", "not ie <= 8"] 7 | } 8 | }], 9 | "stage-2" 10 | ], 11 | "plugins": ["transform-vue-jsx", "transform-runtime"] 12 | } 13 | -------------------------------------------------------------------------------- /.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 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Editor directories and files 9 | .idea 10 | .vscode 11 | *.suo 12 | *.ntvs* 13 | *.njsproj 14 | *.sln 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | "plugins": { 5 | "postcss-import": {}, 6 | "postcss-url": {}, 7 | // to edit target browsers: use "browserslist" field in package.json 8 | "autoprefixer": {} 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![](https://img.shields.io/badge/vue-2.5.2-4EDD96.svg) ![](https://img.shields.io/badge/vuex-3.0.1-69D3E3.svg) ![](https://img.shields.io/badge/axios-0.17.1-56DD7F.svg) 2 | 3 | # vue_wumReader 4 | 5 | 因为学习vue，所以试着用其来做个了小说阅读webapp，主要使用了vue2.0+vuex+vue-router等。 6 | 7 | 本项目使用了追书神器api，仅用于学习和了解。 8 | 9 | 本人只是一个初学者，有什么建议欢迎提出，让我们共同进步，如果你也刚学vue，可以了解一下，喜欢可以给star 10 | 给我个小鼓励。 11 | 12 | ## 运行 13 | 14 | ``` bash 15 | 16 | # 安装依赖 17 | npm install 18 | 19 | # 开发模式 20 | npm run dev 21 | 22 | ``` 23 | 24 | ## 页面效果展示 25 | 26 | ### 主页和阅读 27 | 28 | ![](https://github.com/windjourney/vue-wumReader/blob/master/pic/Animation1.gif) 29 | 30 | ### 分类和排行 31 | 32 | ![](https://github.com/windjourney/vue-wumReader/blob/master/pic/Animation2.gif) 33 | 34 | ### 收藏和删除 35 | 36 | ![](https://github.com/windjourney/vue-wumReader/blob/master/pic/Animation3.gif) 37 | 38 | ## 已完成目标 39 | 40 | - [x] 小说搜索 41 | - [x] 小说书架 42 | - [x] 小说排行 43 | - [x] 小说分类 44 | - [x] 小说详情 45 | - [x] 阅读器背景更改 46 | - [x] 小说换源 47 | - [x] 章节跳转 48 | - [x] 小说删除 49 | 50 | ## 未完成目标 51 | 52 | - [ ] 小说书单 53 | - [ ] 皮肤更换功能 54 | - [ ] 书架显示模式更改 55 | - [ ] 小说阅读位置记录(非章节) 56 | - [ ] 排行周榜月榜 57 | 58 | ## 遇到的错误 59 | 60 | - [x] api跨域问题
61 | 解决：使用vue-cli的话，可以在config/index,js 中找到dev里的proxyTable 写入 62 | ```javacript 63 | '/api':{ 64 | target:'http://api.xxxx.com',//源地址 65 | changeOrigin:true,//改变源 66 | pathRewrite:{ //路径重写 67 | '^/api':'http://api.xxxx.com' 68 | } 69 | } 70 | ``` 71 | 72 | 
注意：只在开发环境下有效
73 | - [x] v-for中动态更改对应item的:class的真假无效
74 | 解决：使用$set(obj,index,value)来进行变更
75 | - [x] 使用 keep-alive 时 想让指定组件保存其他组件依然重新加载
76 | 解决： 77 | ```html 78 | xxx 79 | ``` 80 | 
注意:name不是router中定义的name，而是组件内定义的name。
81 | - [x] 路由进出时想要做些事情怎么办
82 | 解决：使用beforeRouteEnter和beforeRouteLeave等钩子函数进行设置
83 | 
注意：里面必须要使用next()函数，否则不跳转路由
-------------------------------------------------------------------------------- /build/build.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | require('./check-versions')() 3 | 4 | process.env.NODE_ENV = 'production' 5 | 6 | const ora = require('ora') 7 | const rm = require('rimraf') 8 | const path = require('path') 9 | const chalk = require('chalk') 10 | const webpack = require('webpack') 11 | const config = require('../config') 12 | const webpackConfig = require('./webpack.prod.conf') 13 | 14 | const spinner = ora('building for production...') 15 | spinner.start() 16 | 17 | rm(path.join(config.build.assetsRoot, config.build.assetsSubDirectory), err => { 18 | if (err) throw err 19 | webpack(webpackConfig, (err, stats) => { 20 | spinner.stop() 21 | if (err) throw err 22 | process.stdout.write(stats.toString({ 23 | colors: true, 24 | modules: false, 25 | children: false, // If you are using ts-loader, setting this to true will make TypeScript errors show up during build. 26 | chunks: false, 27 | chunkModules: false 28 | }) + '\n\n') 29 | 30 | if (stats.hasErrors()) { 31 | console.log(chalk.red(' Build failed with errors.\n')) 32 | process.exit(1) 33 | } 34 | 35 | console.log(chalk.cyan(' Build complete.\n')) 36 | console.log(chalk.yellow( 37 | ' Tip: built files are meant to be served over an HTTP server.\n' + 38 | ' Opening index.html over file:// won\'t work.\n' 39 | )) 40 | }) 41 | }) 42 | -------------------------------------------------------------------------------- /build/check-versions.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const chalk = require('chalk') 3 | const semver = require('semver') 4 | const packageConfig = require('../package.json') 5 | const shell = require('shelljs') 6 | 7 | function exec (cmd) { 8 | return require('child_process').execSync(cmd).toString().trim() 9 | } 10 | 11 | const versionRequirements = [ 12 | { 13 | name: 'node', 14 | currentVersion: semver.clean(process.version), 15 | versionRequirement: packageConfig.engines.node 16 | } 17 | ] 18 | 19 | if (shell.which('npm')) { 20 | versionRequirements.push({ 21 | name: 'npm', 22 | currentVersion: exec('npm --version'), 23 | versionRequirement: packageConfig.engines.npm 24 | }) 25 | } 26 | 27 | module.exports = function () { 28 | const warnings = [] 29 | 30 | for (let i = 0; i < versionRequirements.length; i++) { 31 | const mod = versionRequirements[i] 32 | 33 | if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { 34 | warnings.push(mod.name + ': ' + 35 | chalk.red(mod.currentVersion) + ' should be ' + 36 | chalk.green(mod.versionRequirement) 37 | ) 38 | } 39 | } 40 | 41 | if (warnings.length) { 42 | console.log('') 43 | console.log(chalk.yellow('To use this template, you must update following to modules:')) 44 | console.log() 45 | 46 | for (let i = 0; i < warnings.length; i++) { 47 | const warning = warnings[i] 48 | console.log(' ' + warning) 49 | } 50 | 51 | console.log() 52 | process.exit(1) 53 | } 54 | } 55 | -------------------------------------------------------------------------------- /build/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/build/logo.png -------------------------------------------------------------------------------- /build/utils.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const config = require('../config') 4 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 5 | const packageConfig = require('../package.json') 6 | 7 | exports.assetsPath = function (_path) { 8 | const assetsSubDirectory = process.env.NODE_ENV === 'production' 9 | ? config.build.assetsSubDirectory 10 | : config.dev.assetsSubDirectory 11 | 12 | return path.posix.join(assetsSubDirectory, _path) 13 | } 14 | 15 | exports.cssLoaders = function (options) { 16 | options = options || {} 17 | 18 | const cssLoader = { 19 | loader: 'css-loader', 20 | options: { 21 | sourceMap: options.sourceMap 22 | } 23 | } 24 | 25 | const postcssLoader = { 26 | loader: 'postcss-loader', 27 | options: { 28 | sourceMap: options.sourceMap 29 | } 30 | } 31 | 32 | // generate loader string to be used with extract text plugin 33 | function generateLoaders (loader, loaderOptions) { 34 | const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader] 35 | 36 | if (loader) { 37 | loaders.push({ 38 | loader: loader + '-loader', 39 | options: Object.assign({}, loaderOptions, { 40 | sourceMap: options.sourceMap 41 | }) 42 | }) 43 | } 44 | 45 | // Extract CSS when that option is specified 46 | // (which is the case during production build) 47 | if (options.extract) { 48 | return ExtractTextPlugin.extract({ 49 | use: loaders, 50 | fallback: 'vue-style-loader' 51 | }) 52 | } else { 53 | return ['vue-style-loader'].concat(loaders) 54 | } 55 | } 56 | 57 | // https://vue-loader.vuejs.org/en/configurations/extract-css.html 58 | return { 59 | css: generateLoaders(), 60 | postcss: generateLoaders(), 61 | less: generateLoaders('less'), 62 | sass: generateLoaders('sass', { indentedSyntax: true }), 63 | scss: generateLoaders('sass'), 64 | stylus: generateLoaders('stylus'), 65 | styl: generateLoaders('stylus') 66 | } 67 | } 68 | 69 | // Generate loaders for standalone style files (outside of .vue) 70 | exports.styleLoaders = function (options) { 71 | const output = [] 72 | const loaders = exports.cssLoaders(options) 73 | 74 | for (const extension in loaders) { 75 | const loader = loaders[extension] 76 | output.push({ 77 | test: new RegExp('\\.' + extension + '$'), 78 | use: loader 79 | }) 80 | } 81 | 82 | return output 83 | } 84 | 85 | exports.createNotifierCallback = () => { 86 | const notifier = require('node-notifier') 87 | 88 | return (severity, errors) => { 89 | if (severity !== 'error') return 90 | 91 | const error = errors[0] 92 | const filename = error.file && error.file.split('!').pop() 93 | 94 | notifier.notify({ 95 | title: packageConfig.name, 96 | message: severity + ': ' + error.name, 97 | subtitle: filename || '', 98 | icon: path.join(__dirname, 'logo.png') 99 | }) 100 | } 101 | } 102 | -------------------------------------------------------------------------------- /build/vue-loader.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const config = require('../config') 4 | const isProduction = process.env.NODE_ENV === 'production' 5 | const sourceMapEnabled = isProduction 6 | ? config.build.productionSourceMap 7 | : config.dev.cssSourceMap 8 | 9 | module.exports = { 10 | loaders: utils.cssLoaders({ 11 | sourceMap: sourceMapEnabled, 12 | extract: isProduction 13 | }), 14 | cssSourceMap: sourceMapEnabled, 15 | cacheBusting: config.dev.cacheBusting, 16 | transformToRequire: { 17 | video: ['src', 'poster'], 18 | source: 'src', 19 | img: 'src', 20 | image: 'xlink:href' 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /build/webpack.base.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const config = require('../config') 5 | const vueLoaderConfig = require('./vue-loader.conf') 6 | 7 | function resolve (dir) { 8 | return path.join(__dirname, '..', dir) 9 | } 10 | 11 | 12 | 13 | module.exports = { 14 | context: path.resolve(__dirname, '../'), 15 | entry: { 16 | app: './src/main.js' 17 | }, 18 | output: { 19 | path: config.build.assetsRoot, 20 | filename: '[name].js', 21 | publicPath: process.env.NODE_ENV === 'production' 22 | ? config.build.assetsPublicPath 23 | : config.dev.assetsPublicPath 24 | }, 25 | resolve: { 26 | extensions: ['.js', '.vue', '.json'], 27 | alias: { 28 | 'vue$': 'vue/dist/vue.esm.js', 29 | '@': resolve('src'), 30 | } 31 | }, 32 | module: { 33 | rules: [ 34 | { 35 | test: /\.vue$/, 36 | loader: 'vue-loader', 37 | options: vueLoaderConfig 38 | }, 39 | { 40 | test: /\.js$/, 41 | loader: 'babel-loader', 42 | include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')] 43 | }, 44 | { 45 | test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, 46 | loader: 'url-loader', 47 | options: { 48 | limit: 10000, 49 | name: utils.assetsPath('img/[name].[hash:7].[ext]') 50 | } 51 | }, 52 | { 53 | test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/, 54 | loader: 'url-loader', 55 | options: { 56 | limit: 10000, 57 | name: utils.assetsPath('media/[name].[hash:7].[ext]') 58 | } 59 | }, 60 | { 61 | test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, 62 | loader: 'url-loader', 63 | options: { 64 | limit: 10000, 65 | name: utils.assetsPath('fonts/[name].[hash:7].[ext]') 66 | } 67 | } 68 | ] 69 | }, 70 | node: { 71 | // prevent webpack from injecting useless setImmediate polyfill because Vue 72 | // source contains it (although only uses it if it's native). 73 | setImmediate: false, 74 | // prevent webpack from injecting mocks to Node native modules 75 | // that does not make sense for the client 76 | dgram: 'empty', 77 | fs: 'empty', 78 | net: 'empty', 79 | tls: 'empty', 80 | child_process: 'empty' 81 | } 82 | } 83 | -------------------------------------------------------------------------------- /build/webpack.dev.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const utils = require('./utils') 3 | const webpack = require('webpack') 4 | const config = require('../config') 5 | const merge = require('webpack-merge') 6 | const path = require('path') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin') 11 | const portfinder = require('portfinder') 12 | 13 | const HOST = process.env.HOST 14 | const PORT = process.env.PORT && Number(process.env.PORT) 15 | 16 | const devWebpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap, usePostCSS: true }) 19 | }, 20 | // cheap-module-eval-source-map is faster for development 21 | devtool: config.dev.devtool, 22 | 23 | // these devServer options should be customized in /config/index.js 24 | devServer: { 25 | clientLogLevel: 'warning', 26 | historyApiFallback: { 27 | rewrites: [ 28 | { from: /.*/, to: path.posix.join(config.dev.assetsPublicPath, 'index.html') }, 29 | ], 30 | }, 31 | hot: true, 32 | contentBase: false, // since we use CopyWebpackPlugin. 33 | compress: true, 34 | host: HOST || config.dev.host, 35 | port: PORT || config.dev.port, 36 | open: config.dev.autoOpenBrowser, 37 | overlay: config.dev.errorOverlay 38 | ? { warnings: false, errors: true } 39 | : false, 40 | publicPath: config.dev.assetsPublicPath, 41 | proxy: config.dev.proxyTable, 42 | quiet: true, // necessary for FriendlyErrorsPlugin 43 | watchOptions: { 44 | poll: config.dev.poll, 45 | } 46 | }, 47 | plugins: [ 48 | new webpack.DefinePlugin({ 49 | 'process.env': require('../config/dev.env') 50 | }), 51 | new webpack.HotModuleReplacementPlugin(), 52 | new webpack.NamedModulesPlugin(), // HMR shows correct file names in console on update. 53 | new webpack.NoEmitOnErrorsPlugin(), 54 | // https://github.com/ampedandwired/html-webpack-plugin 55 | new HtmlWebpackPlugin({ 56 | filename: 'index.html', 57 | template: 'index.html', 58 | inject: true 59 | }), 60 | // copy custom static assets 61 | new CopyWebpackPlugin([ 62 | { 63 | from: path.resolve(__dirname, '../static'), 64 | to: config.dev.assetsSubDirectory, 65 | ignore: ['.*'] 66 | } 67 | ]) 68 | ] 69 | }) 70 | 71 | module.exports = new Promise((resolve, reject) => { 72 | portfinder.basePort = process.env.PORT || config.dev.port 73 | portfinder.getPort((err, port) => { 74 | if (err) { 75 | reject(err) 76 | } else { 77 | // publish the new Port, necessary for e2e tests 78 | process.env.PORT = port 79 | // add port to devServer config 80 | devWebpackConfig.devServer.port = port 81 | 82 | // Add FriendlyErrorsPlugin 83 | devWebpackConfig.plugins.push(new FriendlyErrorsPlugin({ 84 | compilationSuccessInfo: { 85 | messages: [`Your application is running here: http://${devWebpackConfig.devServer.host}:${port}`], 86 | }, 87 | onErrors: config.dev.notifyOnErrors 88 | ? utils.createNotifierCallback() 89 | : undefined 90 | })) 91 | 92 | resolve(devWebpackConfig) 93 | } 94 | }) 95 | }) 96 | -------------------------------------------------------------------------------- /build/webpack.prod.conf.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const path = require('path') 3 | const utils = require('./utils') 4 | const webpack = require('webpack') 5 | const config = require('../config') 6 | const merge = require('webpack-merge') 7 | const baseWebpackConfig = require('./webpack.base.conf') 8 | const CopyWebpackPlugin = require('copy-webpack-plugin') 9 | const HtmlWebpackPlugin = require('html-webpack-plugin') 10 | const ExtractTextPlugin = require('extract-text-webpack-plugin') 11 | const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin') 12 | const UglifyJsPlugin = require('uglifyjs-webpack-plugin') 13 | 14 | const env = require('../config/prod.env') 15 | 16 | const webpackConfig = merge(baseWebpackConfig, { 17 | module: { 18 | rules: utils.styleLoaders({ 19 | sourceMap: config.build.productionSourceMap, 20 | extract: true, 21 | usePostCSS: true 22 | }) 23 | }, 24 | devtool: config.build.productionSourceMap ? config.build.devtool : false, 25 | output: { 26 | path: config.build.assetsRoot, 27 | filename: utils.assetsPath('js/[name].[chunkhash].js'), 28 | chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') 29 | }, 30 | plugins: [ 31 | // http://vuejs.github.io/vue-loader/en/workflow/production.html 32 | new webpack.DefinePlugin({ 33 | 'process.env': env 34 | }), 35 | new UglifyJsPlugin({ 36 | uglifyOptions: { 37 | compress: { 38 | warnings: false 39 | } 40 | }, 41 | sourceMap: config.build.productionSourceMap, 42 | parallel: true 43 | }), 44 | // extract css into its own file 45 | new ExtractTextPlugin({ 46 | filename: utils.assetsPath('css/[name].[contenthash].css'), 47 | // Setting the following option to `false` will not extract CSS from codesplit chunks. 48 | // Their CSS will instead be inserted dynamically with style-loader when the codesplit chunk has been loaded by webpack. 49 | // It's currently set to `true` because we are seeing that sourcemaps are included in the codesplit bundle as well when it's `false`, 50 | // increasing file size: https://github.com/vuejs-templates/webpack/issues/1110 51 | allChunks: true, 52 | }), 53 | // Compress extracted CSS. We are using this plugin so that possible 54 | // duplicated CSS from different components can be deduped. 55 | new OptimizeCSSPlugin({ 56 | cssProcessorOptions: config.build.productionSourceMap 57 | ? { safe: true, map: { inline: false } } 58 | : { safe: true } 59 | }), 60 | // generate dist index.html with correct asset hash for caching. 61 | // you can customize output by editing /index.html 62 | // see https://github.com/ampedandwired/html-webpack-plugin 63 | new HtmlWebpackPlugin({ 64 | filename: config.build.index, 65 | template: 'index.html', 66 | inject: true, 67 | minify: { 68 | removeComments: true, 69 | collapseWhitespace: true, 70 | removeAttributeQuotes: true 71 | // more options: 72 | // https://github.com/kangax/html-minifier#options-quick-reference 73 | }, 74 | // necessary to consistently work with multiple chunks via CommonsChunkPlugin 75 | chunksSortMode: 'dependency' 76 | }), 77 | // keep module.id stable when vendor modules does not change 78 | new webpack.HashedModuleIdsPlugin(), 79 | // enable scope hoisting 80 | new webpack.optimize.ModuleConcatenationPlugin(), 81 | // split vendor js into its own file 82 | new webpack.optimize.CommonsChunkPlugin({ 83 | name: 'vendor', 84 | minChunks (module) { 85 | // any required modules inside node_modules are extracted to vendor 86 | return ( 87 | module.resource && 88 | /\.js$/.test(module.resource) && 89 | module.resource.indexOf( 90 | path.join(__dirname, '../node_modules') 91 | ) === 0 92 | ) 93 | } 94 | }), 95 | // extract webpack runtime and module manifest to its own file in order to 96 | // prevent vendor hash from being updated whenever app bundle is updated 97 | new webpack.optimize.CommonsChunkPlugin({ 98 | name: 'manifest', 99 | minChunks: Infinity 100 | }), 101 | // This instance extracts shared chunks from code splitted chunks and bundles them 102 | // in a separate chunk, similar to the vendor chunk 103 | // see: https://webpack.js.org/plugins/commons-chunk-plugin/#extra-async-commons-chunk 104 | new webpack.optimize.CommonsChunkPlugin({ 105 | name: 'app', 106 | async: 'vendor-async', 107 | children: true, 108 | minChunks: 3 109 | }), 110 | 111 | // copy custom static assets 112 | new CopyWebpackPlugin([ 113 | { 114 | from: path.resolve(__dirname, '../static'), 115 | to: config.build.assetsSubDirectory, 116 | ignore: ['.*'] 117 | } 118 | ]) 119 | ] 120 | }) 121 | 122 | if (config.build.productionGzip) { 123 | const CompressionWebpackPlugin = require('compression-webpack-plugin') 124 | 125 | webpackConfig.plugins.push( 126 | new CompressionWebpackPlugin({ 127 | asset: '[path].gz[query]', 128 | algorithm: 'gzip', 129 | test: new RegExp( 130 | '\\.(' + 131 | config.build.productionGzipExtensions.join('|') + 132 | ')$' 133 | ), 134 | threshold: 10240, 135 | minRatio: 0.8 136 | }) 137 | ) 138 | } 139 | 140 | if (config.build.bundleAnalyzerReport) { 141 | const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin 142 | webpackConfig.plugins.push(new BundleAnalyzerPlugin()) 143 | } 144 | 145 | module.exports = webpackConfig 146 | -------------------------------------------------------------------------------- /config/dev.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | const merge = require('webpack-merge') 3 | const prodEnv = require('./prod.env') 4 | 5 | module.exports = merge(prodEnv, { 6 | NODE_ENV: '"development"' 7 | }) 8 | -------------------------------------------------------------------------------- /config/index.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | // Template version: 1.2.8 3 | // see http://vuejs-templates.github.io/webpack for documentation. 4 | 5 | const path = require('path') 6 | 7 | module.exports = { 8 | dev: { 9 | 10 | // Paths 11 | assetsSubDirectory: 'static', 12 | assetsPublicPath: '/', 13 | proxyTable: { 14 | '/api':{ 15 | target:'http://api.zhuishushenqi.com', 16 | changeOrigin:true, 17 | pathRewrite:{ 18 | '^/api':'http://api.zhuishushenqi.com' 19 | } 20 | }, 21 | '/content':{ 22 | target:'http://chapterup.zhuishushenqi.com', 23 | changeOrigin:true, 24 | pathRewrite:{ 25 | '^/content':'http://chapterup.zhuishushenqi.com' 26 | } 27 | } 28 | }, 29 | 30 | // Various Dev Server settings 31 | host: 'localhost', // can be overwritten by process.env.HOST 32 | port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined 33 | autoOpenBrowser: false, 34 | errorOverlay: true, 35 | notifyOnErrors: true, 36 | poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions- 37 | 38 | 39 | /** 40 | * Source Maps 41 | */ 42 | 43 | // https://webpack.js.org/configuration/devtool/#development 44 | devtool: 'cheap-module-eval-source-map', 45 | 46 | // If you have problems debugging vue-files in devtools, 47 | // set this to false - it *may* help 48 | // https://vue-loader.vuejs.org/en/options.html#cachebusting 49 | cacheBusting: true, 50 | 51 | cssSourceMap: true, 52 | }, 53 | 54 | build: { 55 | // Template for index.html 56 | index: path.resolve(__dirname, '../dist/index.html'), 57 | 58 | // Paths 59 | assetsRoot: path.resolve(__dirname, '../dist'), 60 | assetsSubDirectory: 'static', 61 | assetsPublicPath: '/', 62 | 63 | /** 64 | * Source Maps 65 | */ 66 | 67 | productionSourceMap: true, 68 | // https://webpack.js.org/configuration/devtool/#production 69 | devtool: '#source-map', 70 | 71 | // Gzip off by default as many popular static hosts such as 72 | // Surge or Netlify already gzip all static assets for you. 73 | // Before setting to `true`, make sure to: 74 | // npm install --save-dev compression-webpack-plugin 75 | productionGzip: false, 76 | productionGzipExtensions: ['js', 'css'], 77 | 78 | // Run the build command with an extra argument to 79 | // View the bundle analyzer report after build finishes: 80 | // `npm run build --report` 81 | // Set to `true` or `false` to always turn it on or off 82 | bundleAnalyzerReport: process.env.npm_config_report 83 | } 84 | } 85 | -------------------------------------------------------------------------------- /config/prod.env.js: -------------------------------------------------------------------------------- 1 | 'use strict' 2 | module.exports = { 3 | NODE_ENV: '"production"' 4 | } 5 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 乌姆阅读 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "(vue_wumreader))", 3 | "version": "1.0.0", 4 | "description": "a vue bookread webapp.read webapp.", 5 | "author": "windjourney ", 6 | "private": true, 7 | "scripts": { 8 | "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js", 9 | "start": "npm run dev", 10 | "build": "node build/build.js" 11 | }, 12 | "dependencies": { 13 | "lodash": "^4.17.4", 14 | "mint-ui": "^2.2.13", 15 | "moment": "^2.20.1", 16 | "vue": "^2.5.2", 17 | "vue-router": "^3.0.1", 18 | "axios": "^0.17.1", 19 | "vuex": "^3.0.1" 20 | }, 21 | "devDependencies": { 22 | "autoprefixer": "^7.1.2", 23 | "babel-core": "^6.22.1", 24 | "babel-helper-vue-jsx-merge-props": "^2.0.3", 25 | "babel-loader": "^7.1.1", 26 | "babel-plugin-syntax-jsx": "^6.18.0", 27 | "babel-plugin-transform-runtime": "^6.22.0", 28 | "babel-plugin-transform-vue-jsx": "^3.5.0", 29 | "babel-preset-env": "^1.3.2", 30 | "babel-preset-stage-2": "^6.22.0", 31 | "chalk": "^2.0.1", 32 | "copy-webpack-plugin": "^4.0.1", 33 | "css-loader": "^0.28.0", 34 | "extract-text-webpack-plugin": "^3.0.0", 35 | "file-loader": "^1.1.4", 36 | "friendly-errors-webpack-plugin": "^1.6.1", 37 | "html-webpack-plugin": "^2.30.1", 38 | "node-notifier": "^5.1.2", 39 | "optimize-css-assets-webpack-plugin": "^3.2.0", 40 | "ora": "^1.2.0", 41 | "portfinder": "^1.0.13", 42 | "postcss-import": "^11.0.0", 43 | "postcss-loader": "^2.0.8", 44 | "postcss-url": "^7.2.1", 45 | "rimraf": "^2.6.0", 46 | "semver": "^5.3.0", 47 | "shelljs": "^0.7.6", 48 | "uglifyjs-webpack-plugin": "^1.1.1", 49 | "url-loader": "^0.5.8", 50 | "vue-loader": "^13.3.0", 51 | "vue-style-loader": "^3.0.1", 52 | "vue-template-compiler": "^2.5.2", 53 | "webpack": "^3.6.0", 54 | "webpack-bundle-analyzer": "^2.9.0", 55 | "webpack-dev-server": "^2.9.1", 56 | "webpack-merge": "^4.1.0" 57 | }, 58 | "engines": { 59 | "node": ">= 6.0.0", 60 | "npm": ">= 3.0.0" 61 | }, 62 | "browserslist": [ 63 | "> 1%", 64 | "last 2 versions", 65 | "not ie <= 8" 66 | ] 67 | } 68 | -------------------------------------------------------------------------------- /pic/Animation1.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/pic/Animation1.gif -------------------------------------------------------------------------------- /pic/Animation2.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/pic/Animation2.gif -------------------------------------------------------------------------------- /pic/Animation3.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/pic/Animation3.gif -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 16 | 17 | 25 | -------------------------------------------------------------------------------- /src/assets/css/reset.css: -------------------------------------------------------------------------------- 1 | @charset "utf-8"; 2 | 3 | * { 4 | 5 | -webkit-box-sizing: border-box; 6 | 7 | box-sizing: border-box; 8 | } 9 | 10 | //禁止文本缩放 字体设置 取消touch高亮效果 11 | 12 | html { 13 | 14 | width: 100%; 15 | 16 | margin: 0px; 17 | 18 | padding: 0px; 19 | 20 | -webkit-text-size-adjust: 100%; 21 | 22 | font-family: "miui", "Helvetica Neue",Helvetica,STHeiTi,sans-serif; 23 | 24 | -webkit-tap-highlight-color: rgba(0, 0, 0, 0); 25 | 26 | font-size: 62.5%; 27 | 28 | background: transparent; 29 | } 30 | body { 31 | color: #555; 32 | width: 100%; 33 | background-color:#F2F6FC; 34 | line-height: 1.5em; 35 | } 36 | 37 | body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, input, textarea, p, blockquote, th, td, hr, button, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, sumary { 38 | 39 | margin: 0; 40 | 41 | padding: 0; 42 | 43 | } 44 | 45 | //清除输入框内阴影 46 | 47 | input, select,textarea { 48 | 49 | border: 0; 50 | 51 | -webkit-appearance: none; 52 | 53 | appearance:none; 54 | 55 | } 56 | 57 | ol, ul { 58 | 59 | list-style: none; 60 | 61 | } 62 | 63 | //禁止选中文本内容 64 | 65 | *:not(input, select, textArea) { 66 | 67 | -webkit-user-select: none; 68 | 69 | } 70 | 71 | //禁用长按页面时的弹出菜单(iOS下有效) ,img和a标签都要加 72 | 73 | img,a{ 74 | -webkit-touch-callout:none; 75 | } 76 | 77 | a,a:active,a:hover,img { 78 | display: block; 79 | text-decoration: none; 80 | color: #efefef; 81 | outline:none; 82 | } 83 | 84 | //去掉点击链接和文本框对象时默认的灰色半透明覆盖层(iOS)或者虚框(Android) 85 | 86 | a,button,input,textarea{ 87 | 88 | -webkit-tap-highlight-color:rgba(0,0,0,0); 89 | 90 | } 91 | .fix{ 92 | zoom:1; 93 | } 94 | .fix::after{ 95 | content:'\0020'; 96 | height: 0; 97 | display: block; 98 | clear: both; 99 | visibility:hidden; 100 | } 101 | -------------------------------------------------------------------------------- /src/assets/icons/demo.css: -------------------------------------------------------------------------------- 1 | *{margin: 0;padding: 0;list-style: none;} 2 | /* 3 | KISSY CSS Reset 4 | 理念：1. reset 的目的不是清除浏览器的默认样式，这仅是部分工作。清除和重置是紧密不可分的。 5 | 2. reset 的目的不是让默认样式在所有浏览器下一致，而是减少默认样式有可能带来的问题。 6 | 3. reset 期望提供一套普适通用的基础样式。但没有银弹，推荐根据具体需求，裁剪和修改后再使用。 7 | 特色：1. 适应中文；2. 基于最新主流浏览器。 8 | 维护：玉伯, 正淳 9 | */ 10 | 11 | /** 清除内外边距 **/ 12 | body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 13 | dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ 14 | pre, /* text formatting elements 文本格式元素 */ 15 | form, fieldset, legend, button, input, textarea, /* form elements 表单元素 */ 16 | th, td /* table elements 表格元素 */ { 17 | margin: 0; 18 | padding: 0; 19 | } 20 | 21 | /** 设置默认字体 **/ 22 | body, 23 | button, input, select, textarea /* for ie */ { 24 | font: 12px/1.5 tahoma, arial, \5b8b\4f53, sans-serif; 25 | } 26 | h1, h2, h3, h4, h5, h6 { font-size: 100%; } 27 | address, cite, dfn, em, var { font-style: normal; } /* 将斜体扶正 */ 28 | code, kbd, pre, samp { font-family: courier new, courier, monospace; } /* 统一等宽字体 */ 29 | small { font-size: 12px; } /* 小于 12px 的中文很难阅读，让 small 正常化 */ 30 | 31 | /** 重置列表元素 **/ 32 | ul, ol { list-style: none; } 33 | 34 | /** 重置文本格式元素 **/ 35 | a { text-decoration: none; } 36 | a:hover { text-decoration: underline; } 37 | 38 | 39 | /** 重置表单元素 **/ 40 | legend { color: #000; } /* for ie6 */ 41 | fieldset, img { border: 0; } /* img 搭车：让链接里的 img 无边框 */ 42 | button, input, select, textarea { font-size: 100%; } /* 使得表单元素在 ie 下能继承字体大小 */ 43 | /* 注：optgroup 无法扶正 */ 44 | 45 | /** 重置表格元素 **/ 46 | table { border-collapse: collapse; border-spacing: 0; } 47 | 48 | /* 清除浮动 */ 49 | .ks-clear:after, .clear:after { 50 | content: '\20'; 51 | display: block; 52 | height: 0; 53 | clear: both; 54 | } 55 | .ks-clear, .clear { 56 | *zoom: 1; 57 | } 58 | 59 | .main { 60 | padding: 30px 100px; 61 | width: 960px; 62 | margin: 0 auto; 63 | } 64 | .main h1{font-size:36px; color:#333; text-align:left;margin-bottom:30px; border-bottom: 1px solid #eee;} 65 | 66 | .helps{margin-top:40px;} 67 | .helps pre{ 68 | padding:20px; 69 | margin:10px 0; 70 | border:solid 1px #e7e1cd; 71 | background-color: #fffdef; 72 | overflow: auto; 73 | } 74 | 75 | .icon_lists{ 76 | width: 100% !important; 77 | 78 | } 79 | 80 | .icon_lists li{ 81 | float:left; 82 | width: 100px; 83 | height:180px; 84 | text-align: center; 85 | list-style: none !important; 86 | } 87 | .icon_lists .icon{ 88 | font-size: 42px; 89 | line-height: 100px; 90 | margin: 10px 0; 91 | color:#333; 92 | -webkit-transition: font-size 0.25s ease-out 0s; 93 | -moz-transition: font-size 0.25s ease-out 0s; 94 | transition: font-size 0.25s ease-out 0s; 95 | 96 | } 97 | .icon_lists .icon:hover{ 98 | font-size: 100px; 99 | } 100 | 101 | 102 | 103 | .markdown { 104 | color: #666; 105 | font-size: 14px; 106 | line-height: 1.8; 107 | } 108 | 109 | .highlight { 110 | line-height: 1.5; 111 | } 112 | 113 | .markdown img { 114 | vertical-align: middle; 115 | max-width: 100%; 116 | } 117 | 118 | .markdown h1 { 119 | color: #404040; 120 | font-weight: 500; 121 | line-height: 40px; 122 | margin-bottom: 24px; 123 | } 124 | 125 | .markdown h2, 126 | .markdown h3, 127 | .markdown h4, 128 | .markdown h5, 129 | .markdown h6 { 130 | color: #404040; 131 | margin: 1.6em 0 0.6em 0; 132 | font-weight: 500; 133 | clear: both; 134 | } 135 | 136 | .markdown h1 { 137 | font-size: 28px; 138 | } 139 | 140 | .markdown h2 { 141 | font-size: 22px; 142 | } 143 | 144 | .markdown h3 { 145 | font-size: 16px; 146 | } 147 | 148 | .markdown h4 { 149 | font-size: 14px; 150 | } 151 | 152 | .markdown h5 { 153 | font-size: 12px; 154 | } 155 | 156 | .markdown h6 { 157 | font-size: 12px; 158 | } 159 | 160 | .markdown hr { 161 | height: 1px; 162 | border: 0; 163 | background: #e9e9e9; 164 | margin: 16px 0; 165 | clear: both; 166 | } 167 | 168 | .markdown p, 169 | .markdown pre { 170 | margin: 1em 0; 171 | } 172 | 173 | .markdown > p, 174 | .markdown > blockquote, 175 | .markdown > .highlight, 176 | .markdown > ol, 177 | .markdown > ul { 178 | width: 80%; 179 | } 180 | 181 | .markdown ul > li { 182 | list-style: circle; 183 | } 184 | 185 | .markdown > ul li, 186 | .markdown blockquote ul > li { 187 | margin-left: 20px; 188 | padding-left: 4px; 189 | } 190 | 191 | .markdown > ul li p, 192 | .markdown > ol li p { 193 | margin: 0.6em 0; 194 | } 195 | 196 | .markdown ol > li { 197 | list-style: decimal; 198 | } 199 | 200 | .markdown > ol li, 201 | .markdown blockquote ol > li { 202 | margin-left: 20px; 203 | padding-left: 4px; 204 | } 205 | 206 | .markdown code { 207 | margin: 0 3px; 208 | padding: 0 5px; 209 | background: #eee; 210 | border-radius: 3px; 211 | } 212 | 213 | .markdown pre { 214 | border-radius: 6px; 215 | background: #f7f7f7; 216 | padding: 20px; 217 | } 218 | 219 | .markdown pre code { 220 | border: none; 221 | background: #f7f7f7; 222 | margin: 0; 223 | } 224 | 225 | .markdown strong, 226 | .markdown b { 227 | font-weight: 600; 228 | } 229 | 230 | .markdown > table { 231 | border-collapse: collapse; 232 | border-spacing: 0px; 233 | empty-cells: show; 234 | border: 1px solid #e9e9e9; 235 | width: 95%; 236 | margin-bottom: 24px; 237 | } 238 | 239 | .markdown > table th { 240 | white-space: nowrap; 241 | color: #333; 242 | font-weight: 600; 243 | 244 | } 245 | 246 | .markdown > table th, 247 | .markdown > table td { 248 | border: 1px solid #e9e9e9; 249 | padding: 8px 16px; 250 | text-align: left; 251 | } 252 | 253 | .markdown > table th { 254 | background: #F7F7F7; 255 | } 256 | 257 | .markdown blockquote { 258 | font-size: 90%; 259 | color: #999; 260 | border-left: 4px solid #e9e9e9; 261 | padding-left: 0.8em; 262 | margin: 1em 0; 263 | font-style: italic; 264 | } 265 | 266 | .markdown blockquote p { 267 | margin: 0; 268 | } 269 | 270 | .markdown .anchor { 271 | opacity: 0; 272 | transition: opacity 0.3s ease; 273 | margin-left: 8px; 274 | } 275 | 276 | .markdown .waiting { 277 | color: #ccc; 278 | } 279 | 280 | .markdown h1:hover .anchor, 281 | .markdown h2:hover .anchor, 282 | .markdown h3:hover .anchor, 283 | .markdown h4:hover .anchor, 284 | .markdown h5:hover .anchor, 285 | .markdown h6:hover .anchor { 286 | opacity: 1; 287 | display: inline-block; 288 | } 289 | 290 | .markdown > br, 291 | .markdown > p > br { 292 | clear: both; 293 | } 294 | 295 | 296 | .hljs { 297 | display: block; 298 | background: white; 299 | padding: 0.5em; 300 | color: #333333; 301 | overflow-x: auto; 302 | } 303 | 304 | .hljs-comment, 305 | .hljs-meta { 306 | color: #969896; 307 | } 308 | 309 | .hljs-string, 310 | .hljs-variable, 311 | .hljs-template-variable, 312 | .hljs-strong, 313 | .hljs-emphasis, 314 | .hljs-quote { 315 | color: #df5000; 316 | } 317 | 318 | .hljs-keyword, 319 | .hljs-selector-tag, 320 | .hljs-type { 321 | color: #a71d5d; 322 | } 323 | 324 | .hljs-literal, 325 | .hljs-symbol, 326 | .hljs-bullet, 327 | .hljs-attribute { 328 | color: #0086b3; 329 | } 330 | 331 | .hljs-section, 332 | .hljs-name { 333 | color: #63a35c; 334 | } 335 | 336 | .hljs-tag { 337 | color: #333333; 338 | } 339 | 340 | .hljs-title, 341 | .hljs-attr, 342 | .hljs-selector-id, 343 | .hljs-selector-class, 344 | .hljs-selector-attr, 345 | .hljs-selector-pseudo { 346 | color: #795da3; 347 | } 348 | 349 | .hljs-addition { 350 | color: #55a532; 351 | background-color: #eaffea; 352 | } 353 | 354 | .hljs-deletion { 355 | color: #bd2c00; 356 | background-color: #ffecec; 357 | } 358 | 359 | .hljs-link { 360 | text-decoration: underline; 361 | } 362 | 363 | pre{ 364 | background: #fff; 365 | } 366 | 367 | 368 | 369 | 370 | 371 | -------------------------------------------------------------------------------- /src/assets/icons/demo_fontclass.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | IconFont 7 | 8 | 9 | 10 | 11 |
12 |

IconFont 图标

13 |
    14 | 15 |
  • 16 | 17 |
    侧栏，列表，更多
    18 |
    .icon-celanliebiaogengduo
    19 |
    • 20 | 21 |
  • 22 | 23 |
    shouye-01
    24 |
    .icon-shouye01
    25 |
    • 26 | 27 |
  • 28 | 29 |
    sousuo
    30 |
    .icon-iconfontsousuo
    31 |
    • 32 | 33 |
  • 34 | 35 |
    fire
    36 |
    .icon-fire
    37 |
    • 38 | 39 |
  • 40 | 41 |
    shouye02
    42 |
    .icon-shouye02
    43 |
    • 44 | 45 |
  • 46 | 47 |
    fen-lei
    48 |
    .icon-classify
    49 |
    • 50 | 51 |
  • 52 | 53 |
    fen-lei-red
    54 |
    .icon-classify-red
    55 |
    • 56 | 57 |
  • 58 | 59 |
    类目 品类 分类 类别.2
    60 |
    .icon-leimupinleifenleileibie2
    61 |
    • 62 | 63 |
  • 64 | 65 |
    类目 品类 分类 类别
    66 |
    .icon-leimupinleifenleileibie
    67 |
    • 68 | 69 |
  • 70 | 71 |
    属性 列表 详情
    72 |
    .icon-shuxingliebiaoxiangqing
    73 |
    • 74 | 75 |
  • 76 | 77 |
    属性 列表 详情2
    78 |
    .icon-shuxingliebiaoxiangqing2
    79 |
    • 80 | 81 |
  • 82 | 83 |
    上
    84 |
    .icon-icon-arrow-top4
    85 |
    • 86 | 87 |
  • 88 | 89 |
    下
    90 |
    .icon-icon-arrow-btm4
    91 |
    • 92 | 93 |
  • 94 | 95 |
    home
    96 |
    .icon-home
    97 |
    • 98 | 99 |
  • 100 | 101 |
    太阳
    102 |
    .icon-taiyang-copy
    103 |
    • 104 | 105 |
  • 106 | 107 |
    返回
    108 |
    .icon-fanhui
    109 |
    • 110 | 111 |
  • 112 | 113 |
    奖杯
    114 |
    .icon-trophy
    115 |
    • 116 | 117 |
  • 118 | 119 |
    返回
    120 |
    .icon-fanhui1
    121 |
    • 122 | 123 |
  • 124 | 125 |
    切换
    126 |
    .icon-qiehuan
    127 |
    • 128 | 129 |
  • 130 | 131 |
    夜间模式
    132 |
    .icon-yejianmoshi
    133 |
    • 134 | 135 |
  • 136 | 137 |
    字体
    138 |
    .icon-ziti
    139 |
    • 140 | 141 |
  • 142 | 143 |
    返回
    144 |
    .icon-fanhui2
    145 |
    • 146 | 147 |
  • 148 | 149 |
    我的
    150 |
    .icon-wode
    151 |
    • 152 | 153 |
  • 154 | 155 |
    我的
    156 |
    .icon-wode1
    157 |
    • 158 | 159 |
160 | 161 |

font-class引用

162 |
163 | 164 |

font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。

165 |

与unicode使用方式相比，具有如下特点：

166 |
    167 |
  • 兼容性良好，支持ie8+，及所有现代浏览器。
    • 168 |
  • 相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。
    • 169 |
  • 因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。
    • 170 |
  • 不过因为本质上还是使用的字体，所以多色图标还是不支持的。
    • 171 |
172 |

使用步骤如下：

173 |

第一步：引入项目下面生成的fontclass代码：

174 | 175 | 176 | 
<link rel="stylesheet" type="text/css" href="./iconfont.css">
177 |

第二步：挑选相应图标并获取类名，应用于页面：

178 | 
<i class="iconfont icon-xxx"></i>
179 |
180 |

"iconfont"是你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。

181 |
182 |
183 | 184 | 185 | -------------------------------------------------------------------------------- /src/assets/icons/iconfont.css: -------------------------------------------------------------------------------- 1 | 2 | @font-face {font-family: "iconfont"; 3 | src: url('iconfont.eot?t=1516113044757'); /* IE9*/ 4 | src: url('iconfont.eot?t=1516113044757#iefix') format('embedded-opentype'), /* IE6-IE8 */ 5 | url('data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAABCkAAsAAAAAHGgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAABCsP6z7U9TLzIAAAE8AAAARAAAAFZW80pmY21hcAAAAYAAAAEtAAADQHAguI5nbHlmAAACsAAACvgAABLAGvkf0mhlYWQAAA2oAAAAMQAAADYQIp8gaGhlYQAADdwAAAAgAAAAJAfZA5tobXR4AAAN/AAAABgAAABoZ+n/+2xvY2EAAA4UAAAANgAAADZDRj9EbWF4cAAADkwAAAAdAAAAIAEuAI9uYW1lAAAObAAAAUUAAAJtPlT+fXBvc3QAAA+0AAAA8AAAAYGWnebVeJxjYGRgYOBikGPQYWB0cfMJYeBgYGGAAJAMY05meiJQDMoDyrGAaQ4gZoOIAgCKIwNPAHicY2Bk/s84gYGVgYOpk+kMAwNDP4RmfM1gxMjBwMDEwMrMgBUEpLmmMDgwVLwoZW7438AQw9zA0AoUZgTJAQAupQzveJzFkktuwkAQRMvYIT/HOF+bXYQgEhESUZRlLoDEGk6CZMJtuAlXyCHKPgJsQqrdXpAV2UTp0bM8o7a7p6sAnAAIxUhEQCtCAIsvnQb1eYiL+jzCp/Z9PMLeC0aMmbLHAceccMo5V1xzUw7LXZVXi/1e2QVDZSUHWTMum6xtlTVZxyJQ1T6etJ4P1ggvzXrFW531oF5v0caN+rtDFzmukeIUZ7hCCwk6uNd9z3WfS8TI9En7F9X/KIL/K/0zYnsE782uK4oGtcjQ0WzByDG/MHY0bzBxNHmw40gDMHXMV+w50gUcOFaLY0dagRNHqoFTB/aPmSMlwbkjTcGlI3XBD0c6gysH1tfagfW1ceQClEPH/F9uHTkD5c4xz1eZI7egyh2bVrVwkH0DFX9veAAAAHicpRhtbFxHcWf3fdw9+77v3rs7++z7sN+zfc7ZubOfGyexz3U+nMSh9UedmLpum9RJaOyWxCqFfgQ3bZUKtZBQkopAoYQExEdBqH8KRI2bUNKiCqlRAk2LIKVVJaIiIRCIiviZ2Xc+5y5p0whOp9mdmZ29mdmZ2dkjIiHz77DjLEwCpIEsJavIzYSAlIakm8YgYbRlaBpCCTGkBd3MSBkJOZXMsJWgJaWgmjXbdE2SJQ+4oQZyiaxpZKgB7W1ddDlk1RhApCo65K+v9rP9oISNmset9fQIhGpT1Z6uJda65u5gNh5w3F/p90f8/icdkig6KBU8bpjSVKfoVCTrqOiJho7XNtJaqIwY0f5RV7zKf+cTbffE6jUnwMwMBKri7u93+6I+/D4UVQP+iOx1OcJRV6ouCPe/VxEOVMb0dwl+JLT193Q3GyEVJEjipJG0ky60NgNGF3TUgOYGo2gWu24i/M1cB7DO7OCwo9owlhlG7LpIdHiRYK47ZXTqeqcxZ10fjdtD0Z4T7CTrITpBghP0pIwnoaF+OZ8NdJOfg+zLodY2MHVjKfuu9XzitoT1fESSWDSWhc7WA1RSp1WJHmjthGwsykQxAq/DUAIXRZsURxis32V6KSxTw2HVOk17M9AEYYfSFCUMdbjIDrMa9KlG6gipL/ERc4OME0QzAMkW0NvMbC2oQQlOH3xVEF49eIjDQ7sOMXZo124OIR3yveiNpzm4VTh9qLDg0Gm6gz2zq7Bu1zNzuvdFXzru/bk3Hed+ANRhlt3GVpFeQsTC73dBylQ1VUYNVJNro0qyTTZ0s0OXkB7K6kamiEqqhvMMdNjugyP1GUYH9IzIaGfUI4lxyjq9apyx5W2j96tRkFgVpX26zw2iqjW4KlOC85UN7UykSXclhYqtRuoBU+1bMnh3++AY7R7OLe0apXTJgLoi0TmuaZ/rXP1A+/rbgDYti3XSVT0r1jbn76Rs+MFdDwM0JBItwGa/etde+3xP4fmuJPWk/3rPV06DLyjJqXZTxySWtFAqA+2+VKu+tMPsADOrgVoLrZIdBOM8CESxGAQgqbtVCS4HQWe6u1obhfqW3S31MKpV300FKsKQt9kLQyLO4TjcjjHyneq04ohQ6+8tayjUaJGIZv2ZrmkBN404lHTc+kVYh/dbbrih5X3Qw7BGcIgijPt81hFMdwHPz4l2nmQvsTxxkShGchu5EavQONlJJvFwUyFuKtrWjieEQSWjQUZ7Don1iCwy5VCRhVggVWTZQqEi3ZayeWUbFlkhOn+OTg6oA5MUh6+xET1fOybONg2yuamBScYmB0KDkzQtjMW79RGBDTU1hQpklBo8eKJpiAkjend8TIBb+B7nivsMNs2KY7V5fYTBpnMDU5RO2Rtd7OgDWN15gq01f4QbhAqcc+kTnasB+jq6zbWMBm3GJD3L188Ia8y8yYWW/RDpZ2lBoYvmGmF2GZcx8zwfxDJ/NhCTdFzpx0Sp61iZtxLl/ilziQWX3TBbYjtcLLW3zMgSw+AvJcaU6o868zggbAZ19pBa0kK6ucalSmag/gr8E/n5mULNLQzwpTLUUq7FZfnF6dWD1XMNJprhuMqWm8jt5F7yxatt0kqClkfgJ/HZ/yl/hU8UqKuaqaqD4jBzLe41RS1y7Y3LfDRfwqmrovlrMK3Z/1Wy9BwcxIeZ0EQ6yRoyiJWFwOKVXpzIi/c5zw1eXhO8qGYggGgCXehDNIFkOcFX8mYHhT5mDnG331/t97vLBjgzN1tQluYXvTQ3W7QFx+fmCS51gw0/Zg6E71Xth5nCOFtEcd/S/ed6SjbGMV+2fGEgckmshkkCfWRi9f0UeugKN0CS3954dxtXTSDBZ2g5J37MnJErbJ+7+JEu2n0dHrCTs8zURz7KNmvmIy0u9Asvs1nsmzBCQAZfygcG3rnD1tkZ6+wwzMLMMLTMbaOHrTcQK18vQgf4cj7QKLHyw9A8A83D3YCyZ+jX57ZDZrjQl73DTrMmUrPQl8m6DFIQW59sNyz6VOOY2YYNS8GNbNb6tFLpclqjslwh++VhSEYpjSRhGJEK2Vpp5HIbczl4GI46BcFpjXGyJA1Zn8c1kIzAE0OShIIrgC/bmCMK6vEU+ye7j3hJNXa7JvZHN5MxsoPcR/Zip5bMUOzUszU06KalrRoe7EpbpxigVhm4jJQ3ceUITnkzEpRSidRlhNPRSpx6oBzBdnLHQDo9sGN6Ox+2d07so3TfxMQ+xvZNKC5X0OVSCoP1viLnZbffgYBudso9sjsg90juS79BvnIrB2x8jA8cXHrV6cblAQQOXO3G5X631CPfdfmnpvGHaSXjP1b4yT0FUQ4uHYGFPRHQD4rSAffct4u7YhgOcL2KX+unBd0CuIDeWdDNj4LF3vQU5tcK7I4JLDo5h7NCo9ouhkSY2/yIwB4aH3+IHRPeOnr0LUG88CwErQ+o07F1ZHwPpXvGj70tCG8f++bLFU/+sfqkfV/Of8juY7Ldd4/gmRLRdjsv85h6KR5VC0dg6F0Us7CGyjneE/PmN6kbOm+GMyDrhkRlnRqppN0GqwVuhvfKOTPXge9AraBzm47nnaLbzyoej8JB1zY+26Z4vdavQFRi+N7aGKiLKaIsrAu48334gFOEYHB9o1yZphWOil07750OUSHjkBs3BAJKhSJD/wqPf7VTEDcpPkUSanauWrWzhgpe2Sl5MEYAwRc4wC9tEAL1MZ8vVh+AJW2tD/Y5BSoEA/1j4UQEJOfT88ThBPpELBa+oy8Q4Mx1Dyxta6YdDtz65Tdl+uavFZfTKRTOBGve0/Q87zydtN0UmOmvh99aL0JfHHbpRtbqoOetd633ToQ91ol6+IO8IHOKfojVkWAjjgFsYFU08ByDqaXJEPbcSb2dU3R8DvOrpBuyId+C55YD3h5ZVeO4avKsZy94GjzLAejWDb13VACk82lwyt6M98ue2gZPntNX3Y50aEIGyBL23E95IO5BGQpbN2ylMNwDYN0ST6fj8Ccl6HBTz1c8DbUoah0ssn8cb2qKW7VOv+QRPU95Gxbi8SfsDBvEzoTgo12TiKzXYTDwFNcWKwC+GbBy089+4xQTrQ9fOW7N+xl4NDdr+N7d+18SYHCt7PRVsIHGf//gNetfovCP40yq9FY6x3cDO/n02MFW5pFdPt6Lzv9n/kGBsD2kkoRIkuR4Z1eflGL421kTK4su83i1I1d3Q7CGx539XNQNJ+aLvvBmkRjeR8XrlZ33ISmhafuSzc29zc2J9Prm5vXpXnxkjVpvuIKChR+5uVYGo8JUoEHUvmW94lNVHyxH+EvN+1evZoObgIv3Nt8MjRtu2dAIdLT3xlHrtMfFll06rSoJlf0sErl0UyAO50FNqvhdeHdjLCToI5h7NfymvHzNiXZN5DWuBjz8pYaPYGLZVxfl0DrjUi44nReUcACcr70mC7IXthQupgtIjSgXHIGwgoyAv8LO8Rewdmy0c7yRLL/iv4rCUdk1Bdp4iiMZS3kKuxW+IpHtonZDjylMyZa9lO7dUoD9E5RO9NvQer0q11MHhxHhE2tb/8RS2mfC4UhLXRAn1jY+gY1s/9TkAcYOTE7tb6XTmzdNMza9afO09V7djbkquq2/rgeHiX6zjwbrWiL4sAnUtRT/o5jBeJvB2yiM+hf+g+B/F4mJQjVM2GZQMrWfiRPPPbtd3g8jVmbLY5Q+tgXO2CN8hh6YuueYIBx7+0AUyVsfZezRrVseI+S/6zNfsnicY2BkYGAAYtZJvvzx/DZfGbhZGEDgWovuFBj9//f/ahYG5gYgl4OBCSQKABX3Ct8AAAB4nGNgZGBgbvjfwBDDwvD/NwMDCwMDUAQFSAEAdZUEfXicY2FgYGB+ycDAwkBt/P83Mh8AisADSwAAAAAAdgDeASABYgHOAkIC6gNEA6oEbgUABXoFkgWqBe4GsAbcB3oHlAf4CDAImgjOCTAJYAAAeJxjYGRgYJBiaGbgYgABJiDmArP/g/kMABi5Ab4AAAB4nGWPTU7DMBCFX/oHpBKqqGCH5AViASj9EatuWFRq911036ZOmyqJI8et1ANwHo7ACTgC3IA78EgnmzaWx9+8eWNPANzgBx6O3y33kT1cMjtyDRe4F65TfxBukF+Em2jjVbhF/U3YxzOmwm10YXmD17hi9oR3YQ8dfAjXcI1P4Tr1L+EG+Vu4iTv8CrfQ8erCPuZeV7iNRy/2x1YvnF6p5UHFockikzm/gple75KFrdLqnGtbxCZTg6BfSVOdaVvdU+zXQ+ciFVmTqgmrOkmMyq3Z6tAFG+fyUa8XiR6EJuVYY/62xgKOcQWFJQ6MMUIYZIjK6Og7VWb0r7FDwl57Vj3N53RbFNT/c4UBAvTPXFO6stJ5Ok+BPV8bUnV0K27LnpQ0kV7NSRKyQl7WtlRC6gE2ZVeOEXpc0Yk/KGdI/wAJWm7IAAAAeJx1TmFvgkAM5TlEp063uQ3nfgPJIP6hEwvXBa7IcRH26wdREz/Mpnnt62ub5428c8y8/2OLER7gY4wAE0zxiBnmWOAJS6zwjBe8Yo03vOMDITb4xBZfHtp1SoUyBdOeleRk8oOTqdXiOvqOl5yKycQ0Vpx14mdc01VMpmmhrOWsW1ybqKbDpiAuXcWmrxkN2OeeKQnvCKHVrmWTXyy0rEx+7PnmzjxZDaYiVddyihqpdrd835Q7X0tJi0Zx119EqVRdkCmjHQdNLZXuJmcWT45M2ikz7+inf16K1ez/csOXhcQ/yYHGA8Se9wfzS3Cd') format('woff'), 6 | url('iconfont.ttf?t=1516113044757') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ 7 | url('iconfont.svg?t=1516113044757#iconfont') format('svg'); /* iOS 4.1- */ 8 | } 9 | 10 | .iconfont { 11 | font-family:"iconfont" !important; 12 | font-size:16px; 13 | font-style:normal; 14 | -webkit-font-smoothing: antialiased; 15 | -moz-osx-font-smoothing: grayscale; 16 | } 17 | 18 | .icon-celanliebiaogengduo:before { content: "\e67a"; } 19 | 20 | .icon-shouye01:before { content: "\e604"; } 21 | 22 | .icon-iconfontsousuo:before { content: "\e610"; } 23 | 24 | .icon-fire:before { content: "\e729"; } 25 | 26 | .icon-shouye02:before { content: "\e60e"; } 27 | 28 | .icon-classify:before { content: "\e656"; } 29 | 30 | .icon-classify-red:before { content: "\e657"; } 31 | 32 | .icon-leimupinleifenleileibie2:before { content: "\e7f8"; } 33 | 34 | .icon-leimupinleifenleileibie:before { content: "\e7f9"; } 35 | 36 | .icon-shuxingliebiaoxiangqing:before { content: "\e817"; } 37 | 38 | .icon-shuxingliebiaoxiangqing2:before { content: "\e818"; } 39 | 40 | .icon-icon-arrow-top4:before { content: "\e679"; } 41 | 42 | .icon-icon-arrow-btm4:before { content: "\e67b"; } 43 | 44 | .icon-home:before { content: "\e6a2"; } 45 | 46 | .icon-taiyang-copy:before { content: "\e64c"; } 47 | 48 | .icon-fanhui:before { content: "\e649"; } 49 | 50 | .icon-trophy:before { content: "\e60f"; } 51 | 52 | .icon-fanhui1:before { content: "\e60c"; } 53 | 54 | .icon-qiehuan:before { content: "\e622"; } 55 | 56 | .icon-yejianmoshi:before { content: "\e6c1"; } 57 | 58 | .icon-ziti:before { content: "\e603"; } 59 | 60 | .icon-fanhui2:before { content: "\e875"; } 61 | 62 | .icon-wode:before { content: "\e62f"; } 63 | 64 | .icon-wode1:before { content: "\e625"; } 65 | 66 | -------------------------------------------------------------------------------- /src/assets/icons/iconfont.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/icons/iconfont.eot -------------------------------------------------------------------------------- /src/assets/icons/iconfont.js: -------------------------------------------------------------------------------- 1 | (function(window){var svgSprite='';var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window) -------------------------------------------------------------------------------- /src/assets/icons/iconfont.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 6 | 7 | 8 | Created by iconfont 9 | 10 | 11 | 12 | 13 | 21 | 22 | 23 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | -------------------------------------------------------------------------------- /src/assets/icons/iconfont.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/icons/iconfont.ttf -------------------------------------------------------------------------------- /src/assets/icons/iconfont.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/icons/iconfont.woff -------------------------------------------------------------------------------- /src/assets/img/banner-1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/banner-1.jpg -------------------------------------------------------------------------------- /src/assets/img/banner-2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/banner-2.jpg -------------------------------------------------------------------------------- /src/assets/img/book-cover.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/book-cover.jpg -------------------------------------------------------------------------------- /src/assets/img/category-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/category-icon.png -------------------------------------------------------------------------------- /src/assets/img/female-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/female-icon.png -------------------------------------------------------------------------------- /src/assets/img/finish-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/finish-icon.png -------------------------------------------------------------------------------- /src/assets/img/male-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/male-icon.png -------------------------------------------------------------------------------- /src/assets/img/rank-icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/img/rank-icon.png -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/bookinfo.vue: -------------------------------------------------------------------------------- 1 | 12 | 44 | -------------------------------------------------------------------------------- /src/components/bookinfo/info-content.vue: -------------------------------------------------------------------------------- 1 | 33 | 131 | -------------------------------------------------------------------------------- /src/components/bookinfo/info-recommend.vue: -------------------------------------------------------------------------------- 1 | 14 | 46 | -------------------------------------------------------------------------------- /src/components/bookrank.vue: -------------------------------------------------------------------------------- 1 | 31 | 77 | -------------------------------------------------------------------------------- /src/components/bookranklist.vue: -------------------------------------------------------------------------------- 1 | 8 | 40 | -------------------------------------------------------------------------------- /src/components/category.vue: -------------------------------------------------------------------------------- 1 | 11 | 39 | -------------------------------------------------------------------------------- /src/components/category/female-category.vue: -------------------------------------------------------------------------------- 1 | 10 | -------------------------------------------------------------------------------- /src/components/category/male-category.vue: -------------------------------------------------------------------------------- 1 | 10 | 21 | -------------------------------------------------------------------------------- /src/components/categorylist.vue: -------------------------------------------------------------------------------- 1 | 8 | 40 | -------------------------------------------------------------------------------- /src/components/common/footer.vue: -------------------------------------------------------------------------------- 1 | 17 | 46 | -------------------------------------------------------------------------------- /src/components/common/header.vue: -------------------------------------------------------------------------------- 1 | 16 | 92 | -------------------------------------------------------------------------------- /src/components/homepage.vue: -------------------------------------------------------------------------------- 1 | 15 | 76 | -------------------------------------------------------------------------------- /src/components/homepage/index-banner.vue: -------------------------------------------------------------------------------- 1 | 10 | 24 | -------------------------------------------------------------------------------- /src/components/homepage/index-channel.vue: -------------------------------------------------------------------------------- 1 | 33 | 45 | -------------------------------------------------------------------------------- /src/components/homepage/index-female.vue: -------------------------------------------------------------------------------- 1 | 31 | 42 | -------------------------------------------------------------------------------- /src/components/homepage/index-male.vue: -------------------------------------------------------------------------------- 1 | 31 | 38 | -------------------------------------------------------------------------------- /src/components/homepage/index-navcategory.vue: -------------------------------------------------------------------------------- 1 | 12 | -------------------------------------------------------------------------------- /src/components/homepage/index-newbook.vue: -------------------------------------------------------------------------------- 1 | 36 | 46 | -------------------------------------------------------------------------------- /src/components/listitem/listitem.vue: -------------------------------------------------------------------------------- 1 | 20 | 30 | -------------------------------------------------------------------------------- /src/components/me.vue: -------------------------------------------------------------------------------- 1 | 18 | 88 | -------------------------------------------------------------------------------- /src/components/reader.vue: -------------------------------------------------------------------------------- 1 | 10 | 160 | -------------------------------------------------------------------------------- /src/components/reader/reader-catalog.vue: -------------------------------------------------------------------------------- 1 | 19 | 61 | -------------------------------------------------------------------------------- /src/components/reader/reader-content.vue: -------------------------------------------------------------------------------- 1 | 7 | 35 | -------------------------------------------------------------------------------- /src/components/reader/reader-menu.vue: -------------------------------------------------------------------------------- 1 | 26 | 109 | -------------------------------------------------------------------------------- /src/components/search.vue: -------------------------------------------------------------------------------- 1 | 17 | 81 | -------------------------------------------------------------------------------- /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 App from './App' 5 | import router from './router' 6 | import MintUi from 'mint-ui' 7 | import 'mint-ui/lib/style.css' 8 | import './assets/css/reset.css' 9 | import './assets/icons/iconfont.css' 10 | import store from './store' 11 | Vue.use(MintUi); 12 | Vue.config.productionTip = false 13 | /* eslint-disable no-new */ 14 | new Vue({ 15 | el: '#app', 16 | router, 17 | store, 18 | template: '', 19 | components: { App } 20 | }) 21 | -------------------------------------------------------------------------------- /src/router/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Router from 'vue-router' 3 | import home from '@/components/homepage' 4 | import category from '@/components/category' 5 | import me from '@/components/me' 6 | import bookinfo from '@/components/bookinfo' 7 | import reader from '@/components/reader' 8 | import categorylist from '@/components/categorylist' 9 | import bookranklist from '@/components/bookranklist' 10 | import bookrank from '@/components/bookrank' 11 | import search from '@/components/search' 12 | Vue.use(Router) 13 | 14 | export default new Router({ 15 | mode:'history', 16 | routes: [ 17 | { 18 | path:'/', 19 | name:'home', 20 | component:home 21 | }, 22 | { 23 | path:'/category', 24 | name:'category', 25 | component:category 26 | }, 27 | { 28 | path:'/rank', 29 | name:'rank', 30 | component:bookrank 31 | }, 32 | { 33 | path:'/me', 34 | name:'me', 35 | component:me 36 | }, 37 | { 38 | path:'/categorylist', 39 | name:'categorylist', 40 | component:categorylist 41 | }, 42 | { 43 | path:'/ranklist/:rankid', 44 | name:'ranklist', 45 | component:bookranklist 46 | }, 47 | { 48 | path:'/bookinfo/:bookid', 49 | name:'bookinfo', 50 | component:bookinfo 51 | }, 52 | { 53 | path:'/reader/:bookid', 54 | name:'reader', 55 | component:reader, 56 | }, 57 | { 58 | path:'/search', 59 | name:'search', 60 | component:search 61 | } 62 | ] 63 | }) 64 | -------------------------------------------------------------------------------- /src/service/api.js: -------------------------------------------------------------------------------- 1 | import qs from 'querystring' 2 | import axios from 'axios' 3 | export default { 4 | //获取带书籍数量的父分类 5 | getCategories(){ 6 | return axios.get('/api/cats/lv2/statistics') 7 | }, 8 | //获取排名分类 9 | getRankCategory(){ 10 | return axios.get('/api/ranking/gender') 11 | }, 12 | //获取带子分类的分类 13 | getSubCategory(){ 14 | return axios.get('/api/cats/lv2') 15 | }, 16 | //获取分类详情 17 | getCategoryInfo(category_type){ 18 | //{ 19 | // gender=male, type=hot, major(主分类), minor(子分类), start, limit 20 | // } 21 | let query = qs.stringify(category_type); 22 | return axios.get('/api/book/by-categories?'+query) 23 | }, 24 | //获取书籍详情 25 | getBookInfo(id){ 26 | return axios.get('/api/book/'+id) 27 | }, 28 | //获取书籍相关推荐 29 | getRecommend(id){ 30 | return axios.get('/api/book/'+id+'/recommend') 31 | }, 32 | //获取作者名下的书籍 33 | getAuthorBook(author){ 34 | let author_query = qs.stringify(author); 35 | return axios.get(url+'/author-books?'+author_query) 36 | }, 37 | //获取书籍源 38 | getBookSources(bookid){ 39 | //view=summary 40 | //book=bookid 41 | let book_source = qs.stringify(bookid); 42 | return axios.get('/api/atoc?'+book_source) 43 | }, 44 | //获取书籍章节 45 | getChapters(id){ 46 | return axios.get('/api/atoc/'+id+'?view=chapters') 47 | }, 48 | //获取章节详细内容 49 | getBookChapter(link){ 50 | return axios.get('/content/chapter/'+link) 51 | }, 52 | //获取搜索结果 53 | getSearchResult(word){ 54 | let keyword = qs.stringify(word); 55 | return axios.get('/api/book/fuzzy-search?'+keyword) 56 | }, 57 | getSearchHotwords(){ 58 | return axios.get('/api/book/search-hotwords'); 59 | }, 60 | //获取排名详情 61 | getRank(categoryid){ 62 | //return axios.get(url+'/rank/'+categoryid) 63 | return axios.get('/api/ranking/'+categoryid) 64 | } 65 | } -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import Vuex from 'vuex' 3 | import api from '../service/api.js' 4 | Vue.use(Vuex); 5 | 6 | let state ={ 7 | SourceId:'', 8 | isShowCatlog:false, 9 | isShowSource:false, 10 | BookInfo:{}, 11 | RankList:{}, 12 | CategoryList:{}, 13 | SearchResult:{} 14 | } 15 | let mutations ={ 16 | SetCategoryList(state,list){ 17 | state.CategoryList=list; 18 | }, 19 | SetRankList(state,list){ 20 | state.RankList=list; 21 | }, 22 | ChangeDetail(state,name){ 23 | if(name == 'catlog'){ 24 | state.isShowCatlog =true; 25 | state.isShowSource = false; 26 | }else if(name == 'source'){ 27 | state.isShowSource = true; 28 | state.isShowCatlog =false; 29 | }else{ 30 | state.isShowSource = false; 31 | state.isShowCatlog =false; 32 | } 33 | }, 34 | SetSourceId(state,index){ 35 | state.SourceId=index; 36 | }, 37 | SetBookInfo(state,book){ 38 | state.BookInfo=book; 39 | }, 40 | SetSearchResult(state,books){ 41 | state.SearchResult = books; 42 | } 43 | } 44 | 45 | export default new Vuex.Store({ 46 | state, 47 | mutations 48 | }) -------------------------------------------------------------------------------- /src/util/util.js: -------------------------------------------------------------------------------- 1 | import _ from 'lodash' 2 | const localStorage = window.localStorage; 3 | export default{ 4 | staticPath:'http://statics.zhuishushenqi.com', 5 | 6 | getLocalData(item){ 7 | return _.isEmpty(JSON.parse(localStorage.getItem(item)))? null : JSON.parse(localStorage.getItem(item)); 8 | }, 9 | 10 | setLocalData(item,obj){ 11 | localStorage.setItem(item, JSON.stringify(obj)) 12 | } 13 | } -------------------------------------------------------------------------------- /static/.gitkeep: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/windjourney/vue-wumReader/4c4f0cc75b78484412a8597780c01603d23b07b7/static/.gitkeep --------------------------------------------------------------------------------