如何執行vue專案

2021-09-29 10:12:49 字數 2308 閱讀 3330

在師兄的推薦下入坑vue.js ,發現不知如何執行github上的開源專案,很尷尬。通過查閱網上教程,成功搭建好專案環境,同時對前段工程化有了朦朦朧朧的認知,因此將環境搭建過程分享給大家。

可以看下我的github: ,裡面有我學習、工作寫的一些vue專案。

言歸正傳~~

首先,列出來我們需要的東西:  

安裝node.js

安裝完成之後,開啟命令列工具,輸入 node -v,如下圖,如果出現相應的版本號,則說明安裝成功。

npm包管理器,是整合在node中的,所以,直接輸入 npm -v就會如下圖所示,顯示出npm的版本資訊。

ok!node環境已經安裝完成,npm包管理器也有了。由於有些npm有些資源被遮蔽或者是國外資源的原因,經常會導致用npm安裝依賴包的時候失敗,所有我還需要npm的國內映象---cnpm。

在命令列中輸入 npm install -g cnpm --registry= 然後等待,安裝完成如下圖。

完成之後,我們就可以用cnpm代替npm來安裝依賴包了。如果想進一步了解cnpm的,檢視**npm映象官網。

在命令列中執行命令 cnpm install -g vue-cli ,然後等待安裝完成。(注意,這裡使用cnpm來替代npm,不然速度超級慢,會導致卡在那)

通過以上三部,我們需要準備的環境和工具都準備好了,接下來就開始使用vue-cli來構建專案。

要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。在這裡,我選擇桌面來存放新建的專案,則我們需要先把目錄cd到桌面,如下圖。

在桌面目錄下,在命令列中執行命令 vue init webpack firstvue 。解釋一下這個命令,這個命令的意思是初始化乙個專案,其中webpack是構建工具,也就是整個專案是基於webpack的。其中firstvue是整個專案資料夾的名稱,這個資料夾會自動生成在你指定的目錄中(我的例項中,會在桌面生成該資料夾),如下圖。

執行初始化命令的時候回讓使用者輸入幾個基本的選項,如專案名稱,描述,作者等資訊,如果不想填直接回車預設就好。

開啟firstvue資料夾,專案檔案如下所示。

這就是整個專案的目錄結構,其中,我們主要在src目錄中做修改。這個專案現在還只是乙個結構框架,整個專案需要的依賴資源都還沒有安裝,如下圖。

要安裝依賴包,首先cd到專案資料夾(firstvue資料夾),然後執行命令 cnpm install ,等待安裝。

安裝完成之後,會在我們的專案目錄firstvue資料夾中多出乙個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。

安裝完依賴包之後,就可以執行整個專案了。

在專案目錄中,執行命令 npm run dev ,會用熱載入的方式執行我們的應用,熱載入可以讓我們在修改完**後不用手動重新整理瀏覽器就能實時看到修改後的效果。

這裡簡單介紹下 npm run dev 命令,其中的「run」對應的是package.json檔案中,scripts欄位中的dev,也就是 node build/dev-server.js命令的乙個快捷方式。

專案執行成功後,瀏覽器會自動開啟localhost:8080(如果瀏覽器沒有自動開啟,可以手動輸入)。執行成功後,會看到如下所示的介面。

如果看到這個頁面,說明專案執行成功了。

如何執行vue專案

通過查閱網上教程,成功搭建好專案環境,同時對前段工程化有了朦朦朧朧的認知,因此將環境搭建過程分享給大家。首先,列出來我們需要的東西 安裝node.js從 安裝完成之後,開啟命令列工具,輸入 node v,如下圖,如果出現相應的版本號,則說明安裝成功。npm包管理器,是整合在node中的,所以,直接輸...

如何執行vue專案

在師兄的推薦下入坑vue.js 發現不知如何執行github上的開源專案,很尷尬。通過查閱網上教程,成功搭建好專案環境,同時對前段工程化有了朦朦朧朧的認知,因此將環境搭建過程分享給大家。可以看下我的github 裡面有我學習 工作寫的一些vue專案。言歸正傳 首先,列出來我們需要的東西 安裝node...

如何執行vue專案

首先,列出來我們需要的東西 安裝node.js 安裝完成之後,開啟命令列工具,輸入 node v,如下圖,如果出現相應的版本號,則說明安裝成功。npm包管理器,是整合在node中的,所以,直接輸入 npm v就會如下圖所示,顯示出npm的版本資訊。ok!node環境已經安裝完成,npm包管理器也有了...