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 多页应用的结构，有不合理之处欢迎批评指正 。点赞也是可以的：-）
网友评论