學習Vue CLI 3.x版本的安裝以及創建項目


官網鏈接 https://cli.vuejs.org/zh/guide/installation.html

一、安裝node

輸入cmd,打開命令提示符 輸入 node -v

如果提示 node不是內部文件等,需要你安裝一下node

參考網址 http://nodejs.cn/download/

安裝教程(注意版本下載)

直接下載

按照步驟安裝

安裝完成后

檢查一下是否安裝了

 (npm 是 nodejs的包管理器,用於node插件管理;)

 

二、安裝vue-cli

>繼續執行命令    npm install -g @vue/cli

等待安裝...

安裝完成后 可以輸入 vue -V 檢查是否成功

如果安裝成功會顯示版本

致此vue 3.x 算是安裝完成了

vue --version 可以檢查是安裝了最新版本

 ------------------------------------------------------------------混亂分割線-------------------------------------------------------------------------

 

三、創建項目方法一(命令式)

     cd 進入工具項目路徑

@1.如果現在直接創建項目,會有問題,請看展示

>命令輸入 vue create hollo-wd

會提示太慢了,給出建議

原因:訪問是國外服務器,為了提高速度,可以借助國內鏡像,也就是國內自己npm的意思,利用淘寶提供的cnpm

正確步驟是:

@2.先安裝 cnpm

>輸入命令[ npm install -g cnpm -registry=https://registry.npm.taobao.org ]

  (注意是輸入整條)

>檢查結果 cnpm -v

 

 

--------------------------------------------------------------------------重度混亂分割線-----------------------------------------------------------------------

@3.現在新建項目

>命令輸入 vue create hello

 > 回車

 >選default

執行成功后

查看結果,發現已經生成了hello文件夾以及生成兩個文件

 

>不選default

選擇第二種方式,可以根據自己需要配置

生成文件

 

(詳細可以參考https://www.cnblogs.com/wisewrong/p/9740173.html)

 

四、創建項目方法二(瀏覽器)

官網還提供另一種友好的方法:在瀏覽器頁面創建項目

命名輸入

>vue ui

會打開一個瀏覽器頁面(如果發現ie不支持,換其他瀏覽器試試),按照頁面指引很簡單

創建好項目app后出來頁面如下圖:

感覺很牛逼,還沒研究好具體功能。

 

很明顯看到項目的文件多了很多

 

五、啟動服務器(我理解是)

上面兩種方法都可以創建好項目,發現命令提示如下(app是我的項目)

 然后就嘗試執行

>npm run serve

結果如下,從接口進入

 

 

 執行頁面

下面可以自己開發了。

六.項目重新啟動快捷方式

打開瀏覽器 :http://localhost:8080

如果關掉命令,就會關掉服務器,無法訪問了

>現在進入app文件里面,按住shift 右擊空白處

>選擇打開窗口,如下圖

重新啟動服務器

重新刷新頁面發現可以了。

如果想打開項目管理頁面,直接執行 vue ui

 

------------------------------------------------------------清醒分割線-------------------------------------------------------------------------------

番外篇:

在安裝過程遇到疑點:

1.vue-cli每次都要啟動服務器才能用嗎?

2.每次創建項目都要這么麻煩的嗎

3.文檔查看,針對舊版本寫比較好有 https://segmentfault.com/a/1190000015680030 ,如果你安裝是舊版本可以參考下。

   新版本 參考https://www.cnblogs.com/hezhi/p/10212060.html  

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM