用 Vue + vue-router + Webpack 构建单页 Web APP (SPA)

一个典型的项目结构

Vue SPA Project Structure

项目结构说明

• main.js
  • 声明 Vue 项目的依赖。
  • 声明 Vue 项目的入口（ DOM 挂载点）。
  • Vue 插件的基本设置。
• router.js
  • 配置路由规则
• 关于 CSS 的一些说明
  • 业务型 CSS：单独写成 CSS 文件，并放在 styles 目录内。
  • 局部 CSS：写在组件模板内，在 �<style> 标签上加上 scoped 以锁定作用域。如果需要用到全局 CSS，使用 @import 引入。
  • 功能型 CSS（比如 transition 相关的配置）：和组件放在一起。

Webpack 配置

• webpack.base.config
  • 指定应用程序入口 entry
  • 指定打包出口 output
  • 指定模板 module
    • 指定加载器 loaders
  • 如果使用了 babel, 配置 babel
  • 配置解析器 resolve
  • 声明 plugins
• webpack.dev.config
  • 配置各种插件在开发环境下的参数
  • 设置热加载路径 / 热加载规则
• webpack.prod.config
  • 配置各种插件在生产环境下的参数

Vue SPA 模板

传送门：iView Project (基于 Vue.js 1.0)
传送门：vue-cli

npm 相关配置

• 使用 webpack-dev-server 动态刷新。

// scripts:
"dev": "webpack-dev-server --port 8088 --inline --hot --compress --history-api-fallback --config webpack.dev.config.js",
"build": "webpack --progress --hide-modules --config webpack.prod.config.js",

补充：SPA 实现 Router 的两种方式

• 利用 URL 的 hash，即锚点( # )，JavaScript 通过 hashChange 事件监听 URL 的改变（在 IE7 下使用轮询）。
• HTML5 的 History 模式。（要服务端做相关配置）