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

本文介绍了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


当前1/2页 12下一页阅读全文


您可能感兴趣的文章:


    

  • Vue-cli创建项目从单页面到多页面的方法
    • 

  • 详解基于webpack2.x的vue2.x的多页面站点
    • 

  • 详解vue-cli + webpack 多页面实例配置优化方法
    • 

  • 详解vue-cli + webpack 多页面实例应用
    • 

  • 用vue构建多页面应用的示例代码
    • 



Tags：vue cli 多页面


相关文章


    

  • 2017-02-02Vue.js中用webpack合并打包多个组件并实现按需加载
    • 

  • 2017-07-07通过命令行创建vue项目的方法
    • 

  • 2017-04-04Vuex简单入门
    • 

  • 2017-03-03超简单的Vue.js环境搭建教程
    • 

  • 2017-05-05Vuex和前端缓存的整合策略详解
    • 

  • 2017-09-09详解VueRouter进阶之导航钩子和路由元信息
    • 

  • 2017-10-10Vue组件之全局组件与局部组件的使用详解
    • 

  • 2017-03-03详解Vue2 无限级分类(添加,删除,修改)
    • 

  • 2017-07-07详解win7 cmd执行vue不是内部命令的解决方法
    • 

  • 2017-07-07关于vue-resource报错450的解决方案
    • 



最新评论
赞 (0)

