Vue開源項目使用探索

前言

本文記錄一次使用Vue開源項目的過程。

尋找Vue開源項目

要使用Vue開源項目就必須先找到一個，我們去Github上搜索【后台】，然后使用Vue分類進行檢索，找到排名第一的開源框架進行下載—vue-framework-wz

然后新建一個文件夾，將下載解壓后的文件放進去，如下圖：

運行項目

運行CMD，輸入【cd /d F:\Vue\vue-framework-wz-master】

然后輸入【npm install】 ，如下圖：

然后耐心等待其下載依賴項。

然后，得到結果缺少Python環境，安裝失敗。。。

解決方案：先安裝windows-build-tools——windows構建工具，如下。

npm install --global --production windows-build-tools
npm install -g node-gyp

安裝windows-build-tools時需要使用【管理員權限的CMD】，不然會提示【Please restart this script from an administrative PowerShell!】

安裝完windows-build-tools和node-gyp后，從新運行一個管理員權限的CMD窗口，再從新運行【F:\Vue\vue-framework-wz-master>npm install】初始化項目。

npm run dev

初始化成功后，運行npm run dev，啟動nodejs的服務器，運行網站，結果如下圖：

輸入賬號密碼，進入后台管理頁面，如下圖：

注：想要CMD執行npm開頭的命令，需要先安裝Nodejs。

調試項目

首先我們安裝Visual Studio Code，然后使用文件—打開文件夾，然后找到我們剛才的項目路徑，然后打開項目。

然后找到后台首頁默認顯示的儀表盤的網頁，如下圖：

然后修改頁面的Header。

然后重新回到剛剛的網頁。

即不用重啟Nodejs服務器，也不用編譯，可以看到我們的修改內容已經被更新了。

Vue項目目錄學習參考網址—https://www.runoob.com/vue2/vue-directory-structure.html

----------------------------------------------------------

到此Vue開源項目使用探索結束。

----------------------------------------------------------

注：此文章為原創，任何形式的轉載都請聯系作者獲得授權並注明出處！
若您覺得這篇文章還不錯，請點擊下方的【推薦】，非常感謝！

https://www.cnblogs.com/kiba/p/13596436.html