当前位置： 移动技术网 > IT编程>脚本编程>vue.js > 详解vue-cli多页面工程实践第1/2页

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

2019年06月07日  | 移动技术网IT编程  | 我要评论

医手遮天小妾太难驯,佟宝刚,孟珺瑶

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

src目录结构

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

src目录结构：

src/
 components/
 modules/   # 多页面
  index/   # index 单页面
   
   main.js # 入口文件
  page1/
   
   main.js
  group/
   page2/
    
    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>/
 */
let utils = require('./utils')
let pages = utils.getentities("./src/modules/**/");
for (let page in pages) {
 let filename = "";
 if(page!=='index'){
  filename = page+"/";
 }
 module.exports.plugins.push(new htmlwebpackplugin({
  filename: filename,
  template: pages
            12下一页阅读全文
            
您可能感兴趣的文章:vue cli 3.x 项目部署到 github pages的方法vue-cli创建项目从单页面到多页面的方法详解vue-cli + webpack 多页面实例配置优化方法vue-cli实现多页面多路由的示例代码详解如何将 vue-cli 改造成支持多页面的 history 模式详解vue-cli + webpack 多页面实例应用vue-cli创建的项目,配置多页面的实现方法基于vue cli重构多页面脚手架过程详解vue cli3基础学习之pages构建多页应用

相关文章

  • 这篇文章主要介绍了简单实现vue中的依赖收集与响应的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2019-02-02

  • 本篇文章主要介绍了详解axios中文文档，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-09-09

  • 这篇文章主要介绍了vue.js实现条件渲染的实例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-06-06
  • 详解vue 中 extend 、component 、mixins 、extends 的区别

    详解vue 中 extend 、component 、mixins 、extends 的区别

    这篇文章主要介绍了vue 中 extend 、component 、mixins 、extends 的区别,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2017-12-12
  • vue cli 3.x 自动部署项目至服务器的方法

    vue cli 3.x 自动部署项目至服务器的方法

    本教程讲解的是 vue-cli 3.x 脚手架搭建的vue项目, 利用scp2自动化部署到静态文件服务器 nginx。非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
    2019-04-04

  • 前段时间看抖音，有人用时间轮盘作为动态的桌面壁纸，一时间成为全网最火的电脑屏保，后来小米等运用市场也出现了【时间轮盘】，有点像五行八卦，感觉很好玩，于是突发奇想，自己写一个网页版小demo玩玩,需要的朋友可以参考下
    2019-04-04
  • ejsexcel模板在vue.js项目中的实际运用

    ejsexcel模板在vue.js项目中的实际运用

    这篇文章主要介绍了ejsexcel模板在vue.js项目中的实际运用,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2018-01-01

  • 这篇文章主要介绍了vue 实现左右拖拽元素并且不超过他的父元素的宽度,需要的朋友可以参考下
    2018-11-11

  • element-ui官网中关于行合并的例子是根据行号进行合并的，这显然不符合我们日常开发需求，因为通常我们table中的数据都是动态生成的，非常具有实用价值，需要的朋友可以参考下
    2018-12-12

  • 这篇文章主要介绍了vue下拉列表功能实例代码,非常不错，具有参考借鉴价值，需要的朋友可以参考下
    2018-04-04

最新评论

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网