您的位置：首页 > 产品设计 > UI/UE

Vue多页应用的极简配置

2018-01-17 09:25 253 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： vue vue-js 前端前端框架

相关文章推荐

新的分享

章节导航