vue.js 多页 php,VUE 多页面配置(一)

1. 概述

1.1 说明

项目开发过程中会遇到需要多个主页展示情况，故在vue单页面的基础上进行配置多页面开发以满足此需求。

2. 实例

2.1 页面配置

2.1.1 默认首页

使用vue脚手架搭建后的首页信息：index.html，app.vue，main.js

2.1.2 测试首页

单独创建的首页信息：home.html ，home.vue，home.js

2.1.3 页面展示

2.2 webpack配置

2.2.1 webpack基础配置：webpack.base.conf.js

增加入口时需要写入需要增加的文件的正确路径

2.2.2 webpack开发环境配置：webpack.dev.conf.js

新增对应的页面html打包(HtmlWebpackPlugin)

2.2.2 webpack生产环境配置：index.js与webpack.prod.conf.js

*** config>index.js进行打包基础配置

*** build>webpack.prod.conf.js 进行打包配置

注意：打包后可安装http-server进行访问打包好的文件dist：http-server ./dist ；若没有安装依赖可使用命令安装：npm install http-server -g

VUE 多页面配置(二)

1. 概述 1.1 说明 项目开发过程中会遇到需要多个主页展示情况,故在vue单页面的基础上进行配置多页面开发以满足此需求,此记录为统一配置出入口. 2. 实例 2.1 页面配置 使用vue脚手架搭建 ...

[转] vue&webpack多页面配置

前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

vue&webpack多页面配置

前言 最近由于项目需求,选择使用vue框架,webpack打包直接使用的vue-cli,因为需要多页面而vue-cli只有单页面,所以就决定修改vue-cli的配置文件来满足开发需求. html-we ...

vue cli3超详细创建多页面配置

1.首先按照vue cli3 给的入门文档下载个vue cli3 如果之前下载了vue cli2的要先卸载之前的 2.检查安装是否成功 3.ok,现在环境搭建好了,新建项目 vue create he ...

VUE 多页面打包webpack配置

思路:多配置一个main的文件,用于webpack入口使用, 然后路由的导向也应该默认指向新组件,最后通过webpack构建出一个新的独立的html文件. 缺点:生成多个html会new出多个vu ...

vue 单页面应用实战

1. 为什么要 SPA? SPA: 就是俗称的单页应用(Single Page Web Application). 在移动端,特别是 hybrid 方式的H5应用中,性能问题一直是痛点. 使用 SPA ...

Vue单页面骨架屏实践

github 地址: VV-UI/VV-UI 演示地址: vv-ui 文档地址:skeleton 关于骨架屏介绍 骨架屏的作用主要是在网络请求较慢时,提供基础占位,当数据加载完成,恢复数据展示.这样给 ...

vue单页面打包文件大？首次加载慢？按需加载？是你打开方式不对

部署各vue项目,走了一遍坑.... vue单页面应用刷新404 找到nginx多网站配置文件:类似nginx/sites-available/www.baidu.com server { liste ...

[转] 2017-11-20 发布 另辟蹊径：vue单页面，多路由，前进刷新，后退不刷新

目的:vue-cli构建的vue单页面应用,某些特定的页面,实现前进刷新,后退不刷新,类似app般的用户体验.注: 此处的刷新特指当进入此页面时,触发ajax请求,向服务器获取数据.不刷新特指当进入此 ...

随机推荐

C#强力粉碎文件代码分享，升级中用到

360的文件粉碎机还是很强大的,在我们客户端winform升级的时候,必须将有些文件进行强力删除后下载更新,如果删除失败很有可能整个 程序就无法更新到最新的版本,所以这里参考了网上的资料整理了一个文件 ...

Makefile使用总结

1. Makefile 简介 Makefile 是和 make 命令一起配合使用的. 很多大型项目的编译都是通过 Makefile 来组织的, 如果没有 Makefile, 那很多项目中各种库和代码之 ...

Android 背景图片重复平铺

有时候我们需要将一个图片横向或者纵向的平铺(重复循环),这个时候我们需要创建一个xml文件,如下: <?xml version ="1.0" encoding =" ...

vs2012&plus;opencv2&period;4&period;7 实现单张人脸识别

参考:http://blog.sina.com.cn/s/blog_593c85f20100ncnj.html OpenCV的库中带有检测正面人脸的 Haar迭代算法Haar Cascade Face ...

Jdk1&period;6 JUC源码解析&lpar;12&rpar;-ArrayBlockingQueue

功能简介: ArrayBlockingQueue是一种基于数组实现的有界的阻塞队列.队列中的元素遵循先入先出(FIFO)的规则.新元素插入到队列的尾部,从队列头部取出元素. 和普通队列有所不同,该队列 ...

angular 4使用jquery 第三方插件库

用jBox插件为例子 1,npm install jBox --save 2,找到.angular-cli.json  增加 "../node_modules/jbox/Source/jBo ...

编程菜鸟的日记-《软件测试》Ron Patton著-读书笔记

第一部分 软件测试综述 第一章 软件测试的背景 1.软件测试员的目标:尽可能早地找到软件缺陷,并确保其能得以修复. 2.仅仅测试程序是否按预期方式运行有何问题:程序能完好的跑通并不代表软件不存在缺陷, ...

CodeForces 958F3 Lightsabers &lpar;hard&rpar; 启发式合并&sol;分治 多项式 FFT

原文链接http://www.cnblogs.com/zhouzhendong/p/8835443.html 题目传送门 - CodeForces 958F3 题意 有$n$个球,球有$m$种颜色,分 ...

React Router教程

React Router教程 React项目的可用的路由库是React-Router,当然这也是官方支持的.它也分为: react-router 核心组件 react-router-dom 应用于浏览 ...