技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-2.啟動項目

1.項目初始化

項目分為三端。

1.項目前台web端，也就是呈現給使用者的端口和頁面。

2.項目管理背景admin端，供管理人員使用的端口和頁面，用來實作資料的更新和維護。

3.服務端server端，供前後端開發調用接口的端口。

我們将三端内容建立，并将我們需要的工具包在npm工具中安裝下來。

首先在桌面或其它非中文路徑建立一個檔案夾mine-node

在vscode打開此檔案夾

如果界面沒有終端視窗，在菜單欄"檢視"中點選終端，把這個視窗召喚出來：）

建立server端

1.面闆輸入mkdir server，服務端不用使用前端架構，直接建立項目檔案夾即可。

2.進入server檔案夾（cd server）。

3.初始化項目（npm init -y）。

4.根據初始化後生成的package.json檔案中可看到已經設定好的關于main的入口檔案index.js，針對此我們在server檔案夾建立一個index.js入口檔案。

5.每次我們調用接口時都需要啟動服務端，要想啟動服務端就需要通過這個index.js入口檔案進行server項目啟動。

此時在package.json的scripts中設定：

{
  "scripts": {
    "serve": "nodemon index.js",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
}           

6.nodemon是啟動node項目的工具，在終端面闆輸入npm i -g nodemon，-g是全局安裝，因為所有項目啟動基本都需要這個工具。

7.安裝nodemon并且在package.json設定成功後，就可以在終端輸入npm run serve啟動服務端項目了。

8.根據界面生成的端口号，浏覽器進入頁面即可。

使用場景：mine-node項目中

cd server

npm run serve

server端後續子產品見文章——技能學習：學習使用Node.js + Vue.js，開發前端全棧網站-4.使用axios，并建立接口上傳資料到mongodb資料庫

建立web端

由于我們使用vue開發web端，是以使用vue建立該web端項目。

1.終端輸入npm i -g @vue/cli，安裝vue腳手架。

2.終端輸入vue create web回車，安裝web項目檔案夾。

選擇版本預設安裝再次回車即可，沒用過vue的朋友就下載下傳2x，時間久網上解答多。

如果安裝過程出現npm報錯，把vscode關閉，右鍵以管理者身份運作。

3.安裝完成後，web端的項目初始化就完成了，開啟端口的方式與server端相同（npm run serve）。

4.根據界面生成的端口号，浏覽器進入頁面即可。

建立admin端

與web端相同建立過程。

2.安裝淘寶鏡像

上篇文章說到npm是從國外位址下載下傳檔案，是以我們需要使用國内的淘寶鏡像提升下載下傳速度，并且更穩定。

1.終端輸入安裝指令：

npm config set registry https://registry.npm.taobao.org           

2.終端驗證是否安裝成功指令：

npm config get registry           

3.關于cnpm

阿裡巴巴的淘寶團隊把NMP官網的檔案、插件包都同步到了在中國的伺服器，提供給我們從這個伺服器上穩定下載下傳資源。于是cnpm插件就誕生了，意思就是中國的npm。

1.cnpm的作用與npm的淘寶鏡像功能相似，也是提供安全、穩定、快速的下載下傳環境。

2.在npm上下載下傳檔案有時會失敗，使用cnpm會成功，但是這種情況非常少，而且在網上就能找到失敗原因（多數情況是因為npm大神上傳了新的安裝方式，或更新插件時出了bug）。

3.使用cnpm前最好把npm解除安裝，這兩者是不可以混用的。

4.其實我們隻要安裝了淘寶鏡像，下載下傳速度就已經提升，而且不需要再進行npm的替換。

是以在這裡我就不展示cnpm的安裝方法來，大家有需求百度一下很容易就能給大家解決。