小菜魚關於vue專案啟動的分享

2021-09-20 07:14:33 字數 2619 閱讀 3336

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

安裝node.js

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

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

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

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

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

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

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

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

以上步驟是安裝啟動vue專案必備的元件

如果已經存在vue專案,想要用最愚蠢的方法啟動vue專案可以使用這個方法:

使用win+r鍵輸入cmd,進入命令模式

然後跳轉到vue專案所在的資料夾中

(ps:這個是跳轉到另乙個磁碟上面的命令,

先後輸入

如果是 window 系統使用以下命令即可:

npm install //負責安裝
使用**映象的命令:

cnpm install
npm run build    //負責編譯
npm run dev        //負責啟動
要建立專案,首先我們要選定目錄,然後再命令列中把目錄轉到選定的目錄。在這裡,我選擇桌面來存放新建的專案,則我們需要先把目錄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 專案實現微信分享的自定義分享鏈結問題解決

前言 分享出去的自定義鏈結 鏈結中攜帶引數 總是會直接跳到專案首頁,而且是玄學跳轉,時而自定義鏈結正常,時而直接跳到首頁,答案在文章最後面。正文 2.闡述下 解決此問題的一些思路 1.請求簽名時如果使用vue的全路徑 包括 部分路由 請求時會報簽名失敗或者無效的簽名,因此我們需要使用以下方法來避免此...

關於vue的專案有關問題 隨時更新)

注意 例項通過 refs來訪問子元件,且命名規則不能為駝峰式,應為 型.1 當ref直接定義在dom元素上時,則通過this.refs.name可以獲取到dom對dom進行原生的操作 class foodmenu ref food menu 通過this.refs獲取到dom進行操作 注意ref屬性...

關於專案啟動會和專案開工會議的區別

在專案會議中,有專案啟動會和專案開工會議這兩個會議,經常有學員分不清,現在就對這兩者進行一下區分 一 專案啟動會 1 英文名稱 initiating meeting 3 主要任務 發布專案章程,並任命專案經理,賦予專案經理動用組織資源的權力 4 注意事項 1 會議召開前已經對干係人進行了識別,已經有...