cli 是 Command Line Interface,也就是命令行接口绑嘹,所謂接口就是我們可以通過命令行方式進行些 vue 給我們提供的操作浸剩。t
這里解釋一下 CLI 的用途,其實就是為了便于開發(fā) vue 應(yīng)用惭聂,為我們事先寫好的腳步,來幫助我們快速搭建 vue 項目相恃,避免一些繁瑣乏味的配置辜纲。同樣在搭建項目時為我們提供許多選項便于搭建出適合自己應(yīng)用的 vue 項目。out-of-the-box 就是開包即用拦耐,拎包入住的感覺耕腾。
我們也可以選擇一些項目中需要的庫,各個庫之間相互依賴的關(guān)系 CLI 也通過插件形式幫助我們進行管理杀糯。
而且通過配置 webpack 我們可以將項目 src 下 javascript 文件扫俺、css 樣式文件和他們依賴都打包一個文件,并不是簡單打包在一起固翰,這里還會對代碼進行一些優(yōu)化狼纬。
可以自由地創(chuàng)建一個 vue 組件,組件包換 html 結(jié)構(gòu) css 樣式和 javascript 文件骂际,組件可以輕松地被復(fù)用在我們的項目中疗琉。同時安裝插件,讓我們可以 typescript 來寫 javascript 也可以用 scss 或 less 來寫 css歉铝,還可以用 pug 來寫 html 只要您愿意
啟動模塊熱替換(HMR)功能盈简,當我們編輯代碼同時,改變就會立即反應(yīng)到我們頁面,這樣給我們開發(fā)帶來了許多快樂
要使用 vue cli 我們先安裝 npm柠贤。
在安裝了 npm 后香浩,我們在命令行輸入 npm i -g @vue/cli 來全局安裝 vue cli 庫。
安裝會稍微需要一點時間臼勉,稍等片刻邻吭。
然后我們就可以 vue 命令來創(chuàng)建一個項目了, vue create 項目名稱來創(chuàng)建項目宴霸。
在創(chuàng)建過程中镜盯,vue cli 這里提供了許多選項,我們可以選擇 Manually select features 來手動配置來創(chuàng)建我們項目猖败。
Babel 是一種優(yōu)化編譯器,Router 是 vue 的路由進行擴展的庫降允,Linter 是檢查我們的代碼的工具恩闻,這里就是我們創(chuàng)建項目作出的選擇。
我們可以選擇一個腳手架來搭建項目剧董,這里有兩種選擇一個 npm 一個是 yarn幢尚,個人也偏好 npm。
做出所有的選擇翅楼,我們就可以享受一下等待項目尉剩,等待 cli 根據(jù)我們的選擇來搭建專屬于我們的 vue 項目。
然后進入創(chuàng)建項目下毅臊,運行 npm run serve 來啟動我們項目理茎,當您看到下面畫面恭喜您成功地用 cli 創(chuàng)建了 vue 項目