详解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 相关文章推荐
下拉列表选择项的选中在不同浏览器中的兼容性问题探讨
Sep 18 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
ztree获取当前选中节点子节点id集合的方法
Feb 12 Javascript
js和jquery实现监听键盘事件示例代码
Jun 24 Javascript
jQuery遍历DOM元素与节点方法详解
Apr 14 Javascript
浅析BootStrap栅格系统
Jun 07 Javascript
常用的几个JQuery代码片段
Mar 13 Javascript
Node学习记录之cluster模块
May 31 Javascript
vuejs手把手教你写一个完整的购物车实例代码
Jul 06 Javascript
微信小程序注册60s倒计时功能 使用JS实现注册60s倒计时功能
Aug 16 Javascript
vue.js动画中的js钩子函数的实现
Jul 06 Javascript
详解vue中使用微信jssdk
Apr 19 Javascript
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 多维数组排序(usort,uasort)
2010/06/30 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
PHP运行SVN命令显示某用户的文件更新记录的代码
2014/01/03 PHP
PHP中使用substr()截取字符串出现中文乱码问题该怎么办
2015/10/21 PHP
PHP socket 模拟POST 请求实例代码
2016/07/18 PHP
php文件类型MIME对照表(比较全)
2016/10/07 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
2016/12/08 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
利用jquery动画特效和css打造的侧边弹出垂直导航
2014/04/04 Javascript
js实现图片拖动改变顺序附图
2014/05/13 Javascript
学习JavaScript设计模式(链式调用)
2015/11/26 Javascript
javascript实现倒计时跳转页面
2016/01/17 Javascript
JavaScript数据结构与算法之栈与队列
2016/01/29 Javascript
jQuery制作网页版选项卡
2016/07/28 Javascript
jQuery实现圣诞节礼物动画案例解析
2016/12/25 Javascript
AngularJS路由实现页面跳转实例
2017/03/03 Javascript
jquery仿微信聊天界面
2017/05/06 jQuery
基于vue.js中事件修饰符.self的用法(详解)
2018/02/23 Javascript
Vue2.0实现组件数据的双向绑定问题
2018/03/06 Javascript
微信小程序录音实现功能并上传(使用node解析接收)
2020/02/26 Javascript
[06:40]2014DOTA2西雅图国际邀请赛 DK战队巡礼
2014/07/07 DOTA
Python数据结构与算法之链表定义与用法实例详解【单链表、循环链表】
2017/09/28 Python
python机器学习实战之树回归详解
2017/12/20 Python
wtfPython—Python中一组有趣微妙的代码【收藏】
2018/08/31 Python
python简单实现矩阵的乘,加,转置和逆运算示例
2019/07/10 Python
python pymysql链接数据库查询结果转为Dataframe实例
2020/06/05 Python
Python中的流程控制详解
2021/02/18 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
基于tensorflow __init__、build 和call的使用小结
2021/02/26 Python
基于ccs3的timeline时间线实现方法
2020/04/30 HTML / CSS
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
优秀教师先进事迹
2014/01/22 职场文书
单位委托书范本
2014/04/04 职场文书
委托协议书范本
2014/04/22 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
党员公开承诺书2016
2016/03/24 职场文书