通过cooking搭建简易Vue开发环境(入门)的学习,我们对cooking搭建vue项目有了一定的了解,今天就一起来学习一下使用cooking搭建多页Vue应用的例子。
1. 设计配置文件
- 在根目录创建app.json文件,配置如下:
{
"pages":[
{
"entry":"index",
"title":"首页",
"cdn":{}
},{
"entry":"school",
"title":"学校",
"cdn":{}
}
],
"basePath":"./src/pages/",
"cdn": {
"js": [],
"css": []
},
"extetnals":{
"vue":"Vue",
"vuex":"Vuex"
}
}
- 在src/pages目录下创建index和school目录,每个目录下分别创建index.js和app.vue文件。
index.js
import Vue from 'vue'
import App from './app'
new Vue({
el: '#app',
render: h => h(App)
})
app.vue
<template>
<div>
<h1>{
{pageName}}页面</h1>
<p>A vue project.</p>
</div>
</template>
<script>
export default {
name:'index',
data() {
return {
pageName: '主页'
}
}
}
</script>
2.配置cooking文件
- 入口文件
打开cooking.conf.js文件,我们要从app.json里读取entry的信息,因为需要做以下处理:
var App = require('./app.json')
var path = require('path')
var entries = function() {
var result = {}
App.pages.forEach(p => {
result[p.entry] = path.resolve(App.basePath, p.entry)
})
return result
}
cooking.set({
entry: entries()
})
- 模板文件
所有的入口页面都是通过index.tpl模板配置,只需要将公用 CDN 和私有 CDN 合并后拼接成 HTML 插入到模板内,同时引入入口文件和 vendor,通过 html-webpack-plugin 的配置选项。
var App = require('./app.json')
var path = require('path')
var merge = function(a, b) {
return {
css: (a.css || []).concat(b.css || []),
js: (a.js || []).concat(b.js || [])
}
}
var templates = function() {
return App.pages.map(p => {
return {
title: p.title,
filename: p.entry + '.html',
template: path.resolve(__dirname, 'index.tpl'),
cdn: merge(App.cdn, p.cdn),
chunks: ['vendor', 'manifest', p.entry]
}
})
}
cooking.set({
template: templates()
})
同时需要将index.html改成index.tpl。