diff --git a/.babelrc b/.babelrc new file mode 100644 index 0000000..41789ca --- /dev/null +++ b/.babelrc @@ -0,0 +1,5 @@ +{ + "presets": ["es2015", "stage-2"], + "plugins": ["transform-runtime"], + "comments": false +} diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 0000000..9d08a1a --- /dev/null +++ b/.editorconfig @@ -0,0 +1,9 @@ +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +insert_final_newline = true +trim_trailing_whitespace = true diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..060b35b --- /dev/null +++ b/.gitignore @@ -0,0 +1,4 @@ +.DS_Store +node_modules/ +dist/ +npm-debug.log diff --git a/.idea/Vue2-SPA2.iml b/.idea/Vue2-SPA2.iml new file mode 100644 index 0000000..d7a18b1 --- /dev/null +++ b/.idea/Vue2-SPA2.iml @@ -0,0 +1,11 @@ + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/jsLibraryMappings.xml b/.idea/jsLibraryMappings.xml new file mode 100644 index 0000000..b8387eb --- /dev/null +++ b/.idea/jsLibraryMappings.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/misc.xml b/.idea/misc.xml new file mode 100644 index 0000000..28a804d --- /dev/null +++ b/.idea/misc.xml @@ -0,0 +1,6 @@ + + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..e82db3e --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/.idea/watcherTasks.xml b/.idea/watcherTasks.xml new file mode 100644 index 0000000..9338ba6 --- /dev/null +++ b/.idea/watcherTasks.xml @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/.idea/workspace.xml b/.idea/workspace.xml new file mode 100644 index 0000000..faa7726 --- /dev/null +++ b/.idea/workspace.xml @@ -0,0 +1,596 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + what the fuck + + + + + + + + + + + + + false + + false + false + + + true + DEFINITION_ORDER + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + project + + + + + + + + + + + + + + + + project + + + true + + bdd + + DIRECTORY + + false + + + + + + + + + + + + 1481036131519 + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..bc72dca --- /dev/null +++ b/README.md @@ -0,0 +1,197 @@ +# Vue2-SPA + +> A Vue.js project width axios/vue-router/webpack + +## Build Setup + +``` bash +# install dependencies +npm install + +# serve with hot reload at localhost:8080 +npm run dev + +# build for production with minification +npm run build +``` + +## Lifecycle +![image](https://github.com/allan2coder/Vue2-SPA2/blob/master/screenShot/lifecycle.png) + +``` bash + + + + +``` + + +## Router + +HTML +``` bash + +import Vue from 'vue' +import VueRouter from 'vue-router' + + + +or + + + + +
+

+ Go to Foo + Go to Bar +

