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開源項目使用探索結束。

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

注：此文章爲原創，任何形式的轉載都請聯繫做者得到受權並註明出處！
若您以爲這篇文章還不錯，請點擊下方的【推薦】，很是感謝！

http://www.javashuo.com/article/p-vpibtaqx-nh.html