Vue多页应用的极简配置

Vue的官方脚手架工具 vue-cli 提供了很多种已配置好的模板，但这些模板的webpack配置看起来比较麻烦，而且有些配置在项目中也许根本用不到。

本文就提供个思路，只保留最必须的代码，搭建出一个Vue多页应用的开发环境。

整体思路

整体思路如下图。

整体思路

每一个Vue组件，按照官方推荐的方式，写在单独的.vue文件中（图中绿色部分）。经过Webpack编译后，组件会全部打包到 Bundle.js 中，Bundle.js 相当于一个组件库。

每个页面都是一个HTML文件（图中蓝色部分），每个页面中都引入 Bundle.js，并创建一个Vue实例。这样就可以构成一个简单的多页应用结构，对付 4 ~ 5 个页面是没问题的。

下面详细介绍下每个部分，给一些示例代码。

组件

虽然 Vue 组件可以通过 Vue.component() 来定义，但这种方式需要把HTML代码以字符串的形式写在 template 属性中，就像这样：

Vue.component('terms-of-service', {
  template: '\
    
\
      
Terms of Service
\
      ...很多静态内容...\
    
'
})

这样写起HTML代码来很麻烦，官方推荐用单文件的方式编写组件，像这样：

组件的HTML代码、JavaScript代码、CSS代码都写在一个.vue文件中。比起 Vue.component() ，这种方式显然直观很多，容易管理。

打包入口脚本

Webpack打包需要一个入口文件。正好我们在入口文件中完成 Vue 组件的注册，不注册组件的话是没法被页面使用的：

import Navbar from './components/Navbar.vue';
import Grid from './components/Grid.vue';

const components = [
    Navbar,
    Grid
];

components.map(component => {
    Vue.component(component.name, component);
});

从这里可以看出，写好的 .vue 文件最终还是以 Vue.component() 的方式注册成 Vue 组件的。这一步参考了 Element 打包组件的方式 https://github.com/ElemeFE/element/blob/dev/src/index.js

Webpack配置

这里 webpack.config.js 已经做到最简化了，需要其他插件的可以自行添加。

module.exports = {

    entry: __dirname + "/bootstrap.js",

    output: {
        path: __dirname + '/dist',
        filename: 'bundle.js'
    },

    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            }
        ]
    },
};

entry（打包入口文件）和 output（打包输出文件）是必须的。vue-loader 负责将 .vue 文件先翻译成 可以被 Vue.component() 注册的形式，再进行打包。

页面

页面部分比较简单，这里引入了一个CSS样式、Vue框架本身和打包好的组件库。每个页面单独拥有一个 Vue 实例。

HTML部分就由 Vue 组件构成。如果发现多个页面中出现大段相同的HTML代码，那就考虑把这些代码定义成组件吧！

以上就是我想的一种 Vue 多页应用的结构，有不合理之处欢迎批评指正 。点赞也是可以的：-）