Merge pull request #7 from allan2coder/dev2

大升级

.babelrc

@@ -1,5 +1,10 @@
 {
-  "presets": ["es2015", "stage-2"],
-  "plugins": ["transform-runtime"],
-  "comments": false
+  "presets": [
+    ["env", {
+      "modules": false,
+      "targets": {
+        "browsers": ["> 1%", "last 2 versions", "not ie <= 8"]
+      }
+    }]
+  ]
 }

.editorconfig

@@ -1,9 +0,0 @@
-root = true
-
-[*]
-charset = utf-8
-indent_style = space
-indent_size = 2
-end_of_line = lf
-insert_final_newline = true
-trim_trailing_whitespace = true

.gitignore

@@ -1,5 +1,4 @@
 .DS_Store
 node_modules/
 dist/
-npm-debug.log
-.idea/
+npm-debug.log

README.md

@@ -1,4 +1,6 @@
 # Vue2-SPA
+
+> 可能是全网最干净的 `vue` 仓库
 > A Vue.js project with axios/vue-router/webpack
 
 
@@ -103,29 +105,25 @@ const app = new Vue({
 // 现在，应用已经启动了！
 ```
 
-### 生产环境要注意的地方：
+### 有关打包优化
+第三方库单独打包
+```
+npm i autodll-webpack-plugin -D
+```
+webpack 配置：
+```
+new AutoDllPlugin({
+  inject: true, // will inject the DLL bundle to index.html
+  debug: true,
+  filename: '[name]_[hash].js',
+  path: './dll',
+  entry: {
+    vendor: ['vue', 'vue-router'] // webpack 会去 `node_modules` 去找
+  }
+})
+```
+每次打包，这个插件都会检查注册在 `entry` 中的第三方库。如果没有变化，插件就会使用缓存中的打包文件，减少了打包的时间，这时 Hash 也不会变化。
 
-> 1、生产环境下若项目不是放在服务器的根目录下会访问不到静态资源，此时，你只需要修改下config文件夹内index.js的build中的assetsPublicPath即可
-
-```
-before：
-assetsPublicPath: '/', 
-```
-```
-after:
-assetsPublicPath: '/wx/otherPath/static', 
-```
-
-> 2、在写静态资源的时候最好使用相对路径，如：
-
-```
-error:
-background: url(../assets/img/icon.png);
-```
-```
-right:
-background: url(./../assets/img/icon.png);
-```
 
 
 ## Other SPA(其他单页)

_config.yml

@@ -1 +0,0 @@
-theme: jekyll-theme-cayman

build/build.js

@@ -1,36 +1,15 @@
-// https://github.com/shelljs/shelljs
-require('./check-versions')()
-require('shelljs/global')
-env.NODE_ENV = 'production'
+const webpack = require('webpack');
+const config = require('./webpack.prod.conf');
 
-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')
-})
+webpack(config, (err, stats) => {
+  if (err || stats.hasErrors()) {
+    // 在这里处理错误
+    console.error(err);
+    return;
+  }
+  // 处理完成
+  console.log(stats.toString({
+    chunks: false,  // 使构建过程更静默无输出
+    colors: true    // 在控制台展示颜色
+  }));
+});

build/check-versions.js

@@ -1,45 +0,0 @@
-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)
-  }
-}

build/dev-client.js

@@ -1,9 +0,0 @@
-/* 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()
-  }
-})

build/dev-server.js

@@ -1,72 +0,0 @@
-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)
-  }
-})

build/utils.js

@@ -1,61 +0,0 @@
-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
-}

build/webpack.base.conf.js

@@ -1,77 +1,55 @@
-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
+const path = require('path');
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+const AutoDllPlugin = require('autodll-webpack-plugin');
+const VueLoaderPlugin = require('vue-loader/lib/plugin');
 
 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']
-      })
-    ]
-  }
-}
+	entry: {
+		bundle: path.resolve(__dirname, '../src/index.js')
+	},
+	output: {
+		path: path.resolve(__dirname, '../dist'),
+		filename: '[name].[hash].js'
+	},
+	resolve: {
+		extensions: ['*', '.js', '.json', '.vue'],
+		alias: {
+			'vue$': 'vue/dist/vue.esm.js',
+			'@': path.resolve(__dirname, '../src'),
+		}
+	},
+	module: {
+		rules: [
+			{
+				test: /\.vue$/,
+				loader: 'vue-loader'
+			},
+			{
+				test: /\.js$/,
+				use: 'babel-loader',
+				exclude: /node_modules/
+			},
+			{
+				test: /\.css$/,
+				use: ['vue-style-loader', 'css-loader']
+			}
+		]
+	},
+	plugins: [
+		new HtmlWebpackPlugin({
+			template: path.resolve(__dirname, '../index.html')
+		}),
+		// Dll 优化，需要的时候可以打开
+		// new AutoDllPlugin({
+		// 	inject: true, // will inject the DLL bundle to index.html
+		// 	debug: true,
+		// 	filename: '[name]_[hash].js',
+		// 	path: './dll',
+		// 	entry: {
+		// 	  vendor: ['vue', 'vue-router']
+		// 	}
+		// }),
+		new VueLoaderPlugin(),
+		// new webpack.optimize.SplitChunksPlugin()
+	]
+};

build/webpack.dev.conf.js

@@ -1,34 +1,20 @@
-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')
+const merge = require("webpack-merge");
+const path = require("path");
+const baseConfig = require("./webpack.base.conf");
 
-// 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
-    })
-  ]
-})
+module.exports = merge(baseConfig, {
+	mode: "development",
+	devtool: "inline-source-map",
+	module: {
+		rules: [  // 自己拓展着玩呀
+			// {
+			// 	test: /\.css$/,
+			// 	use: ["vue-style-loader", "css-loader", "postcss-loader"],
+			// },
+		],
+	},
+	devServer: {
+		contentBase: path.resolve(__dirname, "../dist"),
+		open: true,
+	},
+});

build/webpack.prod.conf.js

@@ -1,98 +1,27 @@
-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
+const merge = require("webpack-merge");
+const path = require("path");
+const baseConfig = require("./webpack.base.conf");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
 
-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
+module.exports = merge(baseConfig, {
+	mode: "production",
+	devtool: "source-map",
+	module: {
+		rules: [ // 自己拓展着玩呀
+			// {
+			// 	test: /\.css$/,
+			// 	use: [
+			// 	  'css-loader',
+			// 	  'postcss-loader',
+			// 	]
+			// },
+		],
+	},
+	plugins: [
+		new CleanWebpackPlugin({
+			root: path.resolve(__dirname, "../"),
+			verbose: true,
+			dry: false,
+		}),
+	],
+});

index.html

@@ -10,7 +10,6 @@
     <meta name="format-detection" content="telephone=no">
     <meta name="format-detection" content="address=no">
     <title>vue2spa</title>
-    <link rel="stylesheet" href="./static/reset.css">
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -1,53 +1,44 @@
 {
-  "name": "vue2spa",
+  "name": "vue2-spa-tutorial",
   "version": "1.0.0",
-  "description": "A Vue.js project",
-  "author": "xsf <416175716@qq.com>",
-  "private": true,
+  "author": "Allan",
+  "description": "最干净的脚手架",
+  "main": "index.js",
   "scripts": {
-    "start": "node build/dev-server.js",
+    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "build": "node build/build.js"
   },
   "dependencies": {
-    "axios": "^0.15.3",
-    "vue": "^2.1.0",
-    "vue-router": "^2.1.1"
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
   },
   "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"
+    "autodll-webpack-plugin": "^0.4.2",
+    "autoprefixer": "^6.7.7",
+    "babel-core": "^6.26.3",
+    "babel-loader": "^7.1.5",
+    "babel-preset-env": "^1.7.0",
+    "clean-webpack-plugin": "^3.0.0",
+    "css-loader": "^3.5.3",
+    "file-loader": "^6.0.0",
+    "html-webpack-plugin": "^4.0.0-beta.14",
+    "mini-css-extract-plugin": "^0.9.0",
+    "postcss-loader": "^3.0.0",
+    "vue-loader": "^15.9.2",
+    "vue-style-loader": "^4.1.2",
+    "vue-template-compiler": "^2.6.11",
+    "webpack": "^4.43.0",
+    "webpack-cli": "^3.3.11",
+    "webpack-dev-server": "^3.11.0"
   },
-  "engines": {
-    "node": ">= 4.0.0",
-    "npm": ">= 3.0.0"
-  }
-}
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/allan2coder/VUE2-SPA-Tutorial.git"
+  },
+  "keywords": [
+    "webpack4",
+    "vue2",
+    "vue3"
+  ],
+  "license": "ISC"
+}

postcss.config.js

@@ -0,0 +1,5 @@
+module.exports = {
+    plugins: [
+      require('autoprefixer')
+    ]
+}

src/App.vue

@@ -1,30 +1,26 @@
-<!-- 首页内容渲染 -->
 <template>
-  <div>
-
-    <!-- 可以删掉 顶部 -->
-    <HeaderCompontent></HeaderCompontent>
-
-    <!-- 渲染出口 -->
-    <router-view></router-view>
-
-    <!-- 可以删除 底部菜单 -->
-    <FootComponent></FootComponent>
-
-  </div>
+    <div>
+        <!-- 删除试试 顶部 -->
+        <HeaderCompontent></HeaderCompontent>
+        <!-- 渲染出口 -->
+        <router-view></router-view>
+        <!-- 删除试试 底部菜单 -->
+        <FootComponent></FootComponent>
+    </div>
 </template>
 <script>
     import HeaderCompontent from './components/header.vue'
     import FootComponent from './components/footer.vue'
     export default{
-        data(){
-            return{
-                msg:'Hello vue',
-            }
-        },
         components:{
             HeaderCompontent,
             FootComponent
         }
     }
 </script>
+<style>
+    body, ul, h4{
+        margin: 0;
+		text-align: center;
+    }
+</style>

src/components/footer.vue

@@ -3,9 +3,6 @@
         <div class="col4">
           <router-link to="/index">index</router-link>
         </div>
-        <div class="col4">
-          <router-link to="/news">news</router-link>
-        </div>
         <div class="col4">
           <router-link to="/second">menu3</router-link>
         </div>
@@ -31,11 +28,9 @@
         bottom: 0;
         z-index: 99;
         border-top: 1px solid #ccc;
-    }
-    .fixed-bottom div {
-        display: inline-block;
-        float: left;
+        display: grid;
         text-align: center;
+        grid-template-columns: 33% 33% 33%;
     }
     .fixed-bottom a {
         width: 100%;

src/components/header.vue

@@ -1,17 +1,8 @@
 <template>
   <div class="header">
-    <img src="../assets/logo.png">
+    <img src="https://png2.cleanpng.com/sh/9f5efd7936dbbc0513a929a7809ebd10/L0KzQYm3V8E5N5pnR91yc4Pzfri0lwVmNZt4RdxqdnH2c8PwkQQudJpnitN7eT3kfrj8jPFzcqQyitdqY4SwhsbsTfp0NWZnTNdrZUHmQIq4Wck0NmkATaI7OEK8QYa6Ucg5P2I4SqI8N0OxgLBu/kisspng-vue-js-javascript-library-angularjs-react-vue-js-5b4ebe1c091993.8950282915318871320373.png" />
   </div>
 </template>
-<script>
-    export default{
-        data(){
-            return{
-                msg: 'Hello vue'
-            }
-        }
-    }
-</script>
 <style>
     .header{
         width: 100%;
@@ -19,7 +10,7 @@
     }
     .header img{
         width: 50%;
-        margin: 30px auto 0;
+		margin: 30px auto 30px;
         display: block;
     }
 </style>

src/components/secondcomponent.vue

@@ -1,36 +1,33 @@
 <template>
-  <div class="hello">
-    <h4>这是子组件</h4>
-    <p>这是<span>来自父组件</span>的数据：{{myMessage}}</p>
-  </div>
+	<div class="second-wrap">
+		<h4>这是子组件</h4>
+		<p>这是<span>来自父组件</span>的数据：{{myMessage}}</p>
+	</div>
 </template>
 
 <script>
 export default {
-  name: 'child',
-  props: [
-    'myMessage',
-  ],
-  // mounted(){
-  //   console.log("子组件打印:",this.myMessage);
-  // }
+	name: 'child',
+	props: [
+		'myMessage',
+	]
 }
 </script>
 
 <style scoped>
-  .hello{
-    margin-top: 30px;
-  }
-  h4,p{
-    color: #41b883;;
-    text-align: left;
-    font-size: 20px;
-  }
-  p{
-    font-size: 12px;
-  }
-  span{
-    color: #35495e;
-  }
+	.second-wrap{
+		margin-top: 30px;
+		text-align: center;
+	}
+	h4,p{
+		color: #41b883;;
+		font-size: 20px;
+	}
+	p{
+		font-size: 12px;
+	}
+	span{
+		color: #35495e;
+	}
 </style>
 

src/components/thirdcomponent.vue

@@ -1,32 +1,30 @@
 <template>
     <div class="thirdComponent">
-      <button v-on:click="increment">{{ counter }}</button>
+		<button v-on:click="increment">{{ counter }}</button>
     </div>
 </template>
 
 <script>
   export default {
     name: 'button-counter',
-    data () {
-      return {
-        counter: 0
-      }
-    },
+    data: () => ({
+		counter: 0,
+	}),
     methods: {
-      increment: function () {
-        this.counter += 1
-        this.$emit('increment')
-      }
+		increment: function () {
+			this.counter += 1
+			this.$emit('increment')
+		}
     }
   }
 </script>
 
 <style scoped>
-  .thirdComponent{
-    display: inline-block;
-  }
-  button{
-    color: #41b883;
-    border-color: #41b883;
-  }
+	.thirdComponent{
+		display: inline-block;
+	}
+	button{
+		color: #41b883;
+		border-color: #41b883;
+	}
 </style>

src/index.js

@@ -0,0 +1,9 @@
+// 项目启动
+import Vue from "vue";
+import App from "./App";
+import router from "./router";
+
+new Vue({
+    router: router, // 注册路由
+    render: (h) => h(App),
+}).$mount("#app"); // 渲染挂载

src/main.js

@@ -1,10 +0,0 @@
-/* 项目启动 */
-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')

src/mock/index.js

@@ -0,0 +1,17 @@
+// mock data
+export const data =  {
+    success: true,
+    data: [{
+        name: "React",
+        id: 1,
+    },{
+        name: "Vue",
+        id: 2,
+    },{
+        name: "Angular",
+        id: 3,
+    },{
+        name: "Flutter",
+        id: 4,
+    }]
+};

src/pages/index.vue

@@ -1,94 +1,69 @@
 <template>
-    <div>
-        <button v-on:click="loadMore">click me</button>
-        <div>
-            <ul>
-                <li v-for="(item, index) in listArr">
-                    <a href="https://github.com/allan2coder/VUE2-SPA-Tutorial">{{index}} 《{{item.name}}》</a>
-                </li>
-            </ul>
-        </div>
-        <div class="loading" v-if="loading">
-          Loading...
-        </div>
-    </div>
+  <div>
+    <button v-on:click="loadMore">click me</button>
+	<ul>
+		<li v-for="(item, index) in listArr" :key="index">
+			<a href="">{{ index }} 《{{ item.name }}》</a>
+		</li>
+	</ul>
+  </div>
 </template>
 <script>
-    // ajax 使用官方推荐的 axios
-    import axios from 'axios'
+let mock = require('../mock'); // 模拟请求
 
-    export default{
-        data () {
-            return{
-                loading: false,
-                listArr: [],
-            }
-        },
-        created () {
-            this.loadList();
-        },
-        methods: {
-            loadList: function() {
-                console.log("初始化加载数据开始...");
-                var _this = this;
-                _this.loading = true;
-                axios.get('https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery', {
-                  params: {
-                    
-                  }
-                })
-                .then(function (response) {
-                  _this.loading = false;
-                  _this.listArr = response.data.items;
-                  console.log(_this.listArr,"加载完成");
-                })
-                .catch(function (error) {
-                  console.log(error);
-                });
-            },
-            loadMore: function(){
-                console.log("load more")
-                var _this = this;
-                _this.loading = true;
-                axios.get('https://api.github.com/search/code?q=addClass+in:file+language:js+repo:jquery/jquery', {
-                  params: {
-                    
-                  }
-                })
-                .then(function (response) {
-                  _this.loading = false;
-                  _this.listArr = _this.listArr.concat(response.data.items);
-                })
-            }
-        }
-    }
+export default {
+	data: () => ({
+		listArr: [],
+		page: 1,
+	}),
+	created() {
+		this.loadList();
+	},
+	methods: {
+		loadList(page) {
+			const {data, success} = mock.data;
+			if (this.page > 1) {
+				console.log("page is:", this.page);
+				return this.listArr = this.listArr.concat(data);
+			}
+			this.listArr = data;
+		},
+		loadMore() {
+			this.loadList(this.page++);
+		},
+	},
+};
 </script>
 
 <style>
-  button{
-    display: block;
-    margin: 0 auto;
-    line-height: 30px;
-    border: 1px solid #ddd;
-    color: #41b883;
-  }
-  a{
-    color: #35495e;
-    font-size: 16px;
-  }
-  ul{
-    margin-bottom: 60px;
-  }
-  li{
-    line-height: 32px;
-    border-bottom: 1px solid #ddd;
-    padding: 0 10px;
-  }
-  b{
-    font-size: 12px;
-    color: #35495e;
-  }
-  .loading{
-    text-align: center;
-  }
+button {
+	display: block;
+	margin: 0 auto;
+	line-height: 30px;
+	border: 1px solid #ddd;
+	color: #41b883;
+}
+a {
+	color: #35495e;
+	font-size: 16px;
+	text-decoration: none;
+}
+ul {
+	margin-bottom: 60px;
+	padding: 20px;
+}
+li {
+	line-height: 32px;
+	border-bottom: 1px solid #ddd;
+	padding: 0 10px;
+	text-align: left;
+	list-style: none;
+}
+b {
+	font-size: 12px;
+	color: #35495e;
+}
+.loading {
+  	text-align: center;
+}
 </style>

src/pages/news.vue

@@ -1,11 +0,0 @@
-<template>
-  <h4 class="news-tit">啥玩意儿？</h4>
-</template>
-
-<style>
-  .news-tit{
-    font-size: 18px;
-    margin-top: 60px;
-    text-align: center;
-  }
-</style>

src/pages/otherPages.vue

@@ -4,44 +4,41 @@
   	<!-- 父组件内容 -->
     <h4>这是父组件</h4>
 	<p>这是父组件正在渲染的数据：{{parentMsg}}</p>
-	<input type="" v-model="parentMsg" autofocus="autofocus" placeholder="type something">
+	<input type="" v-model="parentMsg" autofocus="autofocus" placeholder="type something" />
 
 	<!-- 子组件内容 -->
-	<tochild :my-message="parentMsg"></tochild>
+	<child :my-message="parentMsg"></child>
 
   </div>
 </template>
 
 <script>
-	import tochild from '../components/secondcomponent.vue'
+	import Child from '../components/secondcomponent.vue'
 
 	export default {
-	  data () {
-	    return {
-	      parentMsg: ''
-	    }
-	  },
-	  components: {	// 挂载组件
-	  	tochild
-	  }
+		data: () => ({
+			parentMsg: '',
+		}),
+		components: {	// 挂载组件
+			Child
+		}
 	}
 </script>
 
 <style scoped>
-  h4,p{
-    color: #35495e;
-    text-align: left;
-    font-size: 20px;
-  }
-  p{
-  	font-size: 14px;
-  }
-  input{
-  	margin: 4px;
-  	outline: none;
-  	border: 1px solid #ddd;
-  	line-height: 24px;
-  	min-width: 300px;
-  	padding-left: 10px;
-  }
+	h4,p{
+		color: #35495e;
+		font-size: 20px;
+	}
+	p{
+		font-size: 14px;
+	}
+	input{
+		margin: 4px;
+		outline: none;
+		border: 1px solid #ddd;
+		line-height: 24px;
+		min-width: 300px;
+		padding-left: 10px;
+	}
 </style>

src/pages/otherPages2.vue

@@ -1,10 +1,11 @@
 <template>
   <div class="container">
 
-		<!-- 这是父组件内容 -->
+	<!-- 这是父组件内容 -->
     <h4>子组件数据传递给父组件</h4>
 	  <p>方式：用自定义事件</p>
-	  <p class="text-center parent-tit">这是父组件</p>
+	  <p class="parent-title">这是父组件</p>
+
 		<!-- 父组件可以在使用子组件的地方直接用 v-on 来监听子组件触发的事件。 -->
 		<h2 class="text-center">{{ total }}</h2>
 
@@ -13,7 +14,7 @@
 		<div class="text-center">
 			<p>这是子组件</p>
 			<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
-		  <buttonCounter v-on:increment="incrementTotal"></buttonCounter>
+		  	<buttonCounter v-on:increment="incrementTotal"></buttonCounter>
 		</div>
 
   </div>
@@ -23,34 +24,32 @@
 	 import buttonCounter from '../components/thirdcomponent.vue'
 
 	 export default {
-			data () {
-				return {
-					parentMsg: '子组件传递信息给父元素',
-					total: 0
-				}
-			},
-			methods: {
-			  incrementTotal: function () {
-			    this.total += 1
-			  }
-			},
+		data: () => ({
+			parentMsg: '子组件传递信息给父元素',
+			total: 0,
+		}),
+		methods: {
+			incrementTotal: function () {
+			this.total += 1
+			}
+		},
 	    components: {
-	   	  buttonCounter
+	   	  	buttonCounter
 	    }
 	 }
 </script>
 
 <style scoped>
-	.parent-tit{
+	.parent-title{
 		margin-top: 30px;
 	}
-  h4{
-  	font-size: 20px;
-  }
-  h2{
-  	margin: 0 0 40px;
-  }
-  .text-center p {
-  	color: #41b883;
-  }
+	h4{
+		font-size: 20px;
+	}
+	h2{
+		margin: 0 0 40px;
+	}
+	.text-center p {
+		color: #41b883;
+	}
 </style>

src/router/index.js

@@ -1,4 +1,3 @@
-/* 路由配置全写这里 */
 import Vue from 'vue'
 import VueRouter from 'vue-router'
 
@@ -6,30 +5,25 @@ import VueRouter from 'vue-router'
 Vue.config.debug = true
 Vue.use(VueRouter);
 
-import Index from '../pages/index.vue'
-import News from '../pages/news.vue'
-import secondcomponent from '../pages/otherPages.vue'
-import thirdcomponent from '../pages/otherPages2.vue'
+import Index from '../pages/index'
+import SecondComponent from '../pages/otherPages'
+import ThirdComponent from '../pages/otherPages2'
 
 export default new VueRouter({
-  mode: 'history',
-  base: __dirname,
-  routes: [
-    {
-      path: '/index',
-      component: Index
-    },
-    {
-      path: '/news',
-      component: News
-    },
-    {
-      path: '/second',
-      component: secondcomponent
-    },
-    {
-      path: '/third',
-      component: thirdcomponent
-    }
-  ]
+	mode: 'hash', // 还有 history 等
+	base: __dirname,
+	routes: [
+		{
+			path: '/index',
+			component: Index,
+		},
+		{
+			path: '/second',
+			component: SecondComponent,
+		},
+		{
+			path: '/third',
+			component: ThirdComponent,
+		}
+	]
 })

static/reset.css

@@ -1,70 +0,0 @@
-@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: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;
-}
-
-.text-center{
-  text-align: center;
-}
-.container{
-  padding: 0 10px;
-}
-
-[v-cloak] {
-  display: none;
-}
-
-/* common css */
-.col2{
-  width: 50%;
-}
-.col3{
-  width: 33.33%;
-}
-.col4{
-  width: 25%;
-}
-.col6{
-  width: 16.66%;
-}