相关推荐

  • 详解vue-cli + webpack 多页面实例应用

    关于vue.js vue.js是一套构建用户界面的 轻型的渐进式前端框架.它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件.使用vue可以给你的开发带来极致的编程体验. 关于vue-cli Vue-cli是vue官方提供的一个命令行工具(vue-cli),可用于快速搭建大型单页应用.该工具提供开箱即用的构建工具配置,带来现代化的前端开发流程.只需一分钟即可启动带热重载.保存时静态检查以及可用于生产环境的构建配置的项目. 疑问 vue-cli主要是用于构建单页应用的脚手架,但

  • 详解vue-cli + webpack 多页面实例配置优化方法

    本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家 vue+webpack是否有多页面 目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈. 在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的. 那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,

  • 详解基于webpack2.x的vue2.x的多页面站点

    详解基于webpack2.x的vue2.x的多页面站点

    本文介绍了基于webpack2.x的vue2.x的多页面站点,分享给大家,具体如下: vue的多页面 依旧使用vue-cli来初始化我们的项目 然后修改主要目录结构如下: ├── build │ ├── build.js │ ├── check-versions.js │ ├── dev-client.js │ ├── dev-server.js │ ├── utils.js │ ├── vue-loader.conf.js │ ├── webpack.base.conf.js │ ├── we

  • 用vue构建多页面应用的示例代码

    用vue构建多页面应用的示例代码

    最近一直在研究使用vue做出来一些东西,但都是SPA的单页面应用,但实际工作中,单页面并不一定符合业务需求,所以这篇我就来说说怎么开发多页面的Vue应用,以及在这个过程会遇到的问题. 这是我放在GitHub上的项目,里面有整个配置文件,可以参看一下:multiple-vue-page 准备工作 在本地用vue-cli新建一个项目,这个步骤vue的官网上有,我就不再说了. 这里有一个地方需要改一下,在执行npm install命令之前,在package.json里添加一个依赖,后面会用到. 修改w

  • Vue-cli创建项目从单页面到多页面的方法

    Vue-cli创建项目从单页面到多页面的方法

    对于某些项目来说,单页面不能很好的满足需求,所以需要将vue-cli创建的单页面项目改为多页面项目. 需要修改以下几个文件: 1.下载依赖glob $npm install glob --save-dev 2.修改build下的文件 (1)修改webpack.base.conf.js 添加以下代码: var glob = require('glob'): var entries = getEntry('./src/pages/**/*.js') 将module.exports中的 entry:

  • 详解Vue Cli浏览器兼容性实践

    浏览器市场占有率 在处理浏览器兼容性问题之前,我们先来看一下现在的浏览器市场份额是怎样的,

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

    本文介绍了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

  • 详解Vue.js在页面加载时执行某个方法

    jQuery中可以这样写 vue中,如果要达到相同效果,可以使用vue的生命周期函数,如create或者mounted 附上vue.js的生命周期函数执行流程 总结 以上所述是小编给大家介绍的Vue.js在页面加载时执行某个方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的.在此也非常感谢大家对我们网站的支持!

  • 详解Vue CLI 3.0脚手架如何mock数据

    前后端分离的开发模式已经是目前前端的主流模式,至于为什么会前后端分离的开发我们就不做过多的阐述,既然是前后端分离的模式开发肯定是离不开前端的数据模拟阶段. 我们在开发的过程中,由于后台接口的没有完成或者没有稳定之前我们都是采用模拟数据的方式去进行开发项目,这样会使我们的前后端会同时的进行,提高我们的开发效率. 因为最近自己在自学 Vue 也在自己撸一个项目,肯定会遇到使用数据的情况,所以就想着如何在前端做一些 mock 数据的处理,因为自己的项目使用的是 vue/cli 3.0 与 vue/cl

  • 详解@Vue/Cli 3 Invalid Host header 错误解决办法

    我的host设置 报错如下: 解决办法: @Vue/Cli 3 在vue.config.js里加上 .disableHostCheck(true) vue-cli 在webpack.dev.conf.js里加上 devServer: { disableHostCheck: true } 最后 以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们.

  • 详解vue.js组件化开发实践

    详解vue.js组件化开发实践

    前言 公司目前制作一个H5活动,特别是有一定统一结构的活动,都要码一个重复的轮子.后来接到一个基于模板的活动设计系统的需求,便有了下面的内容.借油开车. 组件化 需求一到,接就是怎么实现,技术选型自然成为了第一个问题.鉴于目前web前端mvvm框架以及组件化开发方式的流行,决定技术栈采用:vue + es6 + 组件化. 这里首先简单说下web前端组件化开发方式的历程: 最早的组件化结构,代码结构可能如下: - lib/components/calendar |- calendar.css |-

  • 详解Vue 全局引入bass.scss 处理方案

    为解决在Vue组件中全局引入 scss 变量及 mixins ,装载了一个名为 "sass-resources-loader" 解析器. 安装 $ > cnpm i -D sass-resources-loader 配置 配置的话是在 vue 的 loader 解析器中配置,即在 vue-cli 脚手架方式构建出来的文件中是以 build/utils.js,在该文件中定义了 cssLoaders() 方法,该方法定义了诸如 css.less的解析方式,具体如下. // build

  • 详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结

    如果你发现你自己需要在 Vue 中做一次强制更新,99.9% 的情况,是你在某个地方做错了事. 1. Vue 无法检测实例被创建时不存在于 data 中的 property 原因:由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化,所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的. 场景: var vm = new Vue({ data:{}, // 页面不会变化 template: '<div>{{message}

  • 详解vue高级特性

    Vue为我们提供了很多高级特性,学习和掌握它们有助于提高你的代码水平. 一.watch进阶 从我们刚开始学习Vue的时候,对于侦听属性,都是简单地如下面一般使用: watch:{ a(){ //doSomething } } 实际上,Vue对watch提供了很多进阶用法. handler函数 以对象和handler函数的方式来定义一个监听属性,handler就是处理监听变动时的函数: watch:{ a:{ handler:'doSomething' } }, methods:{ doSomet

  • 详解vue 模版组件的三种用法

    本文介绍了详解vue 模版组件的三种用法,分享给大家,具体如下: 第一种 //首先,别忘了引入vue.js <div id="user_name_01"></div> <script src="../node_modules/vue/dist/vue.js"></script> <script> var User_01 = Vue.extend({// 创建可复用的构造器 template: '<p&

随机推荐