vue.js多页面开发环境搭建过程

利用 vue-cli 搭建的项目大都是单页面应用项目，对于简单的项目，单页面就能满足要求。但对于有多个子项目的应用，如果创建多个单页面，显示有点重复，特别是 node_modules 会有多份相同的。如果全部放到单页面项目下，又显得有点乱，这时候通过改造 vue-cli 搭建的项目为多页面，就是一个比较好的解决方法。

如何改造单页面 vue.js 项目为多页面项目？下面是这次改造的具体过程。

 一、创建单页面 vue.js 项目

这里直接使用官方提供的脚手架 vue-cli3 创建，具体的过程请参考「vue-cli3.0 升级记录」

二、多页面配置

1、添加配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.config.js，内容如下：

module.exports = {
  pages: {
   index: {
    // 入口js的路径
    entry: './src/main',
 // 页面模板路径
    template: './src/public/index.html'
   }
  }
 }

上面的配置其实就是 vue-cli 建立项目的默认配置，如果增加页面，在 pages 节点下添加配置即可。但这种方式，每次增加一个新页面，就需要手动添加节点，这种重复的事情显然不智能。下面继续改造。

 2、调整项目结构

要自动化，那么就需要按定一种规则把页面组织下。如把所有路由页面都放到 src/pages 目录下，改造后的结构如下：

3、编写自动配置文件

在项目根路径下( 与 package.json 同目录 )添加 vue.util.js，内容如下：

 const path = require('path')
 const glob = require('glob')
 const START_PATH = '/src/pages/'
 const PAGE_PATH = path.resolve(__dirname, '.' + START_PATH)
 exports.pages = function () {
  var entryFiles = glob.sync(PAGE_PATH + '/**/*.html')
  var obj = {}
  entryFiles.forEach((filePath) => {
   var dirPath = filePath.substring(0, filePath.lastIndexOf('/'))
   var dirName = dirPath.substring(dirPath.lastIndexOf('/') + 1)
   var filename = filePath.substring(filePath.lastIndexOf(START_PATH) + START_PATH.length, filePath.lastIndexOf('/'))
   if (filename.endsWith(dirName)) {
    obj[filename] = {
     entry: filePath.substring(0, filePath.lastIndexOf('.html')) + '.js',
     template: filePath.substring(0, filePath.lastIndexOf('.html')) + '.html'
    }
   }
  })
  return obj
 }

在 vue.config.js 使用上面的配置

 const utils = require('./vue.util')
 module.exports = {
 pages: utils.pages()
 }

 三、测试下

yarn dev

浏览器输入：

http://localhost:8080/index.html 和 http://localhost:8080/index2.html

OK，多页面配置完成

总结

以上所述是小编给大家介绍的vue.js多页面开发环境搭建过程,希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！
如果你觉得本文对你有帮助，欢迎转载，烦请注明出处，谢谢！

赞 (0)

