一个典型的项目结构
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 模式。（要服务端做相关配置）
