Vue安裝並建立乙個簡單專案

2022-05-17 20:07:36 字數 2462 閱讀 7361

安裝完之後cmd 下輸入:

node -v
檢視是否安裝成功。

cmd下輸入命令:

npm -v
如果低於3.0版本需要進行公升級

公升級方法:

在cmd命令下cd到nodejs安裝目錄,然後輸入以下命令:

npm update npm
這裡要等待一下。更新完成後再使用:npm -v檢查一下版本

cnpm是**的乙個映象,安裝之後可以使用cnpm安裝命令工具,安裝速度會加快。

直接使用

npm install -g cnpm –registry=
命令安裝即可。

安裝命令為:

cnpm install -g vue-cli
安裝之後顯示:

一定不要多打空格,我就是因為輸入的命令為cnpm install -g vue -cli,多輸入了乙個空格,而沒有安裝成功。

這是命令正確時顯示的內容:

輸入:(後面的v一定要大寫),檢查是否安裝成功。出現版本資訊則證明安裝成功。

vue -v
先新建乙個儲存專案的資料夾,相當於工作空間。此處我新建了乙個名為webstormvue的資料夾。進入到此資料夾目錄下,在位址列輸入cmd,進入命令視窗。

輸入命令:

npm install vue-cli -g
完成之後,輸入命令:(dream是專案名)

vue init webpack dream
輸入之後:

建立完成之後:  (dream是專案名稱)

可以看到asus資料夾下有咱們剛剛建立的dream專案

訪問localhost:8080:

使用webstorm軟體開啟剛剛建立的firstvue專案,專案結構如圖所示:

config:配置目錄,包括埠號等

node_modules: npm載入的專案依賴模組

src:開發目錄

components:目錄裡面放了乙個元件檔案,可以不用

main.js:專案的核心檔案

index.html:首頁入口檔案,可以新增一些meta資訊或統計**啥的。

package.json:專案配置檔案

接下來修改原始**,在頁面上顯示自己想要的內容

2)修改helloworld.vue

<

template

>

<

div

class

="hello"

>

<

h1>}

h1>

div>

template

>

<

script

>

export

default

}}script

>

Vue環境搭建並建立乙個專案

1 解除安裝vue cli2安裝vue cli3的解除安裝指令 npm uninstall vue cli goryarn global remove vue cli 2 環境準備 第一步npm安裝 第二步使用 npm映象 我好像沒用 npm install g cnpm registry 這樣就可...

Vue的安裝與第乙個簡單專案的搭建

今天安裝了vue這個前端框架,由於之前裝過node.js就說一下除了安裝node.js外其他的事情。首先檢視是否有node.js win r cmd 回車也就是在命令列中輸入node v 可以返回node.js的版本號。npm install g vue cli 安裝新版本的vue命令 npm in...

vue 安裝並建立vue專案

2,npm包管理器,是整合在node中的,所以安裝了node也就有了npm,直接輸入 npm v 命令,顯示npm的版本資訊。3,安裝vue cli,執行下面的命令 npm install g vue cli cnpm i g vue cli 安裝結束之後,可以使用vue v 檢視 vue 的版本 ...