├── README.md            項目介紹
├── index.html           入口頁面
├── build              構(gòu)建腳本目錄
│  ├── build-server.js         運行本地構(gòu)建服務器，可以訪問構(gòu)建后的頁面
│  ├── build.js            生產(chǎn)環(huán)境構(gòu)建腳本
│  ├── dev-client.js          開發(fā)服務器熱重載腳本，主要用來實現(xiàn)開發(fā)階段的頁面自動刷新
│  ├── dev-server.js          運行本地開發(fā)服務器
│  ├── utils.js            構(gòu)建相關(guān)工具方法
│  ├── webpack.base.conf.js      wabpack基礎(chǔ)配置
│  ├── webpack.dev.conf.js       wabpack開發(fā)環(huán)境配置
│  └── webpack.prod.conf.js      wabpack生產(chǎn)環(huán)境配置
├── config             項目配置
│  ├── dev.env.js           開發(fā)環(huán)境變量
│  ├── index.js            項目配置文件
│  ├── prod.env.js           生產(chǎn)環(huán)境變量
│  └── test.env.js           測試環(huán)境變量
├── mock              mock數(shù)據(jù)目錄
│  └── hello.js
├── package.json          npm包配置文件，里面定義了項目的npm腳本，依賴包等信息
├── src               源碼目錄  
│  ├── main.js             入口js文件
│  ├── app.vue             根組件
│  ├── components           公共組件目錄
│  │  └── title.vue
│  ├── assets             資源目錄，這里的資源會被wabpack構(gòu)建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              應用級數(shù)據(jù)（state）
│  │  └── index.js
│  └── views              頁面目錄
│    ├── hello.vue
│    └── notfound.vue
├── static             純靜態(tài)資源，不會被wabpack構(gòu)建。
└── test              測試文件目錄（unit&e2e）
  └── unit              單元測試
    ├── index.js            入口腳本
    ├── karma.conf.js          karma配置文件
    └── specs              單測case目錄
      └── Hello.spec.js

npm install -g cnpm --registry=https://registry.npm.taobao.org

git clone https://github.com/hanan198501/vue-spa-template.git 
cd vue-spa-template
cnpm install
npm run dev

#開啟本地開發(fā)服務器，監(jiān)控項目文件的變化，實時構(gòu)建并自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081
npm run dev

#使用生產(chǎn)環(huán)境配置構(gòu)建項目，構(gòu)建好的文件會輸出到 "dist" 目錄，
npm run build

#運行構(gòu)建服務器，可以查看構(gòu)建的頁面
npm run build-server

#運行單元測試
npm run unit

module.exports = {

 // 接口地址
 api: '/api/hello',

 // 返回數(shù)據(jù) 參考http://expressjs.com/zh-cn/4x/api.html
 response: function (req, res) {
  res.send(`
   <p>hello vue!</p>
  `);
 }
}

app.vue             根組件（整個應用只有一個）
  ├──view1.vue          頁面級組件，放在 views 目錄里面，有子組件時，可以建立子目錄
  │  ├──component1.vue        功能組件，公用的放在 components 目錄，否則放在 views 子目錄
  │  ├──component2.vue
  │  └──component3.vue
  ├──view2.vue
  │  ├──component1.vue
  │  └──component4.vue
  └──view3.vue
    ├──component5.vue
    ……

# 172.16.36.90:8083 為后端機器的環(huán)境地址
npm run dev -- --proxy=172.16.36.90:8083