單頁應用(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
2
3
4
5
6
7
項目目錄結構說明
需要關注的是上面標注的三個目錄：
文件夾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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
路由
可以通過路由的方式在一個組件中加載其他組件，要使用路由功能，需要在main.js中先導入路由的包,然后在組件對象中還需要包含它。
import router from './router'
new Vue({
.....
router
})
1
2
3
4
5
6
組件中通過路由標簽來加載其他的路由
<!-- 路由標簽 -->
<router-view></router-view>
<!-- 簡寫成下面一個標簽的形式： -->
<router-view/>
1
2
3
4
5
路由標簽里面加載哪個組件呢？在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
}
]
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
通過鏈接可以切換路由標簽里面對應的組件，鏈接的地址是上面index.js文件中定義的path值，不過鏈接標簽是”router-link”,鏈接地址用’to’來定義：
<router-link to="/">股票信息</router-link>
<router-link to="/user">個人中心</router-link>
1
2
鏈接地址中可以傳遞參數，格式如下：
// name對應的是路由中定義的一個path對應的name屬性
<router-link :to='{name:"UpDate",params:{code:item.code}}'>
1
2
有時候需要在組件的js中跳轉頁面，也就是改變路由，改變路由有下面這些方式：
// 當前頁面重新加載
// -1指的是瀏覽器記錄的上一步
this.$router.go('-1');
// 跳轉到另外一個路由
this.$router.push({path:'/user'});
// 獲取當前的路由地址
var sPath = this.$route.path;
1
2
3
4
5
6
7
8
9
數據請求及跨域
數據請求
數據請求使用的是ajax，在vue中使用的axios.js，這個文件可以在index.html文件中引入，也可以作為模塊導入，在main.js中導入這個模塊，然后將它綁定在Vue類的原型上。
import axios from 'axios'
Vue.prototype.axios = axios
1
2
在組件的js代碼中使用axios：
this.axios({......})
1
跨域請求
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': ''
}
}
1
2
3
4
5
6
7
8
9
10
11
打包上線
項目開發完成后，需要把請求數據的代理地址改成和提供數據的服務器在同一個域的地址，因為最終會把前端代碼放在和數據在同一個域的服務器下面運行。
// 將下面的請求地址
'/apis/index_data'
// 改成
'/index_data'
1
2
3
4
5
改完請求地址后，就可以將代碼打包，生成最終可以上線的單文件結構：
// 打開終端，ctrl+c停掉開發服務器，執行下面的命令
npm run build
1
2
3
自動化程序會將打包的文件自動生成到項目的dist文件夾中。
將這些文件拷貝到提供數據服務的服務器的靜態目錄文件夾中，完成最終的上線！
————————————————
版權聲明：本文為CSDN博主「Step_Top」的原創文章，遵循 CC 4.0 BY-SA 版權協議，轉載請附上原文出處鏈接及本聲明。
原文鏈接：https://blog.csdn.net/qq_41333582/article/details/82706262