搭建vue環境,腳手架執行不了

2021-10-06 20:26:46 字數 1901 閱讀 7672

目錄

環境搭建

安裝vue-cli腳手架構建工具

使用vue-cli腳手架構建專案

「執行」起來

腳手架vue ui 命令執行不了問題

我們需要先從node.js

官網安裝node,安裝過程很簡單,一路「下一步」就可以了(傻瓜式安裝)。

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

那麼此時你發現你不僅擁有了node環境而且還有了npm包管理器,豈不快哉!

在命令列中執行命令 npm install vue-cli -g ,然後等待安裝完成。(這裡不建議使用cnpm,據說使用cnpm安裝有機率會出現一些詭異的東西,可以在命令後面加-- registry=

npm install vue-cli -g

完成以上兩步之後,我們需要準備的環境和工具都準備好了,接下來就可以開始使用vue-cli來構建專案了。

要建立專案,首先我們要建立乙個空目錄,然後在命令列中cd進去這個目錄,然後在命令列中執行命令 vue init webpack first-vue 。解釋一下這個命令,這個命令的意思是初始化乙個專案,其中webpack是構建工具,也就是整個專案是基於webpack的。其中first-vue是整個專案資料夾的名稱,這個資料夾會自動生成在你指定的目錄中(我的例項中,會在你剛建立的目錄裡)

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

接下來我們開啟我們開啟first-vue資料夾:

first-vue資料夾

這就是整個專案的目錄結構,其中,我們主要在src目錄中做修改。這個專案現在還只是乙個結構框架,整個專案需要的依賴資源都還沒有安裝,接下來我們需要安裝依賴資源。首先cd到專案資料夾(first-vue資料夾),然後執行命令 npm install ,等待安裝。

npm install

安裝完成之後,會在我們的專案目錄first-vue資料夾中多出乙個node_modules資料夾,這裡邊就是我們專案需要的依賴包資源。安裝完依賴包之後,就可以執行整個專案了。

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

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

安裝最新的腳手架

cnpm i -g @vue/cli

然後再次執行

再次執行vue ui命令

瀏覽器會自動開啟腳手架頁面配置

搭建Vue腳手架

從vue官網安利了一波安裝腳手架的主要 全域性安裝 vue cli npm install global vue cli 建立乙個基於 webpack 模板的新專案 vue init webpack my project 安裝依賴,走你 cd my project npm install npm r...

Vue腳手架搭建

sudo apt get install nodejs legacy nodejs sudo apt get install npm 安裝成功後檢視對應版本 npm install vuenpm install g cnpm registry vue安裝成功後檢視對應版本 npm install g...

vue腳手架搭建

一 vue cli腳手架的搭建步驟 首先,確定你的電腦上已經安裝了nodejs,可以使用npm包管理器安裝環境 1 開啟cmd命令視窗,切換到你要新建專案的資料夾下,此時可使用node v檢查node的版本,如果出現版本號則node已安裝。2 使用以下命令全域性安裝vue cli npm insta...