资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划,从策略到执行的一站式服务

vue-cli+webpack如何优化多页面实例配置

这篇文章主要介绍了vue-cli+webpack如何优化多页面实例配置,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。

10多年建站经验, 成都网站制作、网站设计客户的见证与正确选择。创新互联提供完善的营销型网页建站明细报价表。后期开发更加便捷高效,我们致力于追求更美、更快、更规范。

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里,打开后你就会看到很熟悉的