目錄
1.簡介
2.如何使用vue.js
3.部署api服務器
4.vue.js路由配置
5.實現頁面加載數據
6.測試vue項目
7.在正式環境部署
8.Vue前端代碼下載
1.簡介
這是一個使用vue.js + mint-ui + .net core api的小說網站。
最近在學習vue.js，而拋開實踐的學習都是在裝逼，所以結合實際，准備做一個小說網站，這樣麻麻再也不用擔心我在看小說時被不良信息侵擾了哈哈。
首先說明一下，小說數據來源於網絡搜索，並不直接存儲於自己的服務器中，所以，這是一個實時爬小說數據的網站。
應為這里是要說vue.js的部署，所以具體的爬數據我是不會寫出來的，當然了，具體在哪里爬數據，我也不會說明，請大家諒解。
2.如何使用vue.js
vue.js的使用有兩種方式：
1.直接引用js
2.用vue cli生成vue項目
我覺得啊，第一種比較簡單，可以直接與現有項目結合，因為前后端都在一個項目中，所以服務器也只有一個。第二種比較復雜，需要安裝一些vue.js的環境，然后生成獨立的前端項目，所以部署的時候，需要一個前端服務器和一個后端api服務器，所以需要兩個服務器。
不過，為了學習vue，我在這里用的是第二種方式。那么對於一個新手，我們要怎么入門呢？
ps：博主使用的環境是windows 10
1.首先，我們安裝Visual Studio Code，用VsCode來開發vue項目，下載地址：https://code.visualstudio.com/
2.安裝Node.js，因為我們需要使用npm進行編譯，下載地址：http://nodejs.cn/download/
3.安裝完VsCode和Node.js后，我們打開VsCode，點擊“新建終端”，如下圖：
在終端命令行中輸入命令安裝cnpm（中國的npm鏡像）：npm install -g cnpm --registry=https://registry.npm.taobao.org
ps：如果下面的命令無法執行，請將所有npm改為cnpm。
4.安裝vue編譯器vue-cli，在終端中輸入命令：npm install -g vue-cli
5.安裝webpack並初始化目錄，在終端中輸入命令：vue init webpack C://MyFirstVueProject
PS:這一步你會發現，在MyFirstVueProject文件夾中，多出了許多文件，這些文件也就構成了你的vue項目
6.進入項目文件夾，在終端中輸入命令：cd C://MyFirstVueProject
7.安裝mint-ui，在終端中輸入命令：npm i mint-ui --save
8.更新所有npm包，在終端中輸入命令：npm install
以上的步驟完成后，你就可以打開VsCode，開始對你的vue項目開發了(vue開發文檔)。貼一張我的項目結構圖：
3.部署API服務器
因為前后端是兩個服務器，所以，這里我們還需要一個api項目，向前端提供數據支持，這里我用的是.net core，代碼就不寫了。
先看看項目結構和搜索功能的控制器吧：
所以，我其實只提供了3個api：
查詢： /api/SearchNovel/{text}
小說目錄：/api/getcategory/{category}/{guid}
正文：/api/readnovel/{category}/{guid}/{pageGuid}
編譯完成后，部署到服務器中，如圖：
以上數據是后面會用到的。
4.vue.js路由配置
現在，我們繼續我們的vue開發吧~
看到上面我的vue項目結構了吧，已經有了一些vue頁面了
現在，我們要配置路由，使url匹配上頁面，讓頁面跳轉正常進行。
具體配置如下：
在右邊的代碼中，我注釋掉了一個mode屬性，它的值是history。
一開始使用history是因為url中會出現#符號，如下圖：
因為覺得這個難看，所以將mode值設置成了history。然而這么設置之后，又出現了新的問題。在我閱讀小說的時候，如果將該頁面保存成書簽，通過書簽再進來，發現出現404錯誤，為什么？
原來是因為這個url是個假地址，直接通過url進來，因為當前頁面沒有路由信息，所以會導致404的問題。於是乎，我將此段代碼注釋掉了。算了，難看就難看點吧。
還有一個要划重點，那就是代碼中scrollBehavior屬性，按照圖中設置，可以使頁面跳轉后，滾動條始終保持在頂端。
5.實現頁面加載數據
路由配置完了，說明頁面可以正常跳轉了，接下來該是數據的顯示了，話不多說，直接上圖，紅框標注重點~，我們以小說正文頁面為例：
created是頁面加載時會調用的方法，在這里，我們去獲取數據就可以了。
但是在點擊下一頁后，頁面的位置好像不對，不是在最頂端，前面不是說過在路由設置屬性就可以了嗎？其實還少了一步，如下圖：
6.測試vue項目
這里，我們需要將api服務器ip給設置一下，如下圖：
我們通過proxyTable進行請求轉發，將以/api/開頭的請求，全部轉發到localhost:5001上， 因為這個是https的，所以需要設置secure。
然后在終端中輸入命令：npm run dev
項目就能運行了，終端會出現網站地址。
7.在正式環境部署
正式環境與測試環境不同，正式環境不能使用proxyTable，如此一來，我們要通過相同url來解決跨域，就需要用到一些請求轉發的工具，這里我用的是nginx。
1.部署vue站點
1.先在IIS中配置一個站點
在終端中輸入命令：npm run build
將項目的dist文件夾中的所有內容復制到站點根目錄。
2.使用nginx轉發請求
為什么要轉發請求？
答：為了避免數據來源與頁面來源不一致，出現跨域的問題。
PS：這里我並沒有處理cookie的問題，因為沒有用到，有cookie需求請自行百度。
首先我們下載一個nginx的zip文件，解壓。
修改conf文件夾下的配置文件，如圖：
3.效果預覽
訪問10.1.73.14:1800即可
8.Vue前端代碼下載
你們不能怪我沒傳到博客園，這個要博客園背鍋，我是有證據的，如下圖！
然后我就去csdn傳了，需要1積分下載，嗯，這也不能怪我，csdn去背鍋吧！
下載地址：https://download.csdn.net/download/u010418661/10776344
我的博客即將同步至騰訊雲+社區，邀請大家一同入駐：https://cloud.tencent.com/developer/support-plan?invite_code=3ckelci0aw4kk