您的位置：首页 > Web前端 > Vue.js

详解vue-cli多页面工程实践第1/2页

2017-08-30 09:42 671 查看

本文介绍了vue-cli多页面工程实践，分享给大家，具体如下：

src目录结构

因为是自定义的设置，src下的目录结构需要固定，约定大于配置嘛。

src目录结构：

src/
components/
modules/   # 多页面
index/   # index 单页面
index.html
main.js # 入口文件
page1/
index.html
main.js
group/
page2/
index.html
main.js

build中的配置

utils.js 增加:

// match files
let glob = require('glob');
/**
* globPath 获取泛路径下的特定文件
*/
exports.getEntities = function (path) {
let entities = {};
glob.sync(path).forEach(function (entity) {
let moduleName = entity.split('/').slice(-2,-1);
entities[moduleName] = entity
});
// eg: { main: './src/module/index/main.js', test: './src/module/group/test/main.js' }
return entities;
};

webpack.base.conf.js 修改输入和输出:

module.exports = {
// 遍历获取入口文件
entry: utils.getEntities("./src/modules/**/main.js"),
...
plugins:[]
};
/***
* 生成 <module>/index.html
*/
let utils = require('./utils')
let pages = utils.getEntities("./src/modules/**/index.html");
for (let page in pages) {
let filename = "index.html";
if(page!=='index'){
filename = page+"/index.html";
}
module.exports.plugins.push(new HtmlWebpackPlugin({
filename: filename,
template: pages

12下一页阅读全文



您可能感兴趣的文章:

相关文章

  • vue-resourse将json数据输出实例

    这篇文章主要为大家详细介绍了vue-resourse将json数据输出实例，具有一定的参考价值，感兴趣的小伙伴们可以参考一下 2017-03-03

  • vue.js实现仿原生ios时间选择组件实例代码

    本篇文章主要介绍了vue.js实现仿原生ios时间选择组件实例代码，具有一定的参考价值，有兴趣的可以了解一下。 2016-12-12

  • 深入理解Vue transition源码分析

    本篇文章主要介绍了深入理解Vue transition源码分析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2017-07-07

  • 浅谈vue.js中v-for循环渲染

    本篇文章主要介绍了浅谈vue.js中v-for循环渲染，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 2017-07-07

  • Vue 2.0的数据依赖实现原理代码简析

    本篇文章主要介绍了Vue 2.0的数据依赖实现原理代码简析，主要从初始化的数据层面上分析了Vue是如何管理依赖来到达数据的动态响应，有兴趣的可以了解一下 2017-07-07

  • Vue组件中slot的用法

    这篇文章交详细的给大家介绍了vue组件中slot的用法，主要是让组件的可扩展性更强，具体内容详情大家参考下本文 2018-01-01

  • Vue子组件向父组件通信与父组件调用子组件中的方法

    这篇文章主要介绍了Vue子组件向父组件通信与父组件调用子组件中的方法,非常不错，具有一定的参考借鉴价值，需要的朋友可以参考下 2018-06-06

  • Vue.js对象转换实例

    这篇文章主要介绍了 Vue.js对象转换的相关资料，非常不错，具有参考借鉴价值,需要的朋友可以参考下 2017-06-06

  • 详解vue-cli开发环境跨域问题解决方案

    本篇文章主要介绍了vue-cli开发环境跨域问题解决方案，具有一定的参考价值，感兴趣的小伙伴们可以参考一下。 2017-06-06

  • vue.js删除列表中的一行

    这篇文章给大家分享了vue.js删除列表中的一行的实例操作以及代码分享，有兴趣的朋友参考下。 2018-06-06

最新评论

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  vue cli 多页面
相关文章推荐
新的分享
章节导航