详解vue-cli + webpack 多页面实例配置优化方法


Posted in Javascript onJuly 13, 2017

本文介绍了vue-cli + webpack 多页面实例配置优化方法,分享给大家

vue+webpack是否有多页面

目前使用vue来做项目,估计大部分都是单页面(SPA)应用,一个轻型的 MVVM 框架,谁用了MVVM框架,就再也回不去JQ时代了,哈哈。

在手机端的项目,使用vue + vue-router是high到爆,不仅仅是我们开发的而言,最主要的用户体检也是开足马力,体检感杠杠的。

那问题来了,使用vue+webpack的单页面是爽到爆,那如果是多页面也能不能high到爆呢?那当然呀,必须的必,vue、webpack的忠粉(哈哈,好像这忠粉不关系到多页面的)。

在谷歌找vue 多页面,实例还是比较少,功夫不负有心人,在yaoyao1987那找到了,具体可以到这个yaoyao1987 github,非常感谢yaoyao1987童鞋,今天要讲的内容是基于yaoyao1987童鞋的多页面实例上再优化的。

优化了点啥

github地址:https://github.com/bluefox1688/vue-cli-multi-page

优化的内容

我们先来讲讲,具体我们优化了什么内容。

  1. 增加全局统一使用的模块Lib.js库,可能这里看不明白,不要紧,后面会讲到。
  2. 支持字体图标
  3. 增加干净的页面、组件的模板,复制即可以使用。
  4. 去掉多余的代码注释,坑了我的注释,别再坑人了
  5. 构建时,增加对css打包的支持
  6. 提取公共模块........

使用方法

# 安装
npm install

# 调试环境 serve with hot reload at http://localhost:8083/module/login.html
npm run dev

# 生产环境 build for production with minification
npm run build

本地默认访问端口为8083,需要更改的童鞋请到项目根目录文件config.js修改。

目录结构

webpack
 |---build
  |---src
   |---assets 资源
     |---css.css css
     |---img 图片文件
     |---font/ 字体图标
   |---components 组件
      |---Button.vue 按钮组件
     |---module-head.vue head组件
   |---module各个页面模块
    |---login  登陆模块
     |---login.html
     |---login.js
     |---app.vue
    |---welcome    欢迎页模块
     |---welcome.html
     |---welcome.js
     |---app.vue

从目录结构上,各种组件、页面模块、资源等都按类新建了文件夹,方便我们储存文件。

其实我们所有的文件,最主要都是放在module文件夹里,以文件夹名为html的名称。

例如

|---login  登陆模块
  |---login.html
  |---login.js
  |---app.vue

就是我们访问时的地址:http://localhost:8083/module/login.html

这里一定要记住,在module里下级文件夹,一个文件夹就是一个html,jsvue template 都统一放在当前文件夹里,当然你也可以继续放其他的资源,例如css、图片等,webpack会打包到当前页面里。

如果项目不需要这个页面了,可以直接把这个文件夹直接删除掉,干净项目,干活也开心。

像以前我们传统开发项目,所有的图片都习惯放在images里,当项目有改动时,有些图片等资源用不上了,但还占着坑位,虽

然现在的硬件容量大到惊人,但我们应该还是要养到一个良好的习惯。

当前页面的开发在app.vue里,打开后你就会看到很熟悉的<template>、<script>、<style scoped>了。

全局统一公共模块

我们做多页面开发,那肯定会涉及到全局都能调用的公共库,或者是把别人封装的库也一起打包在全局公共模块里。

如果看过源码的童鞋,在*.vue页面里,我都统一import了一个文件

import Lib from 'assets/Lib.js'

这就是全局统一公共模块,我们先看看Lib.js里的代码

# 导入全局的css
import 'assets/css.css';
# 导入全局的站点配置文件
import C from 'assets/conf';
# 导入全局的共用事件
import M from 'assets/common';

var Rxports = {
  M,C
};

module.exports = Rxports

在上方代码的M、C都是什么鬼,聪明的小伙伴就知道我想干嘛了,省写少事呗。

例如我们现在想调用APP的名称,在.vue里可以这么写

import Lib from 'assets/Lib.js'
Lib.C.appname; # 蓝锅锅

只需要在*.vue里导入import Lib from 'assets/Lib.js',就可以到处使用全局模块了。

不再像传统的开发模式,需要一堆的<script>一个一个的来放到页面的底部。

传统方式:

<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
 <script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

