[聚合文章] webpack2.x+vue2.x+vue-router+vuex搭建简单的单页面应用（一）

  1. 首页
  2. 聚合文章
  3. 文章详情
vue.js 2017-12-05 10 阅读
原文链接: https://segmentfault.com/a/1190000012294706

前言

这篇文章主要想跟大家介绍下单页面应用是怎么搭建的，本文采用webpack脚手架纯手工配置vue+vue-router+vuex搭建简单的单页面应用。

1.什么叫单页面（SPA）？

单页面是指只有一个主页面的应用，浏览器一开始要加载所有必须的 html, js, css。所有的页面内容都包含在这个所谓的主页面中。但在写的时候，还是会分开写（页面片段），然后在交互的时候由路由程序动态载入，根据路由改变页面片段实现页面的变更。

2.和多页面（MPA）的区别？

多页面应用每个页面是单独的html，通过浏览器地址变化从a页面跳转到b页面，b页面所有页面资源和公共资源都需要重新加载。而单页面是只有一个主html，通过路由改变变化主页面当中不同的页面片段，但是不刷新页面，公共资源不需要重新加载，只需改变加载需要改变的页面片段。相比于多页面页面切换更加高效，性能更好，缺点首页首次加载数据增多，seo优化不好处理（痛点）。

3.如何搭建一个简单的单页面？

我们这边还是拿vue来做例子，按照以往先贴出项目根目录。

.
├── dist
├── node_modules
├── package.json
├── src
├── webpack.base.config.js
├── webpack.build.config.js
└── webpack.dev.config.js

dist目录

.
├── js
│   ├── index.js
│   └── vendors.js
└── pages
    └── index.html

src目录

.
├── components
│   ├── about.vue
│   └── home.vue
├── index.html
├── index.js
├── index.vue
└── router.js
  1. dist: 是生成环境输出的文件夹，dist／js／index.js是项目业务逻辑js打包文件，dist／js／vendors.js是项目公共模块js打包文件。
  2. src: 源文件的文件夹，components是公共组件，这里放了两个页面片段，src/index.html主页面，src/router.js单页面路由管理文件

4.开始搭建单页面

首先在src根目录下创建index.html、index.js、index.vue三个文件
index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

index.js

import Vue from 'vue';
import VueRouter from './router.js';
import App from './index.vue';

new Vue({
    el: '#app',
    router:VueRouter,//因为这边用到路由，所以需要把router.js挂载到vue实例上，才能生效
    render: h => h(App),
});

index.vue

<template>
<div id="app">
    <!--router-link表示跳转到about、home两不同页面的不同路由-->
    <router-link to="/pages/">home</router-link>
    <router-link to="/pages/about">about</router-link>
    <!--router-view表示当前路由对应的页面片段展示区域-->
    <router-view></router-view>
</div>        
</template>
<script>
    export default{
        name:'app'
    }
</script>

那么如何让主页面能根据路由跳转到不同页面片段呢？这时候router.js登场了，他是单页面开发最重要的一部分。
router.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import Home from './components/home.vue';
import About from './components/about.vue';

Vue.use(VueRouter);//因为路由配置用到了vue-router，所以需要载入到vue当中。
//VueRouter是一个路由管理模块，里面配置了about和home两个页面片段路由
export default new VueRouter({
    mode:'history',
    //path:路由路径
    //name:路由名称
    //component:当前路由对应的页面片段（组件）
    routes:[{
        path:'/pages/',
        name:'home',
        component:Home
    },
    {
        path:'/pages/about',
        name:'about',
        component:About
    }]
});

src/components/about.vue

<template>
    <div>
        I'm about page!
    </div>
</template>
<script>
    export default {
        name:'about'
    }
</script>

src/components/home.vue

<template>
    <div>
        I'm home page!
    </div>
</template>
<script>
    export default {
        name:'home'
    }
</script>

搭建到这里，其实一个简单的单页面应用已经完成。


通过点击home和about按钮，在不刷新页面的情况下就完成了页面的切换，而且url地址还能随着改变。
最后把webpack.base.config.js和webpack.dev.config.js的配置贴一下吧，因为没有用到css所以-loader相关的都没配置，想了解的同学可以去我之前多页面配置文章里查看 链接
webpack.base.config.js

//webpack.base.config.js
const webpack = require('webpack');
const path = require('path');

const PATHS = {
  src: path.resolve(__dirname, './src'),
  dist: path.resolve(__dirname, './dist')
}
//配置开始
let baseConfig = {
  //入口
  entry: {
    vendors:['vue','vue-router'],
    index:'./src/index.js'
  },
  output: {
    path: PATHS.dist,//打包后的文件存放的地方
    filename: 'js/[name].js',          // 部署文件 相对于根路由
    chunkFilename: 'js/[name].js'   // chunk文件输出的文件名称 具体格式见webpack文档, 注意区分 hash/chunkhash/contenthash 等内容, 以及存在的潜在的坑
  },
  module:{
      rules:[
        {
            test:/\.vue$/,
            loader:'vue-loader'
        },
        {
          test: /\.js$/,
          exclude: /node_modules/,
          use: {
              loader: 'babel-loader',
              options: {
                  presets: ['env']
              }
          }
      }
    ]
  }
};



//exports
module.exports = baseConfig;

webpack.dev.config.js

const webpack = require('webpack'),
    path = require('path'),
    merge = require('webpack-merge'),
    HtmlWebpackPlugin = require('html-webpack-plugin'),
    webpackBaseConfig = require('./webpack.base.config.js'),
    OpenBrowserPlugin = require('open-browser-webpack-plugin'),
    FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin');

const PATHS = {
  src: path.resolve(__dirname, './src'),
  dist: path.resolve(__dirname, './dist')
};

const PORTS = {
    BROWSER_SYNC: 8195, // BrowserSync 调试服务器
    MOCK_SERVER: 8189, // RESTful API Mock 服务器
};



//配置
var webpackDevConfig = merge(webpackBaseConfig, {
    devtool: '#source-map',
    output: {
        publicPath: 'http://localhost:' + PORTS.BROWSER_SYNC + '/pages/',
    },
    plugins: [
        new HtmlWebpackPlugin({                                   // html模板输出插件
          title: 'vue-router-demo',
          template: `${PATHS.src}/index.html`,
          inject: true
          // filename: `${PATHS.dist}/index.html`
        }),
        new FriendlyErrorsPlugin(),
        new OpenBrowserPlugin({ url: 'http://localhost:'+PORTS.BROWSER_SYNC+'/pages/' })
    ],
    devServer: {
        port: PORTS.BROWSER_SYNC,
        noInfo: true,
        //proxy: CONFIG.proxy,
        hot: true,
        inline: true,
        compress: false
    }
});

module.exports = webpackDevConfig;

最近比较忙，琐事一堆，这篇文章比较基础，暂时先写到这里，后续还会有vuex加进来，看看在单页面里面是怎么运作的。

注：本文内容来自互联网，旨在为开发者提供分享、交流的平台。如有涉及文章版权等事宜，请你联系站长进行处理。