（三）搭建前端—Vue生態

在前端這塊，涉及的有nodejs、webpack、Git、babel等等等等，好吧，當時我也是一臉懵逼，不過如今就行了那麼一點了，那咱就直接上手吧

 

一、安裝nodejs，至於爲何安裝nodejs，前面也說了，只是爲了使用裏面自帶的npm包管理工具而已，如今這個時候深刻nodejs無異於找死（每次用中文輸入法輸入npm，第一個顯示「你怕嗎」，我擦，我真的好怕，不信？）

　　　　直接上官網安裝吧，官網傳送門（我仍是先我電腦上的nodejs刪了吧，還原最真實現場）

　　　　基本上無腦安裝，下一步，下一步，等等，誰要是又安裝在C盤，那你就等着吧！！！

檢查一下nodejs安裝成功沒，win+R，輸入cmd，再輸入node -v,顯示版本號就表示安裝成功了

再來看看咱們要的npm（你怕嗎？）

 

好的，完美，可是如今咱們須要從Windows自帶的命令行轉到Git上，你說爲何？一，爲了裝逼，二，仍是爲了裝逼，三，Git也具備命令行的功能，並且有五光十色的黑，那就來安裝Git吧

Git安裝傳送門->選擇windows(好吧，我又要卸載個人Git了，心痛)

 基本上也是無腦安裝，你再敢放C盤？？！！，就是下面這個界面了，五光十色的黑，在桌面或者任何一個文件夾裏右鍵就會有Git的身影

 

通常我只會用到Git bash here ，至於Git GUI Here是個Git界面，不推薦使用，畢竟不那麼裝逼

在桌面打開Git，輸入node -v和npm -v，效果跟在Windows命令行同樣的

可是這裏我推薦一下cnpm，這個跟npm是一毛同樣的，可是npm是在國外的，因此有時候下載速度會很慢，這個cnpm在網上說是npm的淘寶鏡像（應該是跟我想的淘寶有點關係的吧）

那就來安裝吧(看吧，我這裏用npm安裝cnpm就有點慢了)

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

 

 

看下cnpm是否安裝成功,看到cnpm@5.2.0就應該有點小激動了

好了，作了這麼多準備工做，該正式進入Vue了，在桌面打開Git

$cnpm install --global vue-cli（全局安裝vue-cli）
$vue init webpack my-project(建立一個基於 webpack 模板的新項目)

而後一路回車就好，如今先無論這些,這個vue-router就是咱們的vue的前端路由，固然選Y了

這個可能花費的時間比較長，由於要安裝相關的包

 完成後出現了「To get started」，那咱就按它說的作吧

 

$cd my-project
$cnpm run dev

 

 而後眼前閃過一堆代碼，最後一句，你所建立的應用已經在運行，能夠打開你的瀏覽器，輸入「http://localhost:8080」就能看到默認界面了

 

 

如今就找一找咱們建立的文件吧，在桌面上的某個地方，打開它，這裏推薦一款比較好的編輯器，sublime，之後我都會使用這個編輯器的

把這個文件拖到sublime裏去看下，文件的介紹我會稍後說

最後就是發佈了（這個跟webapi是同樣的）

$cnpm run build

 

 

發佈完後，會有提示說，該文件必須放到服務器上纔能有用，稍後再放進去吧 

 

而後你的項目文件夾會出現一個dist（distribution的縮寫）的文件，這個就是發佈後的文件，

 

而後把這個文件上傳到服務器上就行了，那麼問題來了，該怎麼上傳呢？

過了這麼久，你只記得

　　　　

卻獨獨忘了我，個人做用也挺大的啊，爲何要拋棄我…

 

打開WinSCP，輸入相關信息（常用的話，能夠點「save」），點擊login

 

而後就進來了，再回到根目錄，一直點箭頭指向的地方

原則上放到服務器上任何一個地方均可以，可是咱們就必定要有規範，那我們就放到var文件夾吧，在進入www文件夾，

這個……aspnetcore有點熟悉啊，不就是咱們在.net core 建立的網站嗎，沒錯啦，而後我們就在這裏新建一個wwwroot文件，來放網頁文件吧

空白處右鍵->new->Diretcory,輸入wwwroot，ok

我……這不是很尷尬，不怕，稍微懂點英語就知道「Permission denied」的意思，沒權限，那怎麼搞呢？

回到putty，我putty又回來了，哈哈哈哈

root@ubuntu:/# chmod -R 777 /var/www

 

稍微解釋一下：

chmod：權限管理的關鍵字

-R：做用於指定目錄及其子目錄下全部文件

777：全部權限

/var/www：要指定的目錄

而後在會到WinSCP,點擊"Retry"（重試），而後就不會報錯了

進入wwwroot，空的（廢話），而後再把dist的裏面的東西放到這裏就好

那咱在在瀏覽器看下192.168.253.129？唉？不對啊，這不是我想要的啊，別急，還記得jexus嗎，咱們還須要在這裏配置一下呢

 

上次編輯jexus的siteconf的文件是在putty裏編輯的，如今有了WinSCP了，直接找到那個文件就好

可是這裏已經有個文件了，該怎麼辦呢？不要緊，代理服務器的做用就是可讓外部訪問代理服務器指定的端口，也就是說能夠在服務器上放多個網站。

首先複製粘貼這個default文件

右鍵default文件->Diplicate,修改一下名字就好

雙擊666，？？！！雙擊wwwroot

port=80
root=/ /var/www/wwwroot（網頁存放的路徑）
hosts=*    #OR your.com,*.your.com


# addr=0.0.0.0
# CheckQuery=false
NoLog=true
# AppHost={CmdLine= dotnet /var/www/aspnetcore/aspnetcoreapp.dll;AppRoot=/var/www/aspnetcore/;Port=0}（從新註釋掉這一行）
# NoFile=/index.aspx
# Keep_Alive=false
# UseGZIP=false

 

 最後既然配置好了，就要從新啓動jexus，讓新配置生效

root@ubuntu:/# sh /usr/jexus/jws restart

 

 而後再來看看192.168.253.129，啊哈，有效果了

到這裏，前端網頁部署到服務器上已經完成了，其中最主要的就是咱們在webapi和vue的開發了，或許有人會問，那我在數據庫的數據怎麼在前端展現呢？不急慢慢來，這麼多東西，其中確定會出錯的嗎，即便不出錯，把這些過程多練習幾遍，也會出錯的，相信我