这里就是我想讲的关于优化的第一点提到的全局模块库。

当然也有童鞋问呀,会不会每个页面都会把这些全局模块库都打包在当前页面,那JS文件体积大到惊人。

哎呀,你当webpack是二货的呀,webpack会自动帮你处理好的,会把在*.vue里的import Lib from 'assets/Lib.js'的库自动提取出来,放到一个全局的JS文件里,这就是自动构造的神奇呀,省心省电,妈妈再也不用担心我做重复的工作了。

Lib.js里,我们也看到有两个导入的JS文件,主要来做什么的呢?

为了更好的在全局调用模块里,知道哪个模块的作用是什么,另外在写代码时更能快速查找到JS文件,我区分了配置文件和共用事件文件,即conf、common,下面说下具体的用途。

# 储存站点的配置,例如web的名称、LOGO地址等
import C from 'assets/conf';
# 导入全局的共用事件,例如在微信的JS SDK初始化,每个页面都要分享,都需要初始化的,一次调用,全局使用,棒!!
import M from 'assets/common';

当然,你也可以不像这样区分不同的JS文件,删除也没有影响的,具体也要看项目的需要而定,不能死读书。

另外,如果想要干净的页面模块模板,可以到根目录的tpl里复制module_tpl整个文件夹,然后粘贴到src/module目录下马上就可以进行开发了,开发之前记得在cmdnpm run dev跑一遍,新增页面都要重新dev一遍。

module我们就讲到这里,下面我们来讲讲组件的调用,最爱组件了。

组件的使用

组件(Component)是 vue.js 最强大的功能之一,当你发现使用组件可以减少造轮子里,你会深深的爱上它。
我们的组件都是放在components目录下的,调用组件的方法也很简单。

import Button from 'components/Button';

然后记得在*.vue注册导入的组件,要不然会影响使用。

import Button from 'components/Button';
export default {
 data() {
  return {
    
  }
 },
 components: {
  # 在这里注册组件,不注册组件的话,是无法使用的。
  Button  
 } 
}

如果想要干净的组件模板,可以到根目录的tpl里找到components_tpl的Hello.vue文件,复制粘贴到components目录下马上就可以进行开发了。

图标字体

