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…

优化的内容

我们先来讲讲，详细我们优化了什么内容。

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，js、vue 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>
  <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目次下立时就能够举行开辟了，开辟之前记得在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下载本身想要的图标字体，记得是把文件放到\src\assets\font文件夹里。

webpack会自动打包的，无需剖析，别的另有一点，iconfont供应的css文件，复制到\src\assets\css.css文件即可，要不然没有结果哈。
在*.vue里运用挪用就好了。

<i class="iconfont">&#33</i>

构建代码申明

那我们运用的是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值，比方：

<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'
  }
}  

完毕言

不知不觉时候又过去，烦琐一堆堆的，每一个项目需求都不一样，设置也会有许差别，也愿望更多的朋侪分享本身的代码和主意出来哈，也能够一同交换。
有须要一同交换的能够加我的微信，amwhuang，记得备注技术交换哈。

首发博客地点：http://lanchenglv.com/article…