vue cli3同一个项目下的多页应用创建

0x00、页面效果:

表面看类似路由切换,实际上是两个vue的实例,挂载在不同的根节点上。

0x01、总体目录结构:

项目分为三个模块,也就是三个多页应用,police、relatives、self。

0x02、以self为例,剖析self内部结构:

  1.self模块的入口index.js,相当于单页应用的main.js:

  

import Vue from ‘vue‘
import App from ‘./index.vue‘
import router from ‘./router‘
// import store from ‘./store‘

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount(‘#self‘)

这就是self模块的vue实例,该实例挂载在#self下。

  2.self模块的index.vue:

<template>
  <div id="self">
    take care by self
    <router-view/>
  </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

self模块的页面挂载在#self下。

3.router.js:

import Vue from ‘vue‘
import Router from ‘vue-router‘

Vue.use(Router)

export default new Router({
    routes: [
        {
            path: ‘/‘,
            name: ‘login‘,
            component: () => import(‘./login‘)
        }
    ]
})

self模块对应的路由,不详细解释。

0x03、多页页面的配置:

const webpack = require(‘webpack‘)
module.exports = {
    pages: {
        takecarebypolice: {
            // 应用入口配置,相当于单页面应用的main.js,必需项
            entry: ‘src/modules/TakecareByPolice/index.js‘,
            // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
            template: ‘public/takecarebypolice.html‘,
        },
        takecarebyrelatives: {
            // 应用入口配置,相当于单页面应用的main.js,必需项
            entry: ‘src/modules/TakecareByRelatives/index.js‘,
            // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
            template: ‘public/takecarebyrelatives.html‘,
        },
        takecarebyself: {
            // 应用入口配置,相当于单页面应用的main.js,必需项
            entry: ‘src/modules/TakecareBySelf/index.js‘,
            // 应用的模版,相当于单页面应用的public/index.html,可选项,省略时默认与模块名一致
            template: ‘public/takecarebyself.html‘,
        },
    }
}

entry:指定了模块的入口

配置完成后,即可运行。

0x04、打包后的效果:

ps:手动把原有的index.html这些删除了。

原文地址:https://www.cnblogs.com/lewis-messi/p/11452901.html

时间: 2024-10-11 06:52:20

vue cli3同一个项目下的多页应用创建的相关文章

对同一个项目下的多个数据库Context进行迁移Migrations

PM> Enable-Migrations -MigrationsDirectory "Migrations\ContextA" -ContextTypeName MyProject.Models.ContextA PM> Enable-Migrations -MigrationsDirectory "Migrations\ContextB" -ContextTypeName MyProject.Models.ContextB

Vue CLI3 关闭热替换后出现的warning

用vue cli3做项目的时候如果开启了typescript的严格模式,在dev server热替换的时候往往就会打出一大堆warning,严重的影响了编译效率.官方并没有提供关闭warning的api,但是提供了修改webpack配置项的接口.通过这个接口我们就可以实现关闭warning. 根据文档webpack 相关 | Vue CLI 3 导出项目的配置为output.js,搜索check单词可发现一个插件:fork-ts-checker(github:Realytics/fork-ts-

IntelliJ IDEA导入多个eclipse项目到同一个workspace下

IntelliJ IDEA 与eclipse在新建项目上工作区的叫法略有不同,区别见下图. 我们在eclipse都是在新建的workspace目录下新建我们的项目,但是在IDEA中没有workspace这个概念,IDEA中的项目就相当于eclipe中的workspace,那么问题来了,我一般在eclipse下的一个工作空间中建立多个相关的小项目(并非一个大项目的多个模块),比如说我写了好多接口项目,他们不属于同一个项目但是他们都是接口类的项目,所以我就将他们放到workspace_webserv

iOS 同一个workspace下创建多个项目编程

在iOS开发中,相关联的多个项目可能会放在同一个workspace下进行开发,那习惯了一个项目在一个工作空间下的同学该怎么快速开撸呢? 只需要三步而已! 第一步,先用Xcode在目标目录下创建一个workspace文件.见图说话. 第二步,用Xcode打开workspace文件,然后在该workspace下创建多个Project文件. 在创建工程的过程中有个主意点:将新建Project添加的目标和组 都是workspace.如图: 第三步,多个工程间文件互相引用问题:多个工程间的文件引用方法:在

VUE CLI3.X 创建项目

Node.js环境搭建 Node.js基于V8引擎,可以让js代码脱离浏览器运行 Vue CLI3.0 需要Node.js 8.9或者更高版本. 用nvm或者nvm-windows在同一台电脑中管理多个Node版本 nvm github地址:https://github.com/nvm-sh/nvm Vue CLI 3.0环境搭建 卸载老版本vue-cli:npm uninstall vue-cli -g 安装新版本:npm install -g @vue/cli 原型开发:npm instal

vue history模式下出现空白页情况

问题描述:   vue搭建的项目,路由一直用的hash模式,所以url中都会带有一个“#”号.现在想要去掉“#”,于是使用history模式 { mode: 'history' },代码如下: import Vue from 'vue'; import App from './App'; import routers from './router'; import VueRouter from 'vue-router'; Vue.use(VueRouter); const router = ne

vue cli3 和 vue cli4

最近安装了vue cli4, 和vue cli3做下对比.我自己手动选择的配置, 安装了Router,Vuex 我安装的版本是@vue/cli 4.2.3 一.项目结构 左边为vue cli3, 右边为vue cli4 默认目录结构已更改 src/store.js 改为 src/store/index.js src/router.js 改为 src/router/index.js 二.babel.config.js文件 主要是 babel 的预设由@vue/app 改成了@vue/cli-plu

Swift &amp; Objc 在同一个项目中的使用

在WWDC大会中发布了Swift让人眼前一亮.终于加了很多的现代编程语言该有的东西.很早年以前玩C#3.0+的时候这些差不多类似的 已经用的烂熟的东西终于一点一点的在看Swift Programming Language的时候再唤醒. Swift较之于OC(Objective-C)在愈发上几乎是一门新的语言了,幸运的是Swift和OC都是出自苹果大家庭,还能在一张桌子上吃饭.也就是说在升级项目 的时候你可以考虑使用Swift开发新的功能,调用已有的部分或者被已有的部分调用.或者在Swift开发的

模板、URL、同一个项目其他文件配置

文件目录: 1.同一个项目其他文件配置: 在文件:settings.py中的这里面添加 INSTALLED_APPS = ( 'django.contrib.admin', 'django.contrib.auth', 'django.contrib.contenttypes', 'django.contrib.sessions', 'django.contrib.messages', 'django.contrib.staticfiles', 'myTest', #这是新添加的文件) 2.模板