搭建Vue腳手架 vue cli 並建立Vue專案

2022-08-26 20:18:15 字數 1553 閱讀 5019

1. 安裝node.js

vue的腳手架是依賴於node.js的,如果沒有安裝過node的話需要先到node.js官網上進行安裝。

安裝完成後,開啟cmd視窗,輸入 node -v 和 npm -v 來檢視node.js和npm的版本,如果能夠顯示出版本,說明已經安裝成功。

2. 安裝**映象——cnpm

所以為了提高效率,我們可以把npm的映象源替換成**的映象源。

npm install -g cnpm --registry=
安裝完成後,輸入cnpm -v,可以檢視當前cnpm版本,如果能顯示版本說明安裝成功。

完成之後,就可以用 cnpm 命令來代替 npm 命令了。

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

命令列中全域性安裝:

cnpm install -g vue-cli
安裝完成後,輸入 vue -v 來檢視版本,如果成功顯示版本號,說明已經安裝成功,注意 vue -v 中使用大寫字母v。

4. 建立乙個新的vue專案

安裝vue-cli成功後,通過cd命令進入你想放置專案的資料夾,在命令提示視窗執行建立vue-cli工程專案:

vue init webpack myproject
其中 "myproject" 是你給該專案取的專案名稱。

然後根據提示進行初始化設定並進行安裝。

安裝完成如下

此時你的資料夾中就會新建乙個myproject的vue專案,以下就是新專案內的檔案結構。

5. 執行專案

要執行專案必須要有該項目的依賴,

使用下面的命令安裝依賴。

cnpm install
安裝完成如下:

最後,即可執行專案:

搭建VUE腳手架 vue cli

確保node.js和npm cnpm都安裝好的情況下,檢視命令 node v npm v cnpm v,有返回版本號即為安裝成功,npm和cnpm有乙個即可,cnpm是 映象的npm,相對npm更快更穩定,配置命令 npm install g cnpm registry 在用 vue.js 構建大型...

搭建Vue腳手架(vue cli)

1.安裝node.js 安裝完成之後,開啟命令列工具 win r,然後輸入cmd 輸入 node v,如下圖,如果出現相應的版本號,則說明安裝成功。c users 19565 node v v12.13.1 c users 19565 npm v 6.12.1 2.安裝webpack 開啟命令列工具...

Vue腳手架vue cli搭建

vue腳手架搭建流程 首先在node環境下使用npm或者cnpm進行vue腳手架搭建 1.安裝node環境 安裝成功後在命令列檢視node版本,如果有說明安裝成功。檢視node版本 node v 2.安裝vue腳手架工具vue cli大家在安裝node的時候,會自動安裝npm 可以先行檢視npm版本...