vue專案環境搭建到啟動

2021-09-02 00:21:39 字數 2252 閱讀 2420

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

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

安裝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專案環境搭建

參考 1 安裝及執行 全域性安裝 vue cli cnpm install global vue cli 版本2 建立乙個基於 webpack 模板的新專案 vue init webpack my project 這裡需要進行一些配置,預設回車即可 cd my project cnpm instal...

搭建 vue專案環境

1.前期準備 1 檢測電腦是否安裝node.js 依次 開始 搜尋cmd 回車 或者用快捷鍵 windows r 然後在命令列輸入node v,按下回車鍵 如果出現 node 不是內部或外部命令,也不是可執行的程式 說明沒有安裝node.js 2 檢測node.js是否安裝成功 依次 開始 搜尋cm...

vue環境搭建,vue專案建立

vue這個新的工具,確實能夠提高效率,在經歷的一段時間的摧殘之後,終於能夠有乙個系統的認識了,下面就今天的收穫做乙個總結,也是vue入門的精髓 1.要使用vue來開發前端框架,首先要有環境,這個環境要借助於node,所以要先安裝node,借助於node裡面的npm來安裝需要的依賴等等。這裡有乙個小技...