vue.js能美化界面吗_vue将单页面改造成多页面应用的方法
问题描述: 手头有一个项目是使用 vue-cli 搭建的单页面应用。项目分为了管理平台和用户查看页面,用户查看页面是很简单的页面,但是在加载过程中,却加载了整个应用的打包代码,量重且影响了响应和体验。我想要的效果是,查看页面只加载查看页面的代码,不包含管理系统的代码,因此着手将单页面应用改造成多页面应用,这里分享下方法。
1、改造文件目录
改造前:
改造后:
assets:这里不变,依然放置公用的静态资源文件;components:这里存放应用下所有的vue组件;pages:这里存放我们的多页面,比如我把管理系统页面放在index中,查看页面放在view中;
pages文件:
每个页面下必须包含的文件是 html/js/vue,是文件入口,如果该页面下包含路由,状态管理,接口请求也放在该目录下;
2、打包配置文件修改
我们最后的打包文件是这样的,可以看到有2个html,包括资源也分开了。这是通过修改webpack配置改造的。采用的方法也是网上比较推荐的方法.
HTML分离:
资源分离:
2.1 修改build->utils.js
修改build文件夹下的utils.js,直接将下面的代码复制在后面即可。
var glob = require('glob');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var PAGE_PATH = path.resolve(__dirname, '../src/pages');
var merge = require('webpack-merge');
// 这段代码的意思是根据我们`pages`下的文件夹定义webpack的入口:
exports.entries = function () {
var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')
var map = {}
entryFiles.forEach((filePath) => {
var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
map[filename] = filePath
})
return map
}
// 这段代码是将生成的html,加载对应的资源文件
exports.htmlPlugin = function () {
let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')
let arr = []
entryHtml.forEach((filePath) => {
let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))
let conf = {
// 模板来源
template: filePath,
// 文件名称
filename: filename + '.html',
// 页面模板需要加对应的js脚本,如果不加这行则每个页面都会引入所有的js脚本
chunks: ['manifest', 'vendor', filename],
inject: true
}
if (process.env.NODE_ENV === 'production') {
conf = merge(conf, {
minify: {
removeComments: true,
collapseWhitespace: true,
removeAttributeQuotes: true
},
chunksSortMode: 'dependency'
})
}
arr.push(new HtmlWebpackPlugin(conf))
})
return arr
}
2.2 修改入口entry打开 build->webpack.base.conf.js,替换entry为在utils新增的entries:
2.3 修改html插件打开build->webpack.prod.conf.js,先去除原来的配置:
然后再把我们刚在utils里新增的配置加上:
3、页面怎么写
上面的方法,网上五花八门的都介绍了,但是在实现的过程中,还是遇到了问题:这里粘贴下我实践成功的页面写法,减少一些爬坑吧~
view.html:
view.vue:
view.js:
ok,这时候 npm run build 就可以打包出我们要的文件了,访问方法是直接输入对应的html,如果是管理首页,无需写index.html,比如本地访问查看页面:
4、进一步优化
这个时候我们又发现一个问题,就是我的查看页面很简单,没有引入状态管理,路由,UI框架,但是我们知道vue的webpack把这些第三方公共组件都打包到render.js里面了且文件很大会影响我们的加载速度。这里我是将比较大的第三方库使用了cdn方法加载,实践证明会减少了一半的加载速度,且压缩后的js代码也小了很多了~
vue.js能美化界面吗_vue将单页面改造成多页面应用的方法相关推荐
- vue.js能美化界面吗_美牙真的能变美吗?刘涛花百万美化牙齿,容貌大变样,网友:太神奇了吧...
娱乐圈中很多明星出道前后,感觉像是换了个头. 问其原因,这些明星都把自己变美的功劳归结为美化了牙齿. 那么美牙到底有什么魔力?对一个人的颜值有多大呢?一起来看看吧! 杨幂 杨幂可以说是第一个通过对牙齿 ...
- 关于vue.js 编程导航的使用:实现路由配置和跳转页面
本文主要讲述:通过vue.js 编程导航,实现路由配置和跳转页面的功能! 基础篇,仅作为简单演示. 总结 不能保证用户一定会点击某些按钮 并且当前操作,除了路由跳转以外,还会有一些别的附加操作(比如执 ...
- SAP PM 初级系列15 - IW33事务代码界面里查看维修工单对应的维修通知单的几个方法
SAP PM 初级系列15 - IW33事务代码界面里查看维修工单对应的维修通知单的几个方法 IW33进入维修工单显示界面,有好几种方法能查看该维修工单对应的前端维修通知单的信息. 1,在Header ...
- vue取url路径传参_vue不通过路由直接获取url中参数的方法示例
前言 众所周知vue中使用路由的方式设置url参数,但是这种方式必须要在路径中附带参数,而且这个参数是需要在vue的路由中提前设置好的. 相对来说,在某些情况下直接在url后面拼接?mid=100的方 ...
- vue点击网页全屏_vue中实现点击变成全屏的多种方法
项目中有点击按钮实现全屏功能 方式一:js实现全屏 全屏 data: data() { return { fullscreen: false }; }, methods: screen() { let ...
- Vue.js实现可配置的登录表单
表单是后台项目业务中的常用组件,这次重构了登录功能以满足登录方式可配置的需求,在此记录和分享一下. 业务场景 在之前,项目只支持手机号+密码登录,前端是直接把表单写死的,后来有客户希望能支持验证码登录 ...
- Vue.js 极简小例:表单 (输入框 input、文本域 textarea、单选框 radio、下拉菜单 selected、复选框 checkbox)
前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家.点击跳转到教程. 代码: <template> <div > <p>------- ...
- 404 单页应用 报错 路由_Vue 部署单页应用,刷新页面 404/502 报错
在 Vue 项目中,可以选择 hash或者 history.pushState() 实现路由跳转.如果在路由中使用history模式: export default new Router({ mode ...
- Vue.js的基本使用 学习笔记
VUE的基本使用 学习笔记 一. 简介 Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的渐进式框架. Vue 只关注视图层, 采用自底向上增量开发的设计. Vue 的目标是 ...
最新文章
- Windows文件操作的直接函数调用
- jquery添加的html元素按钮为什么不执行类样式绑定的click事件
- 波卡链Substrate (7)Babe协议五“Epoch纪元更新”
- java堆设置成多少合适_jvm~xmx设置多少合适
- python3写文件_python3 写文件问题
- Text Classification with BERT using Transformers for long text inputs
- 基于socketio 写一个聊天室
- jQuery LightBox插件原理的简单实现
- Office、excel、word卡死(或卡顿后自动恢复)的解决方案
- 【python Windows安装教程】
- USB设备的VID与PID
- Oracle数据库实训教师评语,教育教学评价系统数据库的设计与实现.doc
- 四阶龙格-库塔法求解常微分方程的初值问题
- 【Spring Web教程】SpringBoot 整合SpringFox-SwaggerUI 3
- 人工智能导论学习笔记(考前复习)
- Java+MySQL基于Springboot口腔牙科诊所管理系统#毕业设计
- 带你打造一套 APM 监控系统 之 卡顿监控
- Axure+RP+pro教程
- 金典Windows98虚拟机系统程序分享+适合怀旧
- 关于等级保护测评,这些你都知道吗
热门文章
- python中注释的快捷键_【Python】注释
- 使用python高通滤波器时报错numpy.linalg.linalg.LinAlgError: Singular matrix
- python+OpenCV图像处理(十二)车牌定位中对图像的形态学组合操作处理
- 动态规划——数塔问题
- C++中用frugally-deep调用keras的模型并进行预测
- p1和p7签名的区别
- Java加密与解密的艺术~数字签名~RSA实现
- 软件系统架构~视点和视图
- php去除所有标点符号的方法,php如何去除标点符号
- 浮点数在计算机中起什么作用,浮点数在计算机中的存储表示