+ +
+``` + +JavaScript +``` bash + +// 0. 如果使用模块化机制编程，導入Vue和VueRouter，要调用 vue.use(vuerouter) + +// 1. 定义（路由）组件。 +// 可以从其他文件 import 进来 +const Foo = { template: '
foo
' } +const Bar = { template: '
bar
' } + +// 2. 定义路由 +// 每个路由应该映射一个组件。 其中"component" 可以是 +// 通过 Vue.extend() 创建的组件构造器， +// 或者，只是一个组件配置对象。 +// 我们晚点再讨论嵌套路由。 +const routes = [ + { path: '/foo', component: Foo }, + { path: '/bar', component: Bar } +] + +// 3. 创建 router 实例，然后传 `routes` 配置 +// 你还可以传别的配置参数, 不过先这么简单着吧。 +const router = new VueRouter({ + routes // （缩写）相当于 routes: routes +}) + +// 4. 创建和挂载根实例。 +// 记得要通过 router 配置参数注入路由， +// 从而让整个应用都有路由功能 +const app = new Vue({ + router +}).$mount('#app') + +// 现在，应用已经启动了！ +``` + +# Reference Articles +* [Vue-Router](http://router.vuejs.org/zh-cn/essentials/getting-started.html) +* [ECMAScript 6入门](http://es6.ruanyifeng.com/) +* [Webpack 入门指迷](https://segmentfault.com/a/1190000002551952) +* [webpack使用优化](https://github.com/lcxfs1991/blog/issues/2) +* [vue guide](http://vuejs-templates.github.io/webpack/) +* [docs for vue-loader](http://vuejs.github.io/vue-loader) diff --git a/build/build.js b/build/build.js new file mode 100644 index 0000000..b3c9aad --- /dev/null +++ b/build/build.js @@ -0,0 +1,36 @@ +// https://github.com/shelljs/shelljs +require('./check-versions')() +require('shelljs/global') +env.NODE_ENV = 'production' + +var path = require('path') +var config = require('../config') +var ora = require('ora') +var webpack = require('webpack') +var webpackConfig = require('./webpack.prod.conf') + +console.log( + ' Tip:\n' + + ' Built files are meant to be served over an HTTP server.\n' + + ' Opening index.html over file:// won\'t work.\n' +) + +var spinner = ora('building for production...') +spinner.start() + +var assetsPath = path.join(config.build.assetsRoot, config.build.assetsSubDirectory) +rm('-rf', assetsPath) +mkdir('-p', assetsPath) +cp('-R', 'static/*', assetsPath) + +webpack(webpackConfig, function (err, stats) { + spinner.stop() + if (err) throw err + process.stdout.write(stats.toString({ + colors: true, + modules: false, + children: false, + chunks: false, + chunkModules: false + }) + '\n') +}) diff --git a/build/check-versions.js b/build/check-versions.js new file mode 100644 index 0000000..e2b6cf7 --- /dev/null +++ b/build/check-versions.js @@ -0,0 +1,45 @@ +var semver = require('semver') +var chalk = require('chalk') +var packageConfig = require('../package.json') +var exec = function (cmd) { + return require('child_process') + .execSync(cmd).toString().trim() +} + +var versionRequirements = [ + { + name: 'node', + currentVersion: semver.clean(process.version), + versionRequirement: packageConfig.engines.node + }, + { + name: 'npm', + currentVersion: exec('npm --version'), + versionRequirement: packageConfig.engines.npm + } +] + +module.exports = function () { + var warnings = [] + for (var i = 0; i < versionRequirements.length; i++) { + var mod = versionRequirements[i] + if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) { + warnings.push(mod.name + ': ' + + chalk.red(mod.currentVersion) + ' should be ' + + chalk.green(mod.versionRequirement) + ) + } + } + + if (warnings.length) { + console.log('') + console.log(chalk.yellow('To use this template, you must update following to modules:')) + console.log() + for (var i = 0; i < warnings.length; i++) { + var warning = warnings[i] + console.log(' ' + warning) + } + console.log() + process.exit(1) + } +} diff --git a/build/dev-client.js b/build/dev-client.js new file mode 100644 index 0000000..18aa1e2 --- /dev/null +++ b/build/dev-client.js @@ -0,0 +1,9 @@ +/* eslint-disable */ +require('eventsource-polyfill') +var hotClient = require('webpack-hot-middleware/client?noInfo=true&reload=true') + +hotClient.subscribe(function (event) { + if (event.action === 'reload') { + window.location.reload() + } +}) diff --git a/build/dev-server.js b/build/dev-server.js new file mode 100644 index 0000000..dcba5d2 --- /dev/null +++ b/build/dev-server.js @@ -0,0 +1,72 @@ +require('./check-versions')() +var config = require('../config') +if (!process.env.NODE_ENV) process.env.NODE_ENV = JSON.parse(config.dev.env.NODE_ENV) +var path = require('path') +var express = require('express') +var webpack = require('webpack') +var opn = require('opn') +var proxyMiddleware = require('http-proxy-middleware') +var webpackConfig = require('./webpack.dev.conf') + +// default port where dev server listens for incoming traffic +var port = process.env.PORT || config.dev.port +// Define HTTP proxies to your custom API backend +// https://github.com/chimurai/http-proxy-middleware +var proxyTable = config.dev.proxyTable + +var app = express() +var compiler = webpack(webpackConfig) + +var devMiddleware = require('webpack-dev-middleware')(compiler, { + publicPath: webpackConfig.output.publicPath, + stats: { + colors: true, + chunks: false + } +}) + +var hotMiddleware = require('webpack-hot-middleware')(compiler) +// force page reload when html-webpack-plugin template changes +compiler.plugin('compilation', function (compilation) { + compilation.plugin('html-webpack-plugin-after-emit', function (data, cb) { + hotMiddleware.publish({ action: 'reload' }) + cb() + }) +}) + +// proxy api requests +Object.keys(proxyTable).forEach(function (context) { + var options = proxyTable[context] + if (typeof options === 'string') { + options = { target: options } + } + app.use(proxyMiddleware(context, options)) +}) + +// handle fallback for HTML5 history API +app.use(require('connect-history-api-fallback')()) + +// serve webpack bundle output +app.use(devMiddleware) + +// enable hot-reload and state-preserving +// compilation error display +app.use(hotMiddleware) + +// serve pure static assets +var staticPath = path.posix.join(config.dev.assetsPublicPath, config.dev.assetsSubDirectory) +app.use(staticPath, express.static('./static')) + +module.exports = app.listen(port, function (err) { + if (err) { + console.log(err) + return + } + var uri = 'http://localhost:' + port + console.log('Listening at ' + uri + '\n') + + // when env is testing, don't need open it + if (process.env.NODE_ENV !== 'testing') { + opn(uri) + } +}) diff --git a/build/utils.js b/build/utils.js new file mode 100644 index 0000000..dc3cdd0 --- /dev/null +++ b/build/utils.js @@ -0,0 +1,61 @@ +var path = require('path') +var config = require('../config') +var ExtractTextPlugin = require('extract-text-webpack-plugin') + +exports.assetsPath = function (_path) { + var assetsSubDirectory = process.env.NODE_ENV === 'production' + ? config.build.assetsSubDirectory + : config.dev.assetsSubDirectory + return path.posix.join(assetsSubDirectory, _path) +} + +exports.cssLoaders = function (options) { + options = options || {} + // generate loader string to be used with extract text plugin + function generateLoaders (loaders) { + var sourceLoader = loaders.map(function (loader) { + var extraParamChar + if (/\?/.test(loader)) { + loader = loader.replace(/\?/, '-loader?') + extraParamChar = '&' + } else { + loader = loader + '-loader' + extraParamChar = '?' + } + return loader + (options.sourceMap ? extraParamChar + 'sourceMap' : '') + }).join('!') + + // Extract CSS when that option is specified + // (which is the case during production build) + if (options.extract) { + return ExtractTextPlugin.extract('vue-style-loader', sourceLoader) + } else { + return ['vue-style-loader', sourceLoader].join('!') + } + } + + // http://vuejs.github.io/vue-loader/en/configurations/extract-css.html + return { + css: generateLoaders(['css']), + postcss: generateLoaders(['css']), + less: generateLoaders(['css', 'less']), + sass: generateLoaders(['css', 'sass?indentedSyntax']), + scss: generateLoaders(['css', 'sass']), + stylus: generateLoaders(['css', 'stylus']), + styl: generateLoaders(['css', 'stylus']) + } +} + +// Generate loaders for standalone style files (outside of .vue) +exports.styleLoaders = function (options) { + var output = [] + var loaders = exports.cssLoaders(options) + for (var extension in loaders) { + var loader = loaders[extension] + output.push({ + test: new RegExp('\\.' + extension + '$'), + loader: loader + }) + } + return output +} diff --git a/build/webpack.base.conf.js b/build/webpack.base.conf.js new file mode 100644 index 0000000..931290b --- /dev/null +++ b/build/webpack.base.conf.js @@ -0,0 +1,77 @@ +var path = require('path') +var config = require('../config') +var utils = require('./utils') +var projectRoot = path.resolve(__dirname, '../') + +var env = process.env.NODE_ENV +// check env & config/index.js to decide weither to enable CSS Sourcemaps for the +// various preprocessor loaders added to vue-loader at the end of this file +var cssSourceMapDev = (env === 'development' && config.dev.cssSourceMap) +var cssSourceMapProd = (env === 'production' && config.build.productionSourceMap) +var useCssSourceMap = cssSourceMapDev || cssSourceMapProd + +module.exports = { + entry: { + app: './src/main.js' + }, + output: { + path: config.build.assetsRoot, + publicPath: process.env.NODE_ENV === 'production' ? config.build.assetsPublicPath : config.dev.assetsPublicPath, + filename: '[name].js' + }, + resolve: { + extensions: ['', '.js', '.vue'], + fallback: [path.join(__dirname, '../node_modules')], + alias: { + 'vue$': 'vue/dist/vue.common.js', + 'src': path.resolve(__dirname, '../src'), + 'assets': path.resolve(__dirname, '../src/assets'), + 'components': path.resolve(__dirname, '../src/components') + } + }, + resolveLoader: { + fallback: [path.join(__dirname, '../node_modules')] + }, + module: { + loaders: [ + { + test: /\.vue$/, + loader: 'vue' + }, + { + test: /\.js$/, + loader: 'babel', + include: projectRoot, + exclude: /node_modules/ + }, + { + test: /\.json$/, + loader: 'json' + }, + { + test: /\.(png|jpe?g|gif|svg)(\?.*)?$/, + loader: 'url', + query: { + limit: 10000, + name: utils.assetsPath('img/[name].[hash:7].[ext]') + } + }, + { + test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/, + loader: 'url', + query: { + limit: 10000, + name: utils.assetsPath('fonts/[name].[hash:7].[ext]') + } + } + ] + }, + vue: { + loaders: utils.cssLoaders({ sourceMap: useCssSourceMap }), + postcss: [ + require('autoprefixer')({ + browsers: ['last 2 versions'] + }) + ] + } +} diff --git a/build/webpack.dev.conf.js b/build/webpack.dev.conf.js new file mode 100644 index 0000000..7e1a104 --- /dev/null +++ b/build/webpack.dev.conf.js @@ -0,0 +1,34 @@ +var config = require('../config') +var webpack = require('webpack') +var merge = require('webpack-merge') +var utils = require('./utils') +var baseWebpackConfig = require('./webpack.base.conf') +var HtmlWebpackPlugin = require('html-webpack-plugin') + +// add hot-reload related code to entry chunks +Object.keys(baseWebpackConfig.entry).forEach(function (name) { + baseWebpackConfig.entry[name] = ['./build/dev-client'].concat(baseWebpackConfig.entry[name]) +}) + +module.exports = merge(baseWebpackConfig, { + module: { + loaders: utils.styleLoaders({ sourceMap: config.dev.cssSourceMap }) + }, + // eval-source-map is faster for development + devtool: '#eval-source-map', + plugins: [ + new webpack.DefinePlugin({ + 'process.env': config.dev.env + }), + // https://github.com/glenjamin/webpack-hot-middleware#installation--usage + new webpack.optimize.OccurenceOrderPlugin(), + new webpack.HotModuleReplacementPlugin(), + new webpack.NoErrorsPlugin(), + // https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: 'index.html', + template: 'index.html', + inject: true + }) + ] +}) diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js new file mode 100644 index 0000000..0ca5450 --- /dev/null +++ b/build/webpack.prod.conf.js @@ -0,0 +1,98 @@ +var path = require('path') +var config = require('../config') +var utils = require('./utils') +var webpack = require('webpack') +var merge = require('webpack-merge') +var baseWebpackConfig = require('./webpack.base.conf') +var ExtractTextPlugin = require('extract-text-webpack-plugin') +var HtmlWebpackPlugin = require('html-webpack-plugin') +var env = config.build.env + +var webpackConfig = merge(baseWebpackConfig, { + module: { + loaders: utils.styleLoaders({ sourceMap: config.build.productionSourceMap, extract: true }) + }, + devtool: config.build.productionSourceMap ? '#source-map' : false, + output: { + path: config.build.assetsRoot, + filename: utils.assetsPath('js/[name].[chunkhash].js'), + chunkFilename: utils.assetsPath('js/[id].[chunkhash].js') + }, + vue: { + loaders: utils.cssLoaders({ + sourceMap: config.build.productionSourceMap, + extract: true + }) + }, + plugins: [ + // http://vuejs.github.io/vue-loader/en/workflow/production.html + new webpack.DefinePlugin({ + 'process.env': env + }), + new webpack.optimize.UglifyJsPlugin({ + compress: { + warnings: false + } + }), + new webpack.optimize.OccurrenceOrderPlugin(), + // extract css into its own file + new ExtractTextPlugin(utils.assetsPath('css/[name].[contenthash].css')), + // generate dist index.html with correct asset hash for caching. + // you can customize output by editing /index.html + // see https://github.com/ampedandwired/html-webpack-plugin + new HtmlWebpackPlugin({ + filename: config.build.index, + template: 'index.html', + inject: true, + minify: { + removeComments: true, + collapseWhitespace: true, + removeAttributeQuotes: true + // more options: + // https://github.com/kangax/html-minifier#options-quick-reference + }, + // necessary to consistently work with multiple chunks via CommonsChunkPlugin + chunksSortMode: 'dependency' + }), + // split vendor js into its own file + new webpack.optimize.CommonsChunkPlugin({ + name: 'vendor', + minChunks: function (module, count) { + // any required modules inside node_modules are extracted to vendor + return ( + module.resource && + /\.js$/.test(module.resource) && + module.resource.indexOf( + path.join(__dirname, '../node_modules') + ) === 0 + ) + } + }), + // extract webpack runtime and module manifest to its own file in order to + // prevent vendor hash from being updated whenever app bundle is updated + new webpack.optimize.CommonsChunkPlugin({ + name: 'manifest', + chunks: ['vendor'] + }) + ] +}) + +if (config.build.productionGzip) { + var CompressionWebpackPlugin = require('compression-webpack-plugin') + + webpackConfig.plugins.push( + new CompressionWebpackPlugin({ + asset: '[path].gz[query]', + algorithm: 'gzip', + test: new RegExp( + '\\.(' + + config.build.productionGzipExtensions.join('|') + + ')$' + ), + threshold: 10240, + minRatio: 0.8 + }) + ) +} + +module.exports = webpackConfig diff --git a/config/dev.env.js b/config/dev.env.js new file mode 100644 index 0000000..efead7c --- /dev/null +++ b/config/dev.env.js @@ -0,0 +1,6 @@ +var merge = require('webpack-merge') +var prodEnv = require('./prod.env') + +module.exports = merge(prodEnv, { + NODE_ENV: '"development"' +}) diff --git a/config/index.js b/config/index.js new file mode 100644 index 0000000..207dfbd --- /dev/null +++ b/config/index.js @@ -0,0 +1,32 @@ +// see http://vuejs-templates.github.io/webpack for documentation. +var path = require('path') + +module.exports = { + build: { + env: require('./prod.env'), + index: path.resolve(__dirname, '../dist/index.html'), + assetsRoot: path.resolve(__dirname, '../dist'), + assetsSubDirectory: 'static', + assetsPublicPath: '/', + productionSourceMap: true, + // Gzip off by default as many popular static hosts such as + // Surge or Netlify already gzip all static assets for you. + // Before setting to `true`, make sure to: + // npm install --save-dev compression-webpack-plugin + productionGzip: false, + productionGzipExtensions: ['js', 'css'] + }, + dev: { + env: require('./dev.env'), + port: 8080, + assetsSubDirectory: 'static', + assetsPublicPath: '/', + proxyTable: {}, + // CSS Sourcemaps off by default because relative paths are "buggy" + // with this option, according to the CSS-Loader README + // (https://github.com/webpack/css-loader#sourcemaps) + // In our experience, they generally work as expected, + // just be aware of this issue when enabling this option. + cssSourceMap: false + } +} diff --git a/config/prod.env.js b/config/prod.env.js new file mode 100644 index 0000000..773d263 --- /dev/null +++ b/config/prod.env.js @@ -0,0 +1,3 @@ +module.exports = { + NODE_ENV: '"production"' +} diff --git a/index.html b/index.html new file mode 100644 index 0000000..ead0d5e --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + + + + + + + vue2spa + + +
+ + + diff --git a/package.json b/package.json new file mode 100644 index 0000000..cd237d8 --- /dev/null +++ b/package.json @@ -0,0 +1,53 @@ +{ + "name": "vue2spa", + "version": "1.0.0", + "description": "A Vue.js project", + "author": "xsf <416175716@qq.com>", + "private": true, + "scripts": { + "start": "node build/dev-server.js", + "build": "node build/build.js" + }, + "dependencies": { + "axios": "^0.15.3", + "vue": "^2.1.0", + "vue-router": "^2.1.1" + }, + "devDependencies": { + "autoprefixer": "^6.4.0", + "babel-core": "^6.0.0", + "babel-loader": "^6.0.0", + "babel-plugin-transform-runtime": "^6.0.0", + "babel-preset-es2015": "^6.0.0", + "babel-preset-stage-2": "^6.0.0", + "babel-register": "^6.0.0", + "chalk": "^1.1.3", + "connect-history-api-fallback": "^1.1.0", + "css-loader": "^0.25.0", + "eventsource-polyfill": "^0.9.6", + "express": "^4.13.3", + "extract-text-webpack-plugin": "^1.0.1", + "file-loader": "^0.9.0", + "function-bind": "^1.0.2", + "html-webpack-plugin": "^2.8.1", + "http-proxy-middleware": "^0.17.2", + "json-loader": "^0.5.4", + "semver": "^5.3.0", + "opn": "^4.0.2", + "ora": "^0.3.0", + "shelljs": "^0.7.4", + "url-loader": "^0.5.7", + "vue-loader": "^10.0.0", + "vue-router": "^2.0.3", + "vue-style-loader": "^1.0.0", + "vue-template-compiler": "^2.1.0", + "webpack": "^1.13.2", + "webpack-dev-middleware": "^1.8.3", + "webpack-hot-middleware": "^2.12.2", + "webpack-merge": "^0.14.1" + }, + "engines": { + "node": ">= 4.0.0", + "npm": ">= 3.0.0" + } +} diff --git a/screenShot/20160824203433387.png b/screenShot/20160824203433387.png new file mode 100644 index 0000000..b5d8ffa Binary files /dev/null and b/screenShot/20160824203433387.png differ diff --git a/screenShot/lifecycle.png b/screenShot/lifecycle.png new file mode 100644 index 0000000..a59178b Binary files /dev/null and b/screenShot/lifecycle.png differ diff --git a/src/App.vue b/src/App.vue new file mode 100644 index 0000000..3e458ff --- /dev/null +++ b/src/App.vue @@ -0,0 +1,31 @@ + + + diff --git a/src/assets/logo.png b/src/assets/logo.png new file mode 100644 index 0000000..f3d2503 Binary files /dev/null and b/src/assets/logo.png differ diff --git a/src/components/Hello.vue b/src/components/Hello.vue new file mode 100644 index 0000000..81d4fa7 --- /dev/null +++ b/src/components/Hello.vue @@ -0,0 +1,33 @@ + + + + diff --git a/src/components/footer.vue b/src/components/footer.vue new file mode 100644 index 0000000..45cebd7 --- /dev/null +++ b/src/components/footer.vue @@ -0,0 +1,47 @@ + + + diff --git a/src/components/header.vue b/src/components/header.vue new file mode 100644 index 0000000..7c022e8 --- /dev/null +++ b/src/components/header.vue @@ -0,0 +1,25 @@ + + + diff --git a/src/css/common.css b/src/css/common.css new file mode 100644 index 0000000..774e8ce --- /dev/null +++ b/src/css/common.css @@ -0,0 +1,80 @@ +@charset "utf-8"; + +/*清零*/ +body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td { margin:0; padding:0;} +fieldset,img { border:0;} +ol,ul { list-style:none; } +h1,h2,h3,h4,h5,h6,button,input,select,textarea { font-size:100%; + font-weight: normal; } +button::-moz-focus-inner,input::-moz-focus-inner{ padding:0; border:0; } +table{ border-collapse: collapse; border-spacing: 0; } +i, cite, em, var, dfn, address { font-style: normal; } +body{ font:14px "方正兰亭细黑简体","微软雅黑","宋体",Arial;} +a{ text-decoration:none; outline: none;} +a:hover{ text-decoration: none; } +a:active, a:focus{ outline:none; } +b{ font-weight: normal; } +input ,button{ border: none; outline: none;} +input:not([type="radio"]){appearance:none;-webkit-appearance:none;-o-appearance:none;-moz-appearance:none;} +button:active{ + transform:scale(0.9); + -webkit-transform: scale(0.9); + -moz-transform: scale(0.9); + -ms-transform: scale(0.9); + -o-transform: scale(0.9); +} +textarea{ + appearance: none; + -webkit-appearance: none; + -moz-appearance: none; + -o-appearance: none; + resize: none; +} +input{ + border-radius: 0; +} + +*{ + box-sizing: border-box; +} + +a{ + color: #232323; +} +button{ + background: none; +} + + +@font-face { + /*font-family: "iconfont";*/ + /*src: require('iconfont.woff') format('woff'),*/ + /*require('iconfont.ttf') format('truetype'),*/ + /*require('iconfont.svg#iconfont') format('svg');*/ +} + +.iconfont { + font-family:"iconfont" !important; + font-style:normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.2px; + -moz-osx-font-smoothing: grayscale; +} + +[v-cloak] { + display: none; +} + +/* common css */ +.col2{ + width: 50%; +} +.col3{ + width: 33.33%; +} +.col4{ + width: 25%; +} +.col6{ + width: 16.66%; +} diff --git a/src/json/test.json b/src/json/test.json new file mode 100644 index 0000000..c75f862 --- /dev/null +++ b/src/json/test.json @@ -0,0 +1,88 @@ +{ + "code": "0", + "data": { + "msg": "操作成功！", + "success": true , + "result": [{ + "filmId": 0, + "name": "樱桃", + "mainRole": "苗圃/ 妥国权/ 龙丽", + "director": "张加贝", + "type": "家庭 文艺 剧情", + "area": "中国 日本", + "summarize": "剧本根据真人真事改编，从小失去双亲被同村的好心人葛望的母亲收留的樱桃，与患有小儿麻痹的葛望结为夫妻。善良的樱桃偶然在路边捡回一个小孩，不顾家境贫困收养了她。葛望将养女红红偷偷送给别人，樱桃知道后伤心欲绝，挨家挨户寻找红红并最终将其找回。红红上学后，因为母亲的缘故常被同学嘲笑，因此对母亲产生了反感，开始孤立母亲。一次樱桃因冒雨给红红摘樱桃掉进了河中，红红终于体会到母亲对自己的爱。为了报答母亲，红红发奋读书，最终考上了大学，并在大学毕业后回到了家乡。", + "url": "http://hcloud.widewisdom.cn/video/accessible/yt.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/yt.jpg" + },{ + "filmId": 1, + "name": "生死抉择", + "mainRole": "左翎 王庆祥 廖京生", + "director": "于本正", + "type": "家庭 文艺 剧情", + "area": "", + "summarize": "北方某省会城市市长李高成自中央党校学习一年后回来，就面临复杂的局面和尖锐的矛盾。一方面，自己出现一个强有力的竞争对手杨诚，他来了才半年，省委就已经任命他主持市委工作，而自己曾经工作过的中阳纺织厂有上千工人准备到市政府请愿，令他大吃一惊。李高成就是该厂的厂长，几十年来它一直是本市纳税大户，但却面临着破产和倒闭……李高成进入中阳纺织厂进行调查，但随着调查的一步步深入，却发现由他一手提拔的中阳纺织厂领导班子存在着集体腐败，自己的妻子吴蔼珍也深深卷入其中，李高成的四弟李宝柱本来在家种田，却成了“青苹果娱乐城”的总经理。这个乌烟瘴气的娱乐城，幕后老板正是中阳纺织厂的领导班子。而所有这些盘根错节的关系网被后，培养他的省委副书记严阵就是其中的关键。李高成面临着痛苦的抉择。最终，在党性和良知的要求下，在杨诚的协助下，李高成做出了一个共产党员应有的选择。", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/ssjz.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/ssjz.jpg" + },{ + "filmId": 2, + "name": "东京审判", + "mainRole": "刘松仁，曾江，英达，朱孝天", + "director": "高群书", + "type": "犯罪，剧情，历史，战争", + "area": "", + "summarize": "《东京审判》是由高群书执导，刘松仁、曾江、英达、朱孝天等担任主演的历史纪录片。1946年，远东国际军事法庭在东京审判日本战犯，该法庭由11个国家的11名法官组成。受中国国民政府的委任，以梅汝璈为首的中国法官在大国利益主导的势力挤压下，奋力突围，终于将以东条英机为首的七个战犯送上绞刑架", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/djsp.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/djsp.jpg" + },{ + "filmId": 3, + "name": "非诚勿扰", + "mainRole": "葛优，舒淇，方中信", + "director": "冯小刚", + "type": "家庭 文艺 剧情", + "area": "中国 日本", + "summarize": "海归秦奋（葛优饰）的天才发明“分歧终端机”因能公平和平地解决人类分歧，被风投者以200万英镑高价买走。秦奋也开始踏上网上征婚的路途，一路笑话不断，不是重遇Gay友，就是遇到推销客，秦奋颇有点心灰意冷，以致遇到清冷女子梁笑笑（舒淇饰）时便开门见山请求对方说明来意。这次更为棘手，笑笑爱上有妇之夫，陷于苦恋中不停挣扎，这次纯属听从家里人安排才出来与秦奋见上一面。不再打算再见的二人尽情地分享了生命中最隐秘的秘密。然而不久，打算和旧爱分手的笑笑找到秦奋，说要嫁给他，但想与他先去北海道一趟。因她与旧爱的爱情是在那里开始的，如今想在那里结束。秦奋答应了。二人踏上北海道之旅，秦奋在北海道的老友对他们盛情招待，三人游遍北海道各处，秦奋知道自己得不到笑笑的心，却不知道笑笑心中抑郁难解的结正冲向海底的漩涡……", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/fcwr.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/fcwr.jpg" + },{ + "filmId": 4, + "name": "洒满阳光的路上", + "mainRole": "王若涵 王光辉 王澜 李易峰", + "director": "李宝生", + "type": "家庭 文艺 剧情", + "area": "中国 日本", + "summarize": "《洒满阳光的路上》讲述的是一个富二代女孩子与大别山里的孩子共同成长的故事。影片由中共合肥市委宣传部与北京森林奇艺影视文化传媒有限公司联合出品，将在合肥肥西三河古镇等地取景。 大别山区物质匮乏的生活坏境让周菲菲难以忍受，但是山里孩子们的纯真与质朴以及革命老区人民的古道热肠都深深感染了她，让她无法撤身。虽然生活清贫，但人们依然不忘周济更困难的家庭；虽然学校条件简陋，但是孩子们始终对未来满怀希望……", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/smygdls.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/smygdls.jpg" + },{ + "filmId": 5, + "name": "跑出一片天", + "mainRole": "麦咏麟 李远", + "director": "张加贝", + "type": "家庭 文艺 剧情", + "area": "中国 日本", + "summarize": "单身家庭长大的男孩李小天（苗雅宁饰），从小就有跑步天赋，可惜身高不够，常被同学嘲笑。爸爸飞雄（常铖饰）以卖砂锅为生，一心望子成龙，只希望他用功读书，却忽视了小天了梦想——跑步和有一个妈妈！父子因此产生隔阂。大眼仔（田亮饰）看中小天的资质，带他参加“酷跑之夜”，认识了跑酷高手蝎子（杨幂饰）、裁判（何晟铭饰）、Cindy(戚薇饰)等人。在大家帮助下，小天重拾信心，刻苦训练，一场热血严格的比赛同时也摆在了他的面前", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/pcypt.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/pcypt.jpg" + },{ + "filmId": 6, + "name": "辛亥革命", + "mainRole": "成龙/ 张黎", + "director": "张加贝", + "type": "家庭 文艺 剧情", + "area": "中国 日本", + "summarize": "19世纪末20世纪初，清王朝三百年江山气数将近，内忧外患，时局动荡，正是乱世之际，英雄辈出，中华民族面临着重大的历史变革。以孙中山（赵文瑄 饰）为首的仁人志士意识到只有民主共和才能救中国，他们组成一个个革命政党，旨在推翻满清政府，建立人民当家作主的民主国家。 　　在这一过程中，无数革命者流血牺牲，但是更多的革命家站出来与落后的封建体制作斗争，终于在武昌打响了辛亥革命的第一枪。在此期间，黄兴（成龙 饰）、黎元洪（姜武 饰）、隆裕太后（陈冲 饰）、袁世凯（孙淳 饰）、汪精卫（余少群 饰）、宋教仁（邢桂栋 饰）、秋瑾（宁静 饰）等各方人物你方唱罢我登场，谱写了中国近代史上最为辉煌的篇章……", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/xhgm.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/xhgm.jpg" + },{ + "filmId": 7, + "name": "大灌篮", + "mainRole": "周杰伦，曾志伟，蔡卓妍，王刚，陈柏霖，吴孟达，吴宗宪", + "director": "朱延平(动作导演：程小东)", + "type": "", + "area": "中国", + "summarize": "世杰是一个见义勇为、好打不平的孤儿，被功夫大学的老校长收养，从小习武，有一身好功夫，也有“中投”的神技，可惜的是，和接任的校长朱标不对盘，被拿来当练习的“人肉沙包”，就连四大高手也没出面帮他。新任功夫大学校长，爱钱又势利，当然看不惯世杰打着老校长养子的名号，在学校白吃白喝，也当然会借故编派罪名将世杰驱逐出校门。 世杰流浪到公园，无意中展现“中投”神技，被“公园混混管区”王立看上，利用世杰是孤儿，诱之以“打球可以成名、成名之后可以寻亲”，骗世杰去打篮球，藉此赚取世杰打球“中投”而来的知名度和利益，中饱私囊。 王立说服世杰打篮球之后，带着世杰来到第一大学说服周校长让世杰加入球队。世杰死命的要引起莉莉的注意，可恨的是，莉莉全部的注意力都在篮球校队的风云人物箫风身上，于是世杰发誓，他一定要在篮球场上给箫风好看。于是，每每球赛时就会发生诡异的现象，明明要合作对抗外敌，世杰却是处处找同队箫风的麻烦。另一方面，篮球界的叛徒李天，和大恐龙有私人恩怨，看不惯第一大学因为世杰的加入气势如日中天，于是向他们挑衅比赛，找来了藉着官高位重，到处收购土地趁机发财的毕议员合作，发誓绝对要把第一大学打得落花流水。历经千辛万苦，终于球赛打胜了。最后，世杰和莉莉结婚，生下小孩，从此过着幸福快乐的日子。", + "url": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/dgl.mp4", + "img": "http://hcloud.widewisdom.cn/interface/upload/video/accessible/cover/dgl.jpg" + }] + } +} diff --git a/src/main.js b/src/main.js new file mode 100644 index 0000000..9df9eb8 --- /dev/null +++ b/src/main.js @@ -0,0 +1,10 @@ +/* 项目启动 */ +import Vue from 'vue' +import App from './App' +import router from './router' + +new Vue({ + router: router, + render: h => h(App) + // components: { firstcomponent, secondcomponent } +}).$mount('#app') diff --git a/src/pages/index.vue b/src/pages/index.vue new file mode 100644 index 0000000..0b7c829 --- /dev/null +++ b/src/pages/index.vue @@ -0,0 +1,63 @@ + + + + diff --git a/src/pages/news.vue b/src/pages/news.vue new file mode 100644 index 0000000..173cf79 --- /dev/null +++ b/src/pages/news.vue @@ -0,0 +1,95 @@ + + + + diff --git a/src/pages/otherPages.vue b/src/pages/otherPages.vue new file mode 100644 index 0000000..5b1e787 --- /dev/null +++ b/src/pages/otherPages.vue @@ -0,0 +1,15 @@ + + + diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..d9fa933 --- /dev/null +++ b/src/router/index.js @@ -0,0 +1,30 @@ +/* 路由配置全写这里 */ +import Vue from 'vue' +import VueRouter from 'vue-router' + +/* 开启debug模式 */ +Vue.config.debug = true +Vue.use(VueRouter); + +import secondcomponent from '../pages/otherPages.vue' +import Index from '../pages/index.vue' +import News from '../pages/news.vue' + +export default new VueRouter({ + mode: 'history', + base: __dirname, + routes: [ + { + path: '/index', + component: Index + }, + { + path: '/news', + component: News + }, + { + path: '/second', + component: secondcomponent + } + ] +}) diff --git a/static/.gitkeep b/static/.gitkeep new file mode 100644 index 0000000..e69de29