详解vue-cli + webpack 多页面实例应用

关于vue.js

vue.js是一套构建用户界面的 轻型的渐进式前端框架。它的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。使用vue可以给你的开发带来极致的编程体验。

关于vue-cli

Vue-cli是vue官方提供的一个命令行工具（vue-cli），可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

疑问

vue-cli主要是用于构建单页应用的脚手架，但是现实项目中，大部分项目都是多页的，怎么样可以很好的利用这一套官方配置呢？我在网上找了一下， 几乎找不到vue多页应用实例，所以才有基于vue-cli生成的单页应用进行改造。

代码地址：

Github：https://github.com/breezefeng/vue-cli-multipage

使用方法

# install dependenciesnpm install# serve with hot reload at localhost:8080/module/index.htmlnpm run dev# build for production with minificationnpm run build

目录结构

vue-cli-multipage |---build |---config |---src  |---assets   |---img 图片文件   |---css 样式文件   |---font 字体文件     |---components 组件   |---Button.vue 按钮组件   |---Hello.vue  |---module   |---index 首页模块    |---index.html    |---index.js    |---App.vue   |---detail 详情页模块    |---detail.html    |---detail.js    |---App.vue

从目录结构上，各种组件、页面模块、资源等都按类新建了文件夹，方便我们储存文件。

其实我们所有的文件，最主要都是放在module文件夹里，以文件夹名为html的名称。

例如：

|---index 首页模块 |---index.html |---index.js |---App.vue

此时我们访问的链接是：http://localhost:8080/module/index.html

这里一定要注意，在module里下级文件夹里需要将html，js，vue template 都统一放在当前文件夹里，当然你也可以继续放其他的资源，例如css、图片、组件等，webpack会打包到当前页面里。

如果项目不需要这个页面了，可以把这个文件夹直接删除掉，干净利落，干活也开心。

像以前传统的开发项目，所有的图片都习惯放在images里，当项目有改动时，有些图片等资源用不上了，但还占着坑位，导致项目越来越大，虽然现在的硬件容量大到惊人，但我们应该还是要养到一个良好的习惯。

组件的使用

组件（Component）是 vue.js 最强大的功能之一，当你发现使用组件可以减少造轮子里，你会深深的爱上它。

我们的组件都是放在components目录下的，调用组件的方法也很简单。

import Hello from 'components/Hello'