1. 程式人生 > >第一章 vue的環境搭建

第一章 vue的環境搭建

窗口 localhost .org oca 沒有 fig con oba default

首先安裝WebStorm,完事打開

技術分享圖片

Create New Project -> Vue.js

技術分享圖片

出現紅字,沒有安裝nodejs。so 安裝一下,簡單的next就可以了。

 技術分享圖片

因為我之前安過了vue-cli了,所以vue沒有報錯。或者出來了vue.js的選項

所以如果沒有出現vue.js或者這個出紅字都沒關系。

打開cmd,使用命令進行安裝。在這之前,網速聯國外的會慢,我們可以轉到taobao上,使用cnpm來安裝,安裝完cnpm,就可以把所有的npm換成cnpm來執行加快下載速度

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

  在安裝完之後vue –V,註意大小寫,查看一下安裝的版本

技術分享圖片

安裝完畢,重新打開WebStorm,Create New Project -> Vue.js 這回就不報錯了。

然後,安裝的話,我建議使用方法二來安裝,方法一安裝後,就會出現一個只有package.json的界面,如下

方法一:

技術分享圖片

使用default(babel, eslint)

技術分享圖片

完成後,真幹凈,只有package.json

技術分享圖片

方法二:

打開cmd ,在安裝前,再次確認版本。2.X的使用不了。這是3.X的新命令

vue ui

技術分享圖片

一目了解的界面。點創建,選擇路徑,只有一個缺點,切換路徑時,特別慢。所以我選擇點筆直接編輯路徑,把路徑復制進去即可。

技術分享圖片

創建項目,輸入項目名vue-manage,下一步

技術分享圖片

選擇默認babel

技術分享圖片

技術分享圖片

創建,然後我們可以去打局農藥,我選擇踢局實況,然後差不多就安好了。

技術分享圖片

安裝完成,一目了解項目都安了什麽什麽版本。對新人來說很友善的。

技術分享圖片

然後打開WebStorm,open打開我們剛創建的目錄D:\Work\demo\vue-manage

技術分享圖片

然後看到我們的成果

下面我們運行起來,左下角,找npm窗口,雙擊即可

技術分享圖片

技術分享圖片

運行完成後,下面可以看到選擇使用localhost打開,還是使用ip地址打開

技術分享圖片

看到這個界面就說面我們創建成功了。

技術分享圖片

使用這種比較麻煩,我會使用更簡單的方法來運行。

右上角的調試點下拉框選擇edit config…

技術分享圖片

選擇serve,OK,點擊綠箭頭,即可啟動項目了,項目在啟動後,直接刷新就可以看到了,熱部署很好用的。

技術分享圖片

我們也可以使用vue ui裏來運行

 技術分享圖片

  運行的旁邊的齒輪可以設置相關。

技術分享圖片

以上,就是本節內容。講的比較細,主要是針對首次接觸vue的人來講解的。

第一章 vue的環境搭建