在项目初期时，从零开始搭建和配置本地前端开发环境是一项很繁琐的工作，需要考虑到项目目录结构、项目基本配置、Webpack 配置等等。通过 Vue CLI 3 可以快速的生成一个项目，这样我们就可以专注在写应用上，而不必将大量时间花费在配置上。但是官方的 vue create 命令只能快速地建立一个单页应用的原型，想要开发多页应用还需要再配置一些东西。可同时支持less,sass。
说明
Vue CLI 3 多页应用项目**Git地址: 。
初始化
git clone https://github.com/zydemail/vue-mpa.gitcd vue-mpanpm install
使用
- 开发：
本地运行：npm run serve:dev 注：本地开发调试服务器接口需开启浏览器跨域，可在 Chrome 应用商店安装 Allow CORS: Access-Control-Allow-Origin 插件即可解决
修复代码格式错误：npm run lintfix- 打包：
开发环境: npm run dev
测试环境: npm run build:tests生产环境: npm run build:prod目录结构说明
│ .browserslistrc // 配置目标浏览器│ .env.development // 开发环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量│ .env.localdev // 本地开发环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量│ .env.production // 生产环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量│ .env.tests // 测试环境配置，可在此配置全局变量，使用 process.env 读取，打包工具会根据不同环境自动读取变量│ .eslintrc.js // eslint 配置│ .gitignore│ .postcssrc.js // postcss配置，一般不会用到，使用默认值│ babel.config.js // babel配置，一般不会用到，使用默认值│ package-lock.json│ package.json│ README.md│ title.js // 统一配置生成页面的 title│ vue.config.js // vue 配置，可配置 webpack 等，可参照 https://cli.vuejs.org/zh/config/│ ├─public // 此文件夹下可以放置一些静态资源，除了index.html会经过处理外，其他文件都会原封不动的自动复制到 htdocs 根目录下，不会经过 webpack 的处理。│ favicon.ico│ index.html // 所有的打包页面都会经过这个文件，本模板对多页的配置采用了统一处理，当然也可以在 vue.config.js 单独配置每个页面，可参照 https://cli.vuejs.org/zh/config/#pages│ ├─src // 源代码文件夹│ ├─assets // 资源文件夹，可放置 css、images等│ │ logo.png│ │ │ ├─components // 组件文件夹，可定义一些公共组件│ │ Header.vue│ │ │ ├─pages // 页面文件夹，每个页面都是一个文件夹│ │ ├─about // about 页面│ │ │ app.js // 一般不做更改│ │ │ app.vue // 页面的 html、css、js 都写在这个文件里│ │ │ │ │ ├─index│ │ │ app.js│ │ │ app.vue│ │ │ │ │ └─user│ │ └─index│ │ app.js│ │ app.vue│ │ │ ├─style // 公共样式文件夹，可以定义一些公共样式，如浏览器重置样式 reset.less，此文件夹可按需求随意更改 │ │ │ index.less│ │ │ │ │ └─core│ │ index.less│ │ reset.less│ │ │ └─utils // 常用 js 工具类│ └─core│ http.js // http 请求库，封装 axios，可直接调用│ └─tests // 单元测试，可忽略 └─unit .eslintrc.js