Vue CLI 學習手記

vuecli其實就是vue為了方便開發，迅速搭建專案目錄，基本配置，測試等建立的命令集。下面幾個重要

vue cli全域性安裝比較好，因為我們需要他建立乙個vue專案基本框架。vuecli包括三個部分，cli、cli服務、cli外掛程式，

cli：為我們建立vue專案的基本目錄結構和框架，主要命令create、serve

cli服務：下面是3個功能，他主要和cli外掛程式一起輔助我們開發

cli外掛程式：為我們開發專案提供輔助功能，如babel/typescript 轉譯、eslint 整合、單元測試和 end-to-end 測試

npm install -g @vue/cli

這裡需要注意，我們用的是目前最新的版本，vue cli 3.x

如果你還在用以前的版本，請使用下面命令解除安裝以前版本，cli3和cli2、cli1命令，目錄結構等，都有所變化

npm uninstall vue-cli -g

檢查安裝是否成功

vue --version

vue serve [options] [entry]

vue build [options] [entry]

vue create hello-world：hello-world是專案名，可以修改，命令幫我們可以直接執行的基本專案框架，但是目錄結構沒有cli2，那麼複雜了，簡化了很多，不要被嚇到。建立過程會有選項讓你選，都是平常使用的基本配置，後面我會單獨介紹每項配置的作用

vue add 【外掛程式名】：在vue create建立建立好專案以後，想要再新增其他外掛程式，使用此命令

cli和cli服務的差別是前者執行在全域性，而後者執行在專案本地，cli服務比cli能精確的操作我們的vue專案

npx vue-cli-service serve [options] [entry]

npx vue-cli-service build [options] [entry|pattern]

npx vue-cli-service inspect [options] [...paths]:檢視專案的 webpack config

npx vue-cli-service help：學習vue-cli-service 的命令

注意：有些 cli 外掛程式會向vue-cli-service注入額外的命令。例如@vue/cli-plugin-eslint會注入vue-cli-service lint命令，這些命令你可以在package.json的scripts外掛程式

我們先vue create的時候，請選擇通過配置檔案進行配置，這樣專案就會為我們的每個外掛程式建立相應的配置檔案，而不是所有的配置都寫到package.json裡面。