生成專案目錄

單頁應用(SPA)

單頁Web應用（single page web application，SPA），就是將系統所有的操作互動限定在一個web頁面中。單頁應用程式 (SPA) 是載入單個HTML頁面，系統的不同功能通過載入不同功能元件的形式來切換，不同功能元件全部封裝到了js檔案中，這些檔案在應用開始訪問時就一起載入完，所以整個系統在切換不同功能時，頁面的地址是不變的，系統切換可以做到區域性重新整理，也可以叫做無重新整理，這麼做的目的是為了給使用者提供更加流暢的使用者體驗。

使用vue自動化工具可以快速搭建單頁應用專案目錄。該工具為現代化的前端開發工作流提供了開箱即用的構建配置。只需幾分鐘即可建立並啟動一個帶熱過載、儲存時靜態檢查以及可用於生產環境的構建配置的專案：

// 生成一個基於 webpack 模板的新專案  my-project:專案名稱
vue init webpack my-project

// 啟動開發伺服器 ctrl+c 停止服務
cd my-project
npm install
npm run dev

專案目錄結構說明

需要關注的是上面標註的三個目錄：

• 資料夾1(src)，主開發目錄，要開發的單檔案元件全部在這個目錄下
• 資料夾2(static)，靜態資源目錄，所有的css，js檔案放在這個資料夾
• 資料夾3(dist)，專案打包釋出資料夾，最後要上線單檔案專案檔案都在這個資料夾中

還有node_modules目錄是node的包目錄，config是配置目錄，build是專案打包時依賴的目錄。

頁面結構說明

整個專案是一個主檔案index.html,index.html中會引入src資料夾中的main.js,main.js中會匯入頂級單檔案元件App.vue,App.vue中會通過元件巢狀或者路由來引用components資料夾中的其他單檔案元件。

元件巢狀

將單檔案元件組合在一起有兩種方式，一種是巢狀方式，一種用路由的方式。巢狀的方式程式碼如下：

下圖示中，假設元件A中要嵌入元件B

<template>

    // 在A元件中使用B元件
    <B_zujian></B_zujian>
</template>


<script
 
>
// 先匯入B元件，其中'@'表示src目錄，元件後的vue副檔名可以省略
import B_zujian from '@/components/B_zjian'

export default{
    name:'A_zujian',
    data:function(){
        return {
            iNum:0
        }
    },
    // 接著在components屬性選項中註冊
    components:{
        B_zujian
    }
}


</script>

路由

可以通過路由的方式在一個元件中載入其他元件，要使用路由功能，需要在main.js中先匯入路由的包,然後在元件物件中還需要包含它。

import router from './router'

new Vue({
    .....
    router
})

元件中通過路由標籤來載入其他的路由

<!-- 路由標籤 -->
<router-view></router-view>

<!-- 簡寫成下面一個標籤的形式： -->
<router-view/>

路由標籤裡面載入哪個元件呢？在router檔案中的index.js檔案中設定

import Vue from 'vue'
import Router from 'vue-router'

// 匯入對應元件 '@' 表示src資料夾
import MainList from '@/components/MainList'
import UserList from '@/components/UserList'
import UpDate from '@/components/UpDate'

// 使用路由模組的固定寫法
Vue.use(Router)

// path為'/'表示路由預設載入的元件
// 這些路由預設設定的是App.vue中的路由標籤載入的元件
export default new Router({
  routes: [
    {
      path: '/',
      name: 'MainList',
      component: MainList
    },
    {
      path: '/user',
      name: 'UserList',
      component: UserList
    },
    {
      path: '/update',
      name: 'UpDate',
      component: UpDate
    }
  ]
})

通過連結可以切換路由標籤裡面對應的元件，連結的地址是上面index.js檔案中定義的path值，不過連結標籤是”router-link”,連結地址用’to’來定義：

<router-link to="/">股票資訊</router-link>
<router-link to="/user">個人中心</router-link>

連結地址中可以傳遞引數，格式如下：

// name對應的是路由中定義的一個path對應的name屬性
<router-link :to='{name:"UpDate",params:{code:item.code}}'>

有時候需要在元件的js中跳轉頁面，也就是改變路由，改變路由有下面這些方式：

// 當前頁面重新載入
// -1指的是瀏覽器記錄的上一步
this.$router.go('-1');

// 跳轉到另外一個路由
this.$router.push({path:'/user'});

// 獲取當前的路由地址
var sPath = this.$route.path;

資料請求及跨域

資料請求

資料請求使用的是ajax，在vue中使用的axios.js，這個檔案可以在index.html檔案中引入，也可以作為模組匯入，在main.js中匯入這個模組，然後將它繫結在Vue類的原型上。

import axios from 'axios'
Vue.prototype.axios = axios

在元件的js程式碼中使用axios：

this.axios({......})

跨域請求

vue的自動化工具提供了開發的伺服器，我們在這個伺服器環境下開發，改動程式碼可以馬上更新顯示，錯誤了還有程式碼提示，非常方便，但是，如果我們元件中需要資料，而且資料在另一個伺服器環境下執行，我們就需要跨域請求資料，vue工具中可以使用代理來跨域請求，設定的方法是：在專案的config資料夾中，開啟index.js,在proxyTable一項中設定：

// 'http://localhost:7890' 表示的是要跨域請求的地址
// 如果請求的地址是：'http://localhost:7890/index_data'
// 在請求時就可以寫成: '/apis/index_data'

'/apis': {
    target: 'http://localhost:7890', 
    changeOrigin: true,
    pathRewrite: {
        '^/apis': ''
    }              
}

打包上線

專案開發完成後，需要把請求資料的代理地址改成和提供資料的伺服器在同一個域的地址，因為最終會把前端程式碼放在和資料在同一個域的伺服器下面執行。

// 將下面的請求地址
'/apis/index_data'

// 改成
'/index_data'

改完請求地址後，就可以將程式碼打包，生成最終可以上線的單檔案結構：

// 開啟終端，ctrl+c停掉開發伺服器，執行下面的命令

npm run build

自動化程式會將打包的檔案自動生成到專案的dist資料夾中。

將這些檔案拷貝到提供資料服務的伺服器的靜態目錄資料夾中，完成最終的上線！