vue ui创建项目_vue-cli3创建多页面项目

最新推荐文章于 2024-01-29 17:15:39 发布

weixin_39623350

最新推荐文章于 2024-01-29 17:15:39 发布

阅读量249

点赞数

文章标签： vue ui创建项目 vue ui创建项目报错 vue创建项目 vue创建项目步骤 vue固定页面宽度 vue项目创建后没有build

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

关注