相关推荐

  • 手把手搭建安装基于windows的Vue.js运行环境

    手把手搭建安装基于windows的Vue.js运行环境

    Vue.js 是一套构建用户界面的渐进式框架.他自身不是一个全能框架--只聚焦于视图层.因此它非常容易学习,非常容易与其它库或已有项目整合.在与相关工具和支持库一起使用时,Vue.js 也能完美地驱动复杂的单页应用. 在配置环境之前呢,有些基础的东西还是要和大家普及一下的.如果你已经对Vue.js有所了解,那请点击 配置步骤 跳转到配置环境的阅读,否则,请耐心看完看完. 首先,介绍一下Vue.js的概念,他是干啥的呢?一定要配置vue的运行环境吗?   如上述Vue.js不是个全能的框架,因为他

  • Vue.js开发环境搭建

    Vue.js开发环境搭建

    一.简介 Vue.js 是什么 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用. Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. Vue.js是一个MVVM模式的框架,如果读者有angul

  • 详解vue.js 开发环境搭建最简单攻略

    详解vue.js 开发环境搭建最简单攻略

    做为一名学习路上的小白,起初就对 vue.js 有着莫名的好感,知道 vue.js 也能实现 angular.js 的双向绑定等一些功能后,妥妥的先把 angular.js 和 node.js 丢到后面再去学, 看了看 vue 文档,首先要搭建一个开发环境,因为自己太小白,看了一些搭建开发环境的博客,表示专业术语太多依然还是一脸懵逼. 具体流程大概如下: 很难理解?没关系,我也没理解,跟着操作就行了,我是window系统. 1.安装node.js 起初是很不理解的,我学 vue.js 还要掌握

  • 详解Vue.js入门环境搭建

    详解Vue.js入门环境搭建

    vue这个新的工具,确实能够提高效率,在经历的一段时间的摧残之后,终于能够有一个系统的认识了,下面就今天的收获做一个总结,也是vue入门的精髓: 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.np

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

    超简单的Vue.js环境搭建教程

    vue这个新的工具,确实能够提高效率,vue入门的精髓:(前提都是在网络连接上的情况下) 1.要使用vue来开发前端框架,首先要有环境,这个环境要借助于node,所以要先安装node,借助于node里面的npm来安装需要的依赖等等. 这里有一个小技巧:如果在cmd中直接使用npm来安装的一些工具的话会比较慢,所以我们使用淘宝的npm镜像: 输入npm install -g cnpm –registry=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到

  • windows下vue.js开发环境搭建教程

    windows下vue.js开发环境搭建教程

    最近,vue.js越来越火.在这样的大浪潮下,我也开始进入vue的学习行列中,在网上也搜了很多教程,按着教程来做,也总会出现这样那样的问题(坑啊,由于网上那些教程都是Vue.js 1.x版本的,现在用Vue.js 的构建工具都已经升级到2.0版本了),经过了一段时间的摸索和看官方的教程和api,才了解到2.0版本在1.0版本的基础上做了好多调整,废弃了好多api.废话不多说了,把我踩过的坑,在这里跟大家说说,希望对初学者有所帮助.ps:高手请绕道. 既然是入门实例,那肯定从最基础的开始了,希望初

  • Vue.js开发环境快速搭建教程

    Vue.js开发环境快速搭建教程

    Vue.js 现在在后端.前端.微信.移动端Web非常流行,今天简单模拟Vue.js快速安装: 1.安装npm npm 是node.js 的包管理工具, 安装流程地址:https://docs.npmjs.com/cli/install 估计会非常慢,我们可以使用淘宝NPM镜像下载安装:https://npm.taobao.org/ ##安装npm## sudo npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装

  • vue.js多页面开发环境搭建过程

    利用 vue-cli 搭建的项目大都是单页面应用项目,对于简单的项目,单页面就能满足要求.但对于有多个子项目的应用,如果创建多个单页面,显示有点重复,特别是 node_modules 会有多份相同的.如果全部放到单页面项目下,又显得有点乱,这时候通过改造 vue-cli 搭建的项目为多页面,就是一个比较好的解决方法. 如何改造单页面 vue.js 项目为多页面项目?下面是这次改造的具体过程.  一.创建单页面 vue.js 项目 这里直接使用官方提供的脚手架 vue-cli3 创建,具体的过程请

  • 阿里云go开发环境搭建过程

    开通了一个阿里云来玩,记录一下环境搭建的过程 运行环境 ECS Ubuntu 16.04 64位 过程 #切换到安装文件夹 cd /usr/local #下载go #由于墙的原因,直接下载官方的可能会失败,这里用国内一个论坛的 wget https://dl.gocn.io/golang/1.8.4/go1.8.4.linux-amd64.tar.gz #解压 tar -zxvf go1.8.4.linux-amd64.tar.gz #创建工作目录 mkdir -p GOPATH goProje

  • spring cloud 阿波罗 apollo 本地开发环境搭建过程

    开源配置中心 - Apollo Apollo(阿波罗)是携程框架部门研发的配置管理平台,能够集中化管理应用不同环境.不同集群的配置,配置修改后能够实时推送到应用端,并且具备规范的权限.流程治理等特性.服务端基于Spring Boot和Spring Cloud开发,打包后可以直接运行,不需要额外安装Tomcat等应用容器. 检出代码 apollo github 可以fork下然后本地使用idea打开 数据库脚本 执行以下脚本创建ApolloConifgDB.ApolloPortalDB apoll

  • Python3 虚拟开发环境搭建过程(图文详解)

    虚拟环境的搭建 为什么要使用虚拟环境# 1.使不同应用开发环境相互独立 2.环境升级不影响其他应用,也不会影响全局的python环境 3.防止出现包管理混乱及包版本冲突 windows平台# 安装 # 建议使用pip3安装到python3环境下 pip3 install virtualenv pip3 install virtualenvwrapper-win 配置虚拟环境管理器工作目录 # 配置环境变量: # 控制面板 => 系统和安全 => 系统 => 高级系统设置 => 环境

  • Android开发环境搭建过程图文详解

    一.工具 IDE:Android Studio4.1+genymotion (Android studio 自带AVD着实有些不好用,这里选择使用genymotion模拟器) JDK:1.8 SDK:7.1 版本管理:Git 二.环境搭建 1.安装jdk 这里使用的是jdk1.8 ,安装并配置环境变量,通用步骤,不一 一介绍了 2.安装Android Studio 安装:android-studio-ide-201.6858069-windows.exe ,默认安装即可配置sdk (可以选择设置

  • GO语言开发环境搭建过程图文详解

    GO语言开发环境搭建过程图文详解

    一.GO语言开发包 1.什么是GO语言开发包 go 语言开发包其实是对go语言的一种实现,包括相应版本的语法, 编译, 运行, 垃圾回收等, 里面包含着开发 go 语言所需的标准库, 运行时以及其他的一些必要资源 2.GO语言开发包下载地址 Go官方下载地址 : https://golang.org/dl/ Go官方镜像站(上面打不开可使用这个) : https://golang.google.cn/dl/ Go语言中文网下载地址 : https://studygolang.com/dl gop

  • 基于visual studio code + react 开发环境搭建过程

    基于visual studio code + react 开发环境搭建过程

    开发环境 windows 开发工具 visual studio code node 安装和 npm windows 安装node 可以直接在 node官网直接下载直接当作普通软件安装即可. 安装完成可以在控制台中运行node测试是否安装成功 win + r 输入 cmd ,直接在终端输入node -v 输出版本号及已经成功安装. 目前新版本的node自带npm(npm 是随同 node 一起安装的包管理工具).这里安装好了 node并且测试安装成功之后,可以继续在控制台输入 npm -v 检查是

  • monkeyrunner之安卓开发环境搭建教程（1）

    monkeyrunner之安卓开发环境搭建教程（1）

    在学习monkeyrunner之前,让我们先搭建好eclipse安卓开发环境. 对于程序开发人员而言,eclipse并不陌生,它提供了一个非常广阔的平台来开发程序.同样也可以用它来开发android程序.但是在eclipse中并不能直接开发android程序,需要我们安装一个ADT插件. 在ADT安装前,还有几个前提条件: 1.jdk已安装,并配置好环境变量.关于jdk的环境变量配置这里不做赘述. 2.eclipse已下载并解压.eclipse官网http://www.eclipse.org/d

  • vue.js开发环境搭建教程

    vue.js开发环境搭建教程

    vue.js开发环境搭建教程分享,具体内容如下 1.安装node.js,忽略 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd里直接输入:npm install -g cnpm –-registry=https://registry.npm.taobao.org,回车,等待安装... 3.安装全局vue,用于帮助搭建所需的模板框架 在cmd里, 1).输入:cnpm install -g vue-cli,回车,等待安装... 2).输入:vue -V,回车,若出现vue信息说明表

随机推荐