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: '\
    <div v-once>\
      <h1>Terms of Service</h1>\
      ...很多静态内容...\
    </div>'
})

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

<template>
  <p>{{ greeting }} World!</p>
</template>

<script>
module.exports = {
  data: function() {
    return {
      greeting: 'Hello'
    }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

组件的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代码，那就考虑把这些代码定义成组件吧！

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link href="https://cdn.bootcss.com/bulma/0.6.2/css/bulma.min.css" rel="stylesheet">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <Navbar></Navbar>
    <div class="container">
      <div class="section">
        <Grid></Grid>
      </div>
    </div>
  </div>
  <script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
  <script src="./dist/bundle.js"></script>
  <script>
  new Vue({
    el: '#app',
    data: function () {
      return {};
    }
  });
  </script>
</body>
</html>

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

最后编辑于：2018.01.17 09:24:14