【Vue】Win 10:npm 安裝 Vue

目錄

一、node 安裝檢驗

二、npm 安裝檢驗及升級

三、vue 安裝

四、安裝 webpack

五、新建項目

六、運行項目



一、node 安裝檢驗

(1)查看版本,打開 cmd 窗口,輸入命令:

node -v


(2)未安裝,可以點擊查看我的另一博文進行安裝:【Node】Win 10 :node 安裝



二、npm 安裝檢驗及升級

(1)查看版本,打開 cmd 窗口,輸入命令:

npm -v


(2)升級版本,打開 cmd 窗口,輸入命令:

npm install -g npm

 

注:若 npm install 報錯 permission denied,使用命令:sudo npm install -g npm



三、vue 安裝

(1)打開 cmd 窗口,輸入命令:

npm install vue


(2)安裝 vue-cli 腳手架構建工具:

npm install --global vue-cli


(3)校驗安裝,安裝完成,輸入命令,如果出現相應的版本號,則說明安裝成功:

vue -V



四、安裝 webpack

(1)打開 cmd 窗口,輸入命令:

npm install --global webpack

 


(2) 打開 cmd 窗口,輸入命令:

npm install --global webpack-cli


(3)校驗安裝,安裝完成,輸入命令,如果出現相應的版本號,則說明安裝成功:

webpack -v



五、新建項目

(1)去保存腳本的目錄下新建文件夾:


(2)切換到該文件夾路徑下,創建新項目,打開 cmd 窗口,輸入命令:

// 創建一個基於 webpack 模板的新項目 my-vue-project
vue init webpack my-vue-project
// 這裏需要進行一些配置,默認回車即可



六、運行項目

(1)切換到該文件夾路徑下,創建新項目,打開 cmd 窗口,輸入命令:

npm run dev

 


(2)成功執行以上命令後訪問出現的地址,可以查看頁面,就是安裝成功了,如下所示:

http://localhost:8080/

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章