本文檔目的在於讓對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項目,雖沒什么技術含量。但不要隨意轉載,如需轉載保存。需署名。謝謝配合。