本章講述windows系統如何安裝vue并且配置到nginx環境下
一、安裝nodejs 官網:Node.js
下載完成后需要記住安裝的路徑,其余直接下一步即可
我安裝的路徑是D:\nodejs

二、設定node_global和node_cache
1.在安裝的nodejs根目錄下新建node_global和node_cache
2.新建后需要設定兩檔案分別執行
npm config set prefix "D:\nodejs\node_global"
npm config set cache "D:\nodejs\node_cache"
3.設定成功后我們用 npm install xxx -g 安裝的東西都會在 根目錄下的modules目錄下
三、安裝cnpm
1.用淘寶鏡像安裝
參考地址:http://npm.taobao.org/
原因:因為有許多包是國外的不設定國內鏡像,npm的時候會很慢
npm install -g cnpm --registry=https://registry.npm.taobao.org
四、設定環境變數
1.桌面此電腦-->右鍵屬性--->高級系統設定--->環境變數--->用戶變數--->PATH
注意:如果是windows7 用戶設定環境變數時需要用分號隔開如“ D:\nodejs\node_modules; ”

2.新建NODE_PATH

五、cnpm 安裝 vue
cnpm install -g vue
六、安裝vue腳手架
cnpm install -g @vue/cli
七、在nodejs根目錄下新建專案
vue create test
或者
vue init create-project test
//執行后進入test目錄
cd test
//運行vue專案
cnpm run serve
//運行專案后build專案
cnpm run build
//build專案后會在test目錄下生成dist
八、配置nginx這里推薦用phpstudy小皮面板,是一個比較簡單的繼承環境
官網:https://public.xp.cn/upgrades/phpStudy_64.zip
1.安裝完成后需要配置訪問目錄

2.點擊配置后跳轉到如下界面,然后將上面生成的dist復制到www目錄下

九、配置網站域名
1.點擊左側欄的網站

2.域名配置如下

注意:一定要勾選同步到hosts檔案
在本機地址 :c:\Windows\System32\drivers\etc\hosts 檔案中的配置就會顯示如下

這樣便可以訪問
本期就到這里感謝大家觀看!!!
轉載請註明出處,本文鏈接:https://www.uj5u.com/ruanti/301917.html
標籤:其他
上一篇:網頁內容優化(減少HTTP請求、減少DNS查詢、避免頁面多次跳轉、快取AJAX、延遲和提前加載、根據域名劃分內容減少iframe數量、避免404)
下一篇:HTTP與HTTPS的區別、對稱加密和非對稱加密、什么是數字證書、DNS 決議程序、TCP和UDP的區別、HTTP的特點TCP 和 UDP 對應的應用場景
