vue如何新建乙個專案並使用webstorm執行

2022-07-29 11:18:08 字數 1730 閱讀 7358

vue建立專案(npm安裝→初始化專案)

第一步npm安裝

使用**npm 映象

npm

install -g cnpm --registry=

這樣就可以使用cnpm 命令來安裝模組了:

第二步專案初始化

第一步:安裝vue-cli

cnpm install vue-cli -g      //全域性安裝 vue-cli
注:上面是vue-cli 2.x的版本,為老版本,如果使用新版本,可以使用cnpm install -g @vue-cli即可。

檢視vue-cli是否成功,不能檢查vue-cli,需要檢查vue

選定路徑,新建vue專案,這裡我是在桌面上新建了sun資料夾,cd目錄路徑

下面我一專案名為sell新建vue專案

vue init webpack  」專案名稱「
注:上面是vue-cli 2.x的版本,為老版本,如果使用新版本,可以使用```vue create 專案名``即可,vue-cli會自動建立專案目錄。

現在已經建立好了,那就讓專案先安裝下依賴再執行一下,會出現下面的頁面,操作指令是:

cnpm install

cnpm run dev

注:上面是vue-cli 2.x的版本,為老版本,如果使用新版本,可以使用cnpm run serve即可。

注意 這裡要在sell下進行安裝和執行哦!!!

啦啦啦 安裝成功。

使用webstorm執行專案

使用webstrom開啟專案目錄。

點選右上角,新增npm配置。

點選加號,選擇npm

命名並且填寫執行命令。

可以看到控制台出現執行

點選綠色按鈕,可以看到啟動了埠

在彈出的預設的瀏覽器裡面,可以看到專案

vue如何新建乙個專案

身為入行未深的小白前端,不斷的學習是我們不可丟失的習慣。前端流行的框架也是層出不窮,vue在眾多框架中脫穎而出。今天花了兩個小時的時間自己走了一邊建立vue專案的流程,跟你們分享。1 開啟cmd命令列,首先安裝node 2 npm包管理器是整合在node中的,所以直接輸入npm v就能檢視到版本資訊...

vue如何新建乙個專案

第一步 安裝node 安裝步驟參考 window r開啟控制命令列cmd node v檢視node版本 npm v檢視npm版本,雖然node自帶npm,但如果不是最新版本,可以執行命令 nmp install g npm,即可最新npm registry 這樣就可以使用cnpm 命令來安裝模組了 ...

vue如何新建乙個專案

第一步npm安裝 圖1雙擊安裝,在安裝介面一直next 圖2 圖3 圖4直到finish完成安裝。開啟控制命令列程式 cmd 檢查是否正常 圖5使用 npm映象 npm install g cnpm registry 這樣就可以使用cnpm 命令來安裝模組了 1.第一步 安裝vue cli cnpm...