惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

Martin Fowler
Martin Fowler
D
DataBreaches.Net
F
Fortinet All Blogs
阮一峰的网络日志
阮一峰的网络日志
博客园_首页
Apple Machine Learning Research
Apple Machine Learning Research
H
Help Net Security
M
MIT News - Artificial intelligence
美团技术团队
人人都是产品经理
人人都是产品经理
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
The Cloudflare Blog
有赞技术团队
有赞技术团队
L
LangChain Blog
博客园 - Franky
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
博客园 - 【当耐特】
S
SegmentFault 最新的问题
V
Visual Studio Blog
Blog — PlanetScale
Blog — PlanetScale
Hugging Face - Blog
Hugging Face - Blog
B
Blog
I
InfoQ

Jay Zangwill

前端该如何选择图片的格式 移动端适配 扒一扒浏览器缓存机制 line-height和vertical-align采坑记 分享个人前端学习路线及面试经验 搜狗实习总结 记一次我看红宝书对继承加深的理解 四月北京面试之旅 常用的mongodb命令 几个让我印象深刻的面试题(二) 几个让我印象深刻的面试题(一) css盒模型与定位 javscript的数据类型 angular学习笔记(3) angular学习笔记(2) angular学习笔记(1) 初尝vue sass基础 hexo+github快速搭建个人博客
vue-cli-multipage
Jay Zangwill · 2018-03-06 · via Jay Zangwill

基于vue-cli的多页面应用脚手架

前言

原文

掘金

知乎&知乎专栏

目前vue-cli生成的配置都是做多页面的,然而,我们有时也会有多页面的需求。
同时,之前借用的这个多页面例子貌似作者不再维护了,导致webpack升级到webpack2就无法使用了,所以我就参考这个例子自己弄了个多页面脚手架,会不定期维护的。

代码地址:https://github.com/JayZangwill/vue-multipage
有什么问题可以在issues上提,欢迎star

下载&使用

1
2
3
4
5
6
7
8
9
git clone https://github.com/JayZangwill/vue-multipage
cd vue-multipage
npm i

//开发模式(运行完后要在浏览器输入http://localhost:8081/module/index)
npm run dev

//生产模式
npmrun build

目录结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
vue-multipage
|---build
|---config
|---src
|---assets
|---components 组件
|---HelloWorld.vue
|---other.vue
|---module多页面模块
|---index
|---index.html
|---index.js
|---App.vue
|---other
|---index.html
|---other.js
|---App.vue

说明

如需添加页面需要在module目录下新建文件夹,然后文件夹里必须包括.hmtl,.js,.vue文件作为入口文件。

运行npm run dev命令后,需要在浏览器输入http://localhost:8081/module/+module下目录文件夹名/+文件夹名里的html文件

已知bug

  1. 目前公用css还无法分离
  2. 开发模式需要手动输入url打开页面,不能直接打开。

同时也欢迎提代码pull来帮助我解决bug

参考

vue-cli + webpack 多页面实例应用