vue-cli

vue-cli是vue.js官方提供的一個命令行工具，可用於快速搭建大型單頁應用。該工具是一套成熟的vue項目架構設計，會跟着vue版本的迭代而更新，可以爲用戶帶來現代化的前端開發流程，只須要幾分鐘就能夠建立並啓動一個帶熱重載、保存時靜態檢查以及可用於生產環境的構建配置的項目。

安裝

要想使用vue-cli來快速生產項目，首先須要安裝全局的vue-cli，此處必定要在全局模式下安裝，不然沒法使用vue命令。

全局安裝命令：npm install vue-cli -g

安裝完成後，可經過查看版原本檢查是否安裝成功。

版本查看命令：vue  --version

此時就安裝成功了。

vue-cli作爲能爲咱們提供基本項目結構的腳手架，其自己就集成了不少的項目模板，咱們能夠經過命令來查看官方推薦模板。

模板查看命令：vue  list

我的覺着其中經常使用的兩個是webpack-simple和webpack，webpack-simple比較適合小型項目，沒有代碼檢測，而webpack則更適合大型項目，有完善的Eslint代碼檢測和單元測試。

建立項目

建立項目的時候，咱們首先須要選擇合適的位置放置項目，而後選擇須要的模板和合適的項目文件名稱。（須要說明的是，在實際的工做中，我的是超級不推薦將項目放在C盤的，此處只是爲了方便，才暫時這樣操做，但願不要產生誤導）

建立項目命令：vue init 模板 名稱

在上面的例子中，咱們在默認位置使用webpack-simple模板建立了一個名爲cli-demo-one的項目。

此時，咱們會發現存放項目的位置多了一個項目文件夾cli-demo-one，就是咱們剛剛用腳手架快速生產的項目。打開文件夾，能夠看到以下結果。

運行項目

咱們能夠按照剛剛上面建立項目時給出的提示運行項目。

 首先是切換盤符目錄到項目的根目錄下，而後下載項目所須要的依賴。

當咱們下載完項目依賴後，會發現項目根目錄下多了一個文件夾，就是用來存放項目全部依賴的。

 

這個文件比較大，全部後期咱們若是須要拷項目，都是拷整個項目文件夾中除這個文件夾之外的全部東西，包括不少從網上下的項目，也都是沒有這個文件夾的。拷完或者下載完項目之後，經過命令行進入項目跟目錄。執行npm install就能夠下載項目相關依賴了。基本操做同這一步同樣。

下載完項目之後，咱們來運行項目。

此時，瀏覽器會自動打開一個新窗口localhost:8080

這裏，咱們能夠發現項目默認的是8080端口，可是在實際工做中，可能8080端口會被佔用，就不會有上面的自動打開甚至會報錯，此時咱們能夠在package.json中進行端口更改。

只須要將上面的代碼改爲下面所示本身須要的或者空閒的端口。

而後再從新運行項目便可了。

 

接下來咱們打開src文件夾下面的App.vue

咱們將上面的代碼進行更改以下

而後Ctrl + S保存，這是咱們發現不須要咱們手動刷新，瀏覽器已經自動刷新了。

這就是vue-cli自帶的熱重載功能。