Feat doen

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(其他单页)

build/webpack.base.conf.js

@@ -1,25 +1,55 @@
 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: {
+	entry: {
-    bundle: path.resolve(__dirname, '../src/index.js')
+		bundle: path.resolve(__dirname, '../src/index.js')
-  },
+	},
-  output: {
+	output: {
-    path: path.resolve(__dirname, '../dist'),
+		path: path.resolve(__dirname, '../dist'),
-    filename: '[name].[hash].js'
+		filename: '[name].[hash].js'
-  },
+	},
-  module: {
+	resolve: {
-    rules: [
+		extensions: ['*', '.js', '.json', '.vue'],
-      {
+		alias: {
-        test: /\.js$/,
+			'vue$': 'vue/dist/vue.esm.js',
-        use: 'babel-loader',
+			'@': path.resolve(__dirname, '../src'),
-        exclude: /node_modules/
+		}
-      }
+	},
-    ]
+	module: {
-  },
+		rules: [
-  plugins: [
+			{
-    new HtmlWebpackPlugin({
+				test: /\.vue$/,
-      template: path.resolve(__dirname, '../index.html')
+				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,11 +1,19 @@
-const merge = require('webpack-merge');
+const merge = require("webpack-merge");
-const path = require('path');
+const path = require("path");
-const baseConfig = require('./webpack.base.conf');
+const baseConfig = require("./webpack.base.conf");
 module.exports = merge(baseConfig, {
-  mode: 'development',
+  mode: "development",
-  devtool: 'inline-source-map',
+  devtool: "inline-source-map",
+  module: {
+    rules: [
+      {
+        test: /\.css$/,
+        use: ["vue-style-loader", "css-loader", "postcss-loader"],
+      },
+    ],
+  },
   devServer: {
-    contentBase: path.resolve(__dirname, '../dist'),
+    contentBase: path.resolve(__dirname, "../dist"),
-    open: true
+    open: true,
-  }
+  },
 });

build/webpack.prod.conf.js

@@ -1,23 +1,30 @@
-const merge = require('webpack-merge');
+const merge = require("webpack-merge");
-const {CleanWebpackPlugin} = require('clean-webpack-plugin');
+const path = require("path");
-const path = require('path');
+const baseConfig = require("./webpack.base.conf");
-const baseConfig = require('./webpack.base.conf');
+const MiniCssExtractPlugin = require('mini-css-extract-plugin')
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+
 module.exports = merge(baseConfig, {
-  mode: 'production',
+  mode: "production",
-  devtool: 'source-map',
+  devtool: "source-map",
   module: {
-    rules: []
+    rules: [
+		{
+			test: /\.css$/,
+			use: [MiniCssExtractPlugin.loader, "css-loader", "postcss-loader"],
+		},
+    ],
   },
   plugins: [
-    // new CleanWebpackPlugin(['dist/'], {
-    //   root: path.resolve(__dirname, '../'),
-    //   verbose: true,
-    //   dry: false
-    // }),
     new CleanWebpackPlugin({
-      root: path.resolve(__dirname, '../'),
+      root: path.resolve(__dirname, "../"),
       verbose: true,
-      dry: false
+      dry: false,
-    })
+	}),
-  ]
+	// 抽取 CSS 到单文件
+	new MiniCssExtractPlugin({
+		filename: "[name].css",
+		chunkFilename: "[id].css"
+	})
+  ],
 });

package.json

@@ -8,18 +8,28 @@
     "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
     "build": "node build/build.js"
   },
-  "dependencies": {},
+  "dependencies": {
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
+  },
   "devDependencies": {
-    "autoprefixer": "^6.4.0",
+    "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",
-    "webpack": "^4.16.3",
+    "mini-css-extract-plugin": "^0.9.0",
-    "webpack-cli": "^3.1.0",
+    "postcss-loader": "^3.0.0",
-    "webpack-dev-server": "^3.11.0",
+    "vue-loader": "^15.9.2",
-    "webpack-merge": "^4.2.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"
   },
   "repository": {
     "type": "git",

postcss.config.js

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

src/App.vue

@@ -1,26 +1,17 @@
 <template>
-  <div>
+    <div>
-
+        <!-- 可以删掉 顶部 -->
-    <!-- 可以删掉 顶部 -->
+        <HeaderCompontent></HeaderCompontent>
-    <HeaderCompontent></HeaderCompontent>
+        <!-- 渲染出口 -->
-
+        <router-view></router-view>
-    <!-- 渲染出口 -->
+        <!-- 可以删除 底部菜单 -->
-    <router-view></router-view>
+        <FootComponent></FootComponent>
-
+    </div>
-    <!-- 可以删除 底部菜单 -->
-    <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

src/components/footer.vue

@@ -31,11 +31,9 @@
         bottom: 0;
         z-index: 99;
         border-top: 1px solid #ccc;
-    }
+        display: grid;
-    .fixed-bottom div {
-        display: inline-block;
-        float: left;
         text-align: center;
+        grid-template-columns: 25% 25% 25% 25%;
     }
     .fixed-bottom a {
         width: 100%;

src/components/header.vue

@@ -1,18 +1,12 @@
 <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>
+    body{
+        margin: 0;
+    }
     .header{
         width: 100%;
         margin: 0 auto;

src/index.js

@@ -1,13 +1,9 @@
-// /* 项目启动 */
+// 项目启动
-// import Vue from 'vue'
+import Vue from "vue";
-// import App from './App.vue'
+import App from "./App";
-// import router from './router'
+import router from "./router";
 
-// new Vue({
+new Vue({
-//   router: router,
+    router: router, // 注册路由
-//   render: h => h(App)
+    render: (h) => h(App),
-//   // components: { firstcomponent, secondcomponent }
+}).$mount("#app"); // 渲染挂载
-// }).$mount('#app')
-
-const x = 'index.js';
-console.log(x);

src/pages/index.vue

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

src/router/index.js

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