一個典型的項目結構
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 模式。（要服務端做相關配置）
