vue創建項目(npm安裝→初始化項目)

vue創建項目(npm安裝→初始化項目)

第一步npm安裝
首先:先從nodejs.org中下載nodejs
官方下載地址:https://nodejs.org/en/
在這裏插入圖片描述
圖1
下載完成後,雙擊安裝,在安裝界面一直Next
在這裏插入圖片描述

在這裏插入圖片描述
直到Finish完成安裝。

打開控制命令行程序(CMD),檢查是否正常
依次執行命令,結果如下圖

node -v
npm -v

在這裏插入圖片描述
使用淘寶NPM 鏡像
大家都知道國內直接使用npm 的官方鏡像是非常慢的,這裏推薦使用淘寶 NPM 鏡像。

 npm  install  -g  cnpm  --registry=https://registry.npm.taobao.org

ok,完成環境的搭建,這樣就可以使用cnpm 命令來安裝模塊了:
第二步項目初始化
第一步:安裝vue-cli

npm install vue-cli -g      //全局安裝 vue-cli

安裝時的信息顯示
在這裏插入圖片描述
查看vue-cli是否成功,不能檢查vue-cli,需要檢查vue

vue  -V   //查看版本號

在這裏插入圖片描述
注:版本有可能不一樣,下載的版本問題

vue list    //與上面的vue -V作用都是檢查vue-cli是否安裝成功,執行其中一個即可

在這裏插入圖片描述
選定路徑,新建vue項目,這裏我是在桌面上新建了sun文件夾,cd目錄路徑

下面我一項目名爲sell新建vue項目

vue init webpack  sell   //sell爲項目名稱

在這裏插入圖片描述
現在已經創建好了,那就讓項目先安裝下依賴再運行一下,會出現下面的頁面,操作指令是:

cnpm install

cnpm run dev

注意 這裏要在sell下進行安裝和運行哦!!!
在這裏插入圖片描述
ok,安裝成功。
在這裏插入圖片描述
利用vue-cil初始化構建vue項目,我們會獲得一個初始化的文件夾結構,如下:
在這裏插入圖片描述
恭喜你,完成項目搭建啦,下面開始你的項目開發之旅吧!
期待小編的下篇《搭建項目後,項目中的具體注意事項與配置》

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