├── README.md            項(xiàng)目介紹
├── index.html           入口頁面
├── build              構(gòu)建腳本目錄
│  ├── build-server.js         運(yùn)行本地構(gòu)建服務(wù)器，可以訪問構(gòu)建后的頁面
│  ├── build.js            生產(chǎn)環(huán)境構(gòu)建腳本
│  ├── dev-client.js          開發(fā)服務(wù)器熱重載腳本，主要用來實(shí)現(xiàn)開發(fā)階段的頁面自動刷新
│  ├── dev-server.js          運(yùn)行本地開發(fā)服務(wù)器
│  ├── 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             項(xiàng)目配置
│  ├── dev.env.js           開發(fā)環(huán)境變量
│  ├── index.js            項(xiàng)目配置文件
│  ├── prod.env.js           生產(chǎn)環(huán)境變量
│  └── test.env.js           測試環(huán)境變量
├── mock              mock數(shù)據(jù)目錄
│  └── hello.js
├── package.json          npm包配置文件，里面定義了項(xiàng)目的npm腳本，依賴包等信息
├── src               源碼目錄  
│  ├── main.js             入口js文件
│  ├── app.vue             根組件
│  ├── components           公共組件目錄
│  │  └── title.vue
│  ├── assets             資源目錄，這里的資源會被wabpack構(gòu)建
│  │  └── images
│  │    └── logo.png
│  ├── routes             前端路由
│  │  └── index.js
│  ├── store              應(yīng)用級數(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ā)服務(wù)器，監(jiān)控項(xiàng)目文件的變化，實(shí)時(shí)構(gòu)建并自動刷新瀏覽器，瀏覽器訪問 http://localhost:8081
npm run dev

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

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

#運(yùn)行單元測試
npm run unit

module.exports = {

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

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

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

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