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 多页面配置(一)的更多相关文章
- 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请求,向服务器获取数据.不刷新特指当进入此 ...
随机推荐
- Retrofit GreenDao开发中遇到的坑
持续更新中1.使用@FormUrlEncoded的话,服务端需要使用Request.Form,如果不使用@FormUrlEncoded本地需要由 @FieldMap Map<String, Ob ...
- SQL 编程技巧
Ø 简介 本文主要介绍编写 SQL 时的一些编程技巧,方便有时候忘了便于查看,主要包含以下内容: 1. SQL 语句中使用 +=.-=.*=./= 运算符 2. 值为 NULL 的列或局部变 ...
- 微信小程序 TOP100 榜单
8 月 12 日,阿拉丁数据统计平台发布了国内第一份小程序 TOP100 榜单,摩拜单车成为全榜第一! 该榜单数据来源于阿拉丁小程序统计平台检测.合作.如有赞等,并经过企业电话调研和实地走访企业等校准 ...
- Select 子句后的别名,在where条件中不能使用
SELECT * FROM student WHERE (条件) 执行顺序,先执行FROM 子句,然后执行WHERE 子句,最后执行SELECT 所以Select 子句后的别名,在where条件中不能 ...
- solr 中文分词器IKAnalyzer和拼音分词器pinyin
solr分词过程: Solr Admin中,选择Analysis,在FieldType中,选择text_en 左边框输入 “冬天到了天气冷了小明不想上学去了”,点击右边的按钮,发现对每个字都进行分词. ...
- pyqt5-控件的显示与隐藏
只有父控件显示,子控件才能显示 setVisible(bool) 设置控件是否可见 button.setVisible(True) True 可见 setHidden(bool) ...
- git操作本地仓库基本使用教程
1.创建仓库 mkdir learngit 2.初始化 cd learngit git init 3.添加文件(把要提交的所有修改放到暂存区(Stage)) git add 文件 4.提交到仓库(以 ...
- python 函数指动态形参,作用域
函数的动态形参, 作用域 一 动态形参 如果我们需要给⼀一个函数传参, ⽽而参数⼜又是不确定的. 或者我给⼀一个 函数传很多参数, 我的形参就要写很多, 很⿇麻烦, 怎么办呢. 我们可以考虑使⽤用动态 ...
- 前端html1.
HTML介绍 转载http://www.cnblogs.com/liwenzhou/p/7988087.html Web服务本质 import socket sk = socket.socket() ...
- python中的私有变量
class Test1: def f1(self): self.name ="张三" self.__age = 20 #使用名称变形实现私有变量 print(self.name) ...