使用腳手架 vue-cli 4.0以上版本創建vue項目

1. 什么是 Vue CLI

如果你只是簡單寫幾個Vue的Demo程序, 那么你不需要Vue CLI；如果你在開發大型項目, 那么你需要, 並且必然需要使用Vue CLI。

使用Vue.js開發大型應用時，我們需要考慮代碼目錄結構、項目結構和部署、熱加載、代碼單元測試等事情。 如果每個項目都要手動完成這些工作，效率比較低效，所以通常我們會使用一些腳手架工具來幫助完成這些事情。

CLI是什么意思? CLI是 Command-Line Interface, 翻譯為命令行界面, 但是俗稱腳手架. Vue CLI是一個官方發布 vue.js 項目腳手架 使用 vue-cli 可以快速搭建Vue開發環境以及對應的webpack配置。

2. Vue CLI 使用前提 

（1）Node

有關Node的安裝及檢測請參考 https://blog.csdn.net/Soinice/article/details/87793793?ops_request_misc=%7B%22request%5Fid%22%3A%22158203429919725211909892%22%2C%22scm%22%3A%2220140713.130056874..%22%7D&request_id=158203429919725211909892&biz_id=0&utm_source=distribute.pc_search_result.none-task 

（2）Webpack

Vue.js官方腳手架工具就使用了webpack模板，它對所有的資源會壓縮等優化操作，它在開發過程中提供了一套完整的功能，能夠使得我們開發過程中變得高效。

Webpack的全局安裝：

npm install webpack -g

3. Vue CLI 的使用

3.1 安裝Vue腳手架

npm install -g @vue/cli

可以通過cmd查看安裝版本

vue --version

3.2 創建項目

vue create my-project

下面是Vue CLI2 和 Vue CLI3（3和4差別不大）的對比，這里借用 coderwhy 老師的兩幅圖來說明：

 

 

 有關 Vue CLI 更多介紹請看官網 https://cli.vuejs.org/zh/guide/