1.全局安装vue-cli

npm install -g vue-cli2.基于webpack项目模板创建项目vue init webpack demo3.在模板项目的基础上，调整项目目录结构在src目录下新建modules,pages文件夹用来存放模块和页面。实际项目的每个页面都再单独建一个文件夹并存放在pages文件夹中。注意pages下每个文件夹下的各页面入口js文件必须和模板文件(html文件)的名称保持一致。src目录结构：components存放公用组件router存放页面的路由配置assets存放页面的静态资源modules存放公用模块pages存放页面4.在build/utils.js中按以下内容修改变量声明，并添加两个方法：webpack多入口文件和多页面输出

var path = require('path')var config = require('../config')var ExtractTextPlugin = require('extract-text-webpack-plugin')var glob = require('glob')var HtmlWebpackPlugin = require('html-webpack-plugin')var PAGE_PATH = path.resolve(__dirname, '../src/pages')var merge = require('webpack-merge')var packageConfig = require('../package.json')//多入口配置exports.entries = function() {  var entryFiles = glob.sync(PAGE_PATH + '/*/*.js')  var map = {}  entryFiles.forEach((filePath) => {    var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))    map[filename] = filePath  })  return map}//多页面输出配置exports.htmlPlugin = function() {  let entryHtml = glob.sync(PAGE_PATH + '/*/*.html')  let arr = []  entryHtml.forEach((filePath) => {    let filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'))    let conf = {      template: filePath,      filename: filename + '.html',      chunks: ['manifest', 'vendor', filename],      inject: true    }    if (process.env.NODE_ENV === 'production') {      conf = merge(conf, {        chunks: ['manifest', 'vendor', filename],        minify: {          removeComments: true,          collapseWhitespace: true,          removeAttributeQuotes: true        },        chunksSortMode: 'dependency'      })    }    arr.push(new HtmlWebpackPlugin(conf))  })  return arr}

5.修改build/webpack.base.conf.js的入口配置

module.exports = {  entry: utils.entries(),...

6.修改build/webpack.dev.conf.js和build/webpack.prod.conf.js的多页面配置：把原有的页面模板配置注释或删除，并把多页面配置添加到plugins

webpack.dev.conf.js：

plugins: [    ......    //  new HtmlWebpackPlugin({    //    filename: 'index.html',    //    template: 'index.html',    //    inject: true    //  }),    ......  ].concat(utils.htmlPlugin())

webpack.prod.conf.js：

plugins: [    ......    // new HtmlWebpackPlugin({    //   filename: config.build.index,    //   template: 'index.html',    //   inject: true,    //   minify: {    //     removeComments: true,    //     collapseWhitespace: true,    //     removeAttributeQuotes: true    //   },    //   chunksSortMode: 'dependency'    // }),    ......  ].concat(utils.htmlPlugin())多页面应用创建完毕，在pages目录下创建应用对应的页面文件。