在yaoyao1987童鞋里,是没有打包构造图标字体的代码逻辑,这也是我优化上去的一部分,建议使用iconfont图标(http://www.iconfont.cn) ,强大到无所不能,可以到iconfont下载自己想要的图标字体,记得是把文件放到\src\assets\font文件夹里。

webpack会自动打包的,无需理会,另外还有一点,iconfont提供的css文件,复制到\src\assets\css.css文件即可,要不然没有效果哈。

*.vue里使用调用就行了。

<i class="iconfont">!</i>

构建代码说明

那我们使用的是vue-cli的手脚架,用过vue+cli的朋友知道主要构建代码都放在根目录build下,vue多页面主要修改了这三个JS文件webpack.base.conf.jswebpack.dev.conf.jswebpack.prod.conf.js

# 【webpack.base.conf.js】主要是构建的全局设置,主要是增加了以下代码,已经增加在JS文件里,这里只是做一个补充说明,具体请看`build/webpack.base.conf.js`。

var entries = getEntry('./src/module/**/*.js'); // 获得入口js文件
var chunks = Object.keys(entries);

plugins: [
  // 提取公共模块
  new webpack.optimize.CommonsChunkPlugin({
   name: 'vendors', // 公共模块的名称
   chunks: chunks, // chunks是需要提取的模块
   minChunks: chunks.length
  }),
  // 配置提取出的样式文件
  new ExtractTextPlugin('css/[name].css')
 ]

function getEntry(globPath) {
 var entries = {},
  basename, tmp, pathname;

 glob.sync(globPath).forEach(function (entry) {
  basename = path.basename(entry, path.extname(entry));
  tmp = entry.split('/').splice(-3);
  pathname = tmp.splice(0, 1) + '/' + basename; // 正确输出js和html的路径
  entries[pathname] = entry;
 });
 
 return entries;
}

这里还要做一个特别说明,我们每次更新资源文件,为了去缓存,都会给文件生成hash值,例如:

<script type='text/javascript' src='vendors.61714a310523a3df9869.js' charset='utf-8'></script>
<script type='text/javascript' src='vendors.js?f3aaf25de220e214f84e' charset='utf-8'></script>

这两者都是为了去缓存,唯一的区别的生成的文件名不一样,有些项目,为了可以能出严重BUG时第一时间回滚,以文件名+hash的方式储存,每次生成都不会覆盖之前的代码,以方便查BUG或者回滚。

另一种方式,就是以文件名+?hash的方式储存,每次都会覆盖之前生成的资源,方便在某些特殊项目使用。

我在webpack.base.conf.js也已经注释说明了。

module.exports = {
 entry: entries,
 output: {
  path: config.build.assetsRoot,
  publicPath: config.build.assetsPublicPath,
  /* ---- 生成的例子 vendors.61714a310523a3df9869.js --- */
  //filename: '[name].[hash].js'
  /* ---- 生成的例子 vendors.js?f3aaf25de220e214f84e --- */
  filename: '[name].js'
 }
}

结束言

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery实现的元素的left增加N像素 鼠标移开会慢慢的移动到原来的位置
Mar 21 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
Mar 04 Javascript
jquery实现textarea 高度自适应
Mar 11 Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 Javascript
使用Raygun对Node.js应用进行错误处理的方法
Jun 23 Javascript
jQuery与Ajax以及序列化
Feb 01 Javascript
javascript动画系列之模拟滚动条
Dec 13 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
vue动态路由实现多级嵌套面包屑的思路与方法
Aug 16 Javascript
Javascript实现贪吃蛇小游戏(含详细注释)
Oct 23 Javascript
token 机制和实现方式
Dec 15 Javascript
vue实现可拖拽的dialog弹框
May 13 Vue.js
Angular限制input框输入金额(是小数的话只保留两位小数点)
Jul 13 #Javascript
js实现图片上传预览原理分析
Jul 13 #Javascript
vue.js数据绑定的方法(单向、双向和一次性绑定)
Jul 13 #Javascript
Easyui Datagrid自定义按钮列(最后面的操作列)
Jul 13 #Javascript
AngularJS 实现点击按钮获取验证码功能实例代码
Jul 13 #Javascript
解决Vue页面固定滚动位置的处理办法
Jul 13 #Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
Jul 13 #Javascript
You might like
PHP验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
七款最流行的PHP本地服务器分享
2013/02/19 PHP
探讨:php中在foreach中使用foreach ($arr as &amp;$value) 这种类型的解释
2013/06/24 PHP
Symfony2之session与cookie用法小结
2016/03/18 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
PHP一致性hash分布式算法封装类定义与用法示例
2018/08/04 PHP
JavaScript 获得选中文本内容的方法
2009/02/15 Javascript
js实现星星打分效果的方法
2020/07/05 Javascript
JS模拟酷狗音乐播放器收缩折叠关闭效果代码
2015/10/29 Javascript
WebGL利用FBO完成立方体贴图效果完整实例(附demo源码下载)
2016/01/26 Javascript
浅谈JavaScript for循环 闭包
2016/06/22 Javascript
js实现省市级联效果分享
2017/08/10 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
2017/08/29 jQuery
jquery实现点击a链接,跳转之后,该a链接处显示背景色的方法
2018/01/18 jQuery
Python中的ConfigParser模块使用详解
2015/05/04 Python
R vs. Python 数据分析中谁与争锋?
2017/10/18 Python
Python WXPY实现微信监控报警功能的代码
2017/10/20 Python
Python使用pickle模块储存对象操作示例
2018/08/15 Python
Python基础教程之异常详解
2019/01/10 Python
Tornado实现多进程/多线程的HTTP服务详解
2019/07/25 Python
python数据处理之如何选取csv文件中某几行的数据
2019/09/02 Python
使用pyqt5 tablewidget 单元格设置正则表达式
2019/12/13 Python
基于Python3.6中的OpenCV实现图片色彩空间的转换
2020/02/03 Python
基于python爬取梨视频实现过程解析
2020/11/09 Python
Hotels.com南非:酒店预订
2017/11/02 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
会计专业自荐信范文
2013/12/02 职场文书
海南召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
交警正风肃纪剖析材料
2014/10/29 职场文书
2014年助理政工师工作总结
2014/12/19 职场文书
大学生党性分析材料
2014/12/19 职场文书
学前教育见习总结
2015/06/23 职场文书
狂人日记读书笔记
2015/06/30 职场文书
图解排序算法之希尔排序Java实现
2021/06/26 Java/Android
详解Golang如何优雅的终止一个服务
2022/03/21 Golang
Redis实现分布式锁的五种方法详解
2022/06/14 Redis