摘要：在谷歌找多页面，实例还是比较少，功夫不负有心人，在那找到了，具体可以到这个，非常感谢童鞋，今天要讲的内容是基于童鞋的多页面实例上再优化的。有需要一起交流的可以加我的微信，，记得备注技术交流哈。
vue+webpack是否有多页面
目前使用vue来做项目，估计大部分都是单页面（SPA）应用，一个轻型的 MVVM 框架，谁用了MVVM框架，就再也回不去JQ时代了，哈哈。
在手机端的项目，使用vue + vue-router是high到爆，不仅仅是我们开发的而言，最主要的用户体检也是开足马力，体检感杠杠的。
那问题来了，使用vue+webpack的单页面是爽到爆，那如果是多页面也能不能high到爆呢？那当然呀，必须的必，vue、webpack的忠粉（哈哈，好像这忠粉不关系到多页面的）。
在谷歌找vue 多页面，实例还是比较少，功夫不负有心人，在yaoyao1987那找到了，具体可以到这个yaoyao1987 github，非常感谢yaoyao1987童鞋，今天要讲的内容是基于yaoyao1987童鞋的多页面实例上再优化的。
优化了点啥 demo、github地址1、demo：http://v.lanchenglv.com/demo/...
2、github：https://github.com/bluefox168...
我们先来讲讲，具体我们优化了什么内容。
增加全局统一使用的模块Lib.js库，可能这里看不明白，不要紧，后面会讲到。
支持字体图标
增加干净的页面、组件的模板，复制即可以使用。
去掉多余的代码注释，坑了我的注释，别再坑人了
构建时，增加对css打包的支持
提取公共模块
........
# 安装 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，js、vue template 都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片等，webpack会打包到当前页面里。
如果项目不需要这个页面了，可以直接把这个文件夹直接删除掉，干净项目，干活也开心。
像以前我们传统开发项目，所有的图片都习惯放在images里，当项目有改动时，有些图片等资源用不上了，但还占着坑位，虽然现在的硬件容量大到惊人，但我们应该还是要养到一个良好的习惯。
当前页面的开发在app.vue里，打开后你就会看到很熟悉的、
>
这里就是我想讲的关于优化的第一点提到的全局模块库。
当然也有童鞋问呀，会不会每个页面都会把这些全局模块库都打包在当前页面，那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目录下马上就可以进行开发了，开发之前记得在cmd里npm 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下载自己想要的图标字体，记得是把文件放到srcassetsfont文件夹里。
webpack会自动打包的，无需理会，另外还有一点，iconfont提供的css文件，复制到srcassetscss.css文件即可，要不然没有效果哈。
在*.vue里使用调用就行了。
!构建代码说明
那我们使用的是vue-cli的手脚架，用过vue+cli的朋友知道主要构建代码都放在根目录build下，vue多页面主要修改了这三个JS文件webpack.base.conf.js、webpack.dev.conf.js、webpack.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值，例如：
这两者都是为了去缓存，唯一的区别的生成的文件名不一样，有些项目，为了可以能出严重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"
}
}
结束言
不知不觉时间又过去，啰嗦一堆堆的，每个项目需求都不一样，配置也会有许不同，也希望更多的朋友分享自己的代码和想法出来哈，也可以一起交流。
有需要一起交流的可以加我的微信，amwhuang，记得备注技术交流哈。
首发博客地址：http://lanchenglv.com/article...
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/80225.html
摘要：前段时间项目组计划快速开发一个新的项目，开发那边提供壳子和部分系统级功能，所有的页面由完成，考虑兼容性安卓及。后面会继续优化，先把目前的基本部署方式记录下来。 前段时间项目组计划快速开发一个新的App项目，App开发那边提供壳子和部分系统级功能，所有的页面由h5完成，考虑兼容性安卓4.1及ios7.1。全新的项目，没有历史包袱，就尝试了新的开发模式，采用了webpack + vue-c...
摘要：作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。的新版本，的简称。的包管理工具，用于同一管理我们前端项目中需要用到的包插件工具命令等，便于开发和维护。 Vue.js作为目前最热门最具前景的前端框架之一，其提供了一种帮助我们快速构建并开发前端项目的新的思维模式。本文旨在帮助大家认识Vue.js，了解Vue.js的开发流程，并进一步理解如何通...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
摘要：五六月份推荐集合查看最新的请点击集前端最近很火的框架资源定时更新，欢迎一下。苏幕遮燎沈香宋周邦彦燎沈香，消溽暑。鸟雀呼晴，侵晓窥檐语。叶上初阳乾宿雨，水面清圆，一一风荷举。家住吴门，久作长安旅。五月渔郎相忆否。小楫轻舟，梦入芙蓉浦。 五、六月份推荐集合 查看github最新的Vue weekly；请::点击::集web前端最近很火的vue2框架资源；定时更新，欢迎 Star 一下。 苏...
阅读 1447·2021-11-22 13:54
阅读 4339·2021-09-22 15:56
阅读 1820·2021-09-03 10:30
阅读 1321·2021-09-03 10:30
阅读 2089·2019-08-30 15:55
阅读 1854·2019-08-30 14:13
阅读 2063·2019-08-29 15:19
阅读 2351·2019-08-28 18:13
