vue-cli -- > 項目基本構建的方法


本文檔目的在於讓對vue了解比較少的同學,能夠快速搭建屬於自己的vue項目。(window)

 

一、構建項目的前提條件

 

  1、確保本機安裝了node.js ^6 --> javascript 的服務端的運行環境

  2、確保本機安裝了npm ^2     --> npm的包的管理工具

  注意:如果你裝了node.js 和 npm 請檢查它們對應的版本號

 

    1、win + r 打開cmd,鍵入 node -v 回車

    

    2、鍵入 npm -v

    

    符合vue的開發環境,我們不多啰嗦直接進入項目構建。

 


二、構建自己的vue-cli應用

  1、因為vue腳手架的一些好用的功能是基於webpack模塊的,所以首先你應該全局安裝webpack模塊(安裝成功后應該會出現版本號)

 

     npm install webpack -g //全局安裝webpack 

     webpack -v //檢查webpack是否安裝成功, 成功即出現版本號。 

     

 

 

  2、全局安裝vue-cli

 

      npm install vue-cli -g 

      vue -V // 檢查vue-cli是否安裝成功 成功出現如下提示 

      

 

 

  3、構建一個名字叫做report的項目

 

      vue init webpack report // 在cmd當前目錄下,創建一個名字叫做report的項目

 

           回車后,會出現很多yes/no的選項,這里根據個人需求選擇是否安裝。在這里個人建議先全部都選擇no不安裝,后期需要那個模塊我們自己安裝。這樣印象深刻並且能夠

     學會如何自己配置項目中應用的模塊。

      注意:在這里最后的 npm install 選擇上,這是安裝vue-cli基本的包。等待安裝結束后。

 

 

  4、進入項目文件夾,啟動項目

 

     cd report // 進入文件夾  

     npm run dev // 啟動項目 

     

 

 

      最后出現localhost:8080字樣便可放入瀏覽器地址欄中進行訪問vue-cli的默認組件

      注意

       后面的端口可能不是8080,因為8080是vue-cli默認配置的端口號。如果本機開啟了其他服務,webpack會自動檢測,並且分配一個新的端口,有可能是8081、

      8082。這個不要在意,字節使用就可以了。

 

個人郵箱:wangweizhangweb@163.com

姓名:王維璋

有問題隨時交流,不怕打擾。

最后:

  本文檔意在與幫助初學者快速構建vue項目,雖沒什么技術含量。但不要隨意轉載,如需轉載保存。需署名。謝謝配合。

 

 

 

 

    

 

 

    

 

 

 

  

 

  


免責聲明!

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



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