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

黄锅小
3,607 阅读2分钟

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：v.lanchenglv.com/demo/vue-cl…
2、github：github.com/bluefox1688…

优化的内容

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

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

使用方法

npm install
npm run dev
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

就是我们访问时的地址：

这里一定要记住，在module里下级文件夹，一个文件夹就是一个html，js``vue template 都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片等，webpack会打包到当前页面里。
如果项目不需要这个页面了，可以直接把这个文件夹直接删除掉，干净项目，干活也开心。
像以前我们传统开发项目，所有的图片都习惯放在images里，当项目有改动时，有些图片等资源用不上了，但还占着坑位，虽然现在的硬件容量大到惊人，但我们应该还是要养到一个良好的习惯。
当前页面的开发在app.vue里，打开后你就会看到很熟悉的、

avatar
文章
阅读
粉丝