vue多单页面多tab_vue-cli3创建多页面项目

开发了很多个单页面的项目，也开发了很多原生的项目，就是一直没机会开发多页面和单页面混合的项目，于是自己去查了一些资料，用的是vue-cli3脚手架搭建了一个多页面和单页面混合的小demo。

首先，vue-cli3是脚手架的版本是3.x，这并不是说vue已经有了3.0。Vue-cli3默认就给了多页面的配置，不需要我们多做什么：

想了解vue-cli3的更详细的可以去官网查看：

https://cli.vuejs.org/zh/config/#assetsdir

这样一看，其实创建多页面项目很简单，因为已经内置了这些配置，你只要每次搭建一个页面就这边配置一条。这是一种最简单的方法。

了解到有glob这个api，于是我这边是固定了一个多页面的目录：

相当于每一个多页就是一个完整的单页，跟一个单页项目一模一样。

于是这边使用一个npm的包glob，不知道是不是帮你下载了还是node内置的对象，我是没有安装直接使用。关于glob的匹配规则和方法可以自行百度，于是创建一个vue.confg.js，里面做一些修改：

const glob = require('glob');

function creatEntry() {

let entryObj = {};

glob.sync('./src/**/index.html').forEach(val => {

let url = val.split('/')[2];entryObj[url] = {entry: `src/${url}/main.js`,template: `src/${url}/index.html`,filename: `${url}.html`,}

});

return entryObj;

}

module.exports = {

pages: creatEntry()

}

这边为了好截取地址，规则是匹配到具体的html。顺便分享一下，当我们想要看一些node的内容，可以直接node vue.config.js查看。

运行起来之后就可以发现，当跳转另外的页面的时候是直接刷新的，但是也有一个问题，如果为了地址好看，而不是xxx.html#/user这样，就要路由模式变成history。打包可以发现结构是这样的：

因为我没有写css和图片，所以没有其他的文件夹。

我把demo上传到了git，有空感兴趣的可以下载下来跑起来看一下，当然，只是一个空项目，什么初始化css还是一些工具函数什么都没有。

项目上传git了，地址：

https://github.com/wade3po/multi-page-spa

vue多单页面多tab_vue-cli3创建多页面项目相关推荐

新建maven写页面_使用 IDEA 创建 Maven Web 项目（三）- 编写一个简单的 WEB 应用
编写 Servlet 类首先,需要在 java 目录下,创建一个名为 org.smart4j.chapter1 的包.然后,在该包下创建一个 HelloServlet 的类,代码如下: packa ...
【Flutter】Hero 动画 ( Hero 动画使用流程 | 创建 Hero 动画核心组件 | 创建源页面 | 创建目的页面 | 页面跳转 )
文章目录 ◯.Hero 动画简介一.创建 Hero 动画核心组件二.创建源页面三.创建目的页面四.页面跳转五.完整代码示例六.相关资源 ◯.Hero 动画简介 Hero Widget 动画 ...
vue搭建项目、创建登录页面和后台交互之引入axios
目录 1. 搭建项目 1.1 使用vue-cli创建项目 1.2 通过npm安装element-ui 1.3 导入组件 2 创建登录页面 2.1 创建登录组件 2.2 引入css(css.txt) 2 ...
vue教程2 【Vue组件化编程】组件的创建和使用非单文件组件和单文件组件的区别
组件实现局部功能的代码和资源的集合非单文件组件 1.定义组件(创建组件) 2.注册组件 3.使用组件(写组件标签) 定义使用Vue.extend(options)创建,其中options和new ...
[vue] SPA单页面的实现方式有哪些？
[vue] SPA单页面的实现方式有哪些? 1.监听地址栏中hash变化驱动界面变化2.用pushsate记录浏览器的历史,驱动界面发送变化3.直接在界面用普通事件驱动界面变化它们都是遵循同一种原则: ...
Java快速开发平台，JEECG 3.7.5 Vue SPA单页面应用版本发布
JEECG 3.7.5 Vue SPA单页面应用版本发布导读 ⊙ Vue+ElementUI SPA单页面应用 ⊙Datagrid标签快速切换BootstrapTable列表风 ...
Vue之单文件组件和脚手架
简介主要介绍单文件组件的定义和编写方法和脚手架相关知识介绍. 单文件组件的定义是一个文件只有一个组件,使用xxx.vue文件,这个文件是vue团队定义的一种文件类型. xxx.vue文件里面可以使用 ...
丁鹿学堂：前端进阶学习vue3最新教程之vue的单文件组件深入理解
在vue3中,template模版中的html代码,并不能直接在网页中执行,而是会在项目运行时,在浏览器中被编译为js 的函数去执行. 问题:在template模版中写html,体验很差,智能提示都不 ...
vue/cli是什么?vue/cli如何使用? 入门篇(安装创建,组件使用,定义路由,项目导出) ∠( °ω°)／前端知识
文章目录简介安装安装nodejs nvm npm换源单次换源永久换源方法一方法二 Vue/cli安装创建Vue/cli项目解决常见错误用命令行创建项目可视化界面创建项目目录简介 ...

vue多单页面多tab_vue-cli3创建多页面项目

vue多单页面多tab_vue-cli3创建多页面项目相关推荐

最新文章

热门文章