前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue-cli3创建多页面项目

vue-cli3创建多页面项目

作者头像
wade
发布2020-04-24 10:10:02
1.2K0
发布2020-04-24 10:10:02
举报
文章被收录于专栏:coding个人笔记

开发了很多个单页面的项目,也开发了很多原生的项目,就是一直没机会开发多页面和单页面混合的项目,于是自己去查了一些资料,用的是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,里面做一些修改:

代码语言:javascript
复制
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

(完)

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-09-10,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 coding个人笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档