cooking搭建多页Vue开发环境（进阶）

最新推荐文章于 2024-07-13 10:42:11 发布

peacekang

最新推荐文章于 2024-07-13 10:42:11 发布

阅读量524

点赞数

分类专栏： vue学习

本文链接：https://blog.csdn.net/peacekang/article/details/86657642

版权

本文详细介绍了如何使用cooking构建多页Vue应用，包括设计配置文件、配置cooking、设置路由、集成vuex以及配置axios。通过实例展示了从创建app.json、配置入口文件、设置路由、安装并配置vuex到使用axios请求数据的全过程。

摘要由CSDN通过智能技术生成

通过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。