快捷導(dǎo)航

vue-cli 介紹與安裝

更新時(shí)間：2021年10月27日 10:23:55 作者：Silent丿丶黑羽

這篇文章主要給大家介紹的是vue-cli 介紹與安裝，vue-cli是和vue進(jìn)行深度組合的工具，可以快速幫我們創(chuàng)建vue項(xiàng)目，并且把一些腳手架相關(guān)的代碼給我們創(chuàng)建好。真正使用vue開(kāi)發(fā)項(xiàng)目，都是用vue-cli來(lái)創(chuàng)建項(xiàng)目的，下面文章詳細(xì)內(nèi)容,需要的朋友可以參考一下

1、前言

vue-cli是和vue進(jìn)行深度組合的工具，可以快速幫我們創(chuàng)建vue項(xiàng)目，并且把一些腳手架相關(guān)的代碼給我們創(chuàng)建好。真正使用vue開(kāi)發(fā)項(xiàng)目，都是用vue-cli來(lái)創(chuàng)建項(xiàng)目的。

2、vue-cli介紹

Vue CLI 是一個(gè)基于 Vue.js 進(jìn)行快速開(kāi)發(fā)的完整系統(tǒng)，提供：

通過(guò) @vue/cli 實(shí)現(xiàn)的交互式的項(xiàng)目腳手架。
通過(guò) @vue/cli + @vue/cli-service-global 實(shí)現(xiàn)的零配置原型開(kāi)發(fā)。
一個(gè)運(yùn)行時(shí)依賴 (@vue/cli-service)，該依賴：
（1）可升級(jí)；
（2）基于 webpack 構(gòu)建，并帶有合理的默認(rèn)配置；9
（3）可以通過(guò)項(xiàng)目?jī)?nèi)的配置文件進(jìn)行配置；
（4）可以通過(guò)插件進(jìn)行擴(kuò)展。
一個(gè)豐富的官方插件集合，集成了前端生態(tài)中最好的工具。
一套完全圖形化的創(chuàng)建和管理 Vue.js 項(xiàng)目的用戶界面。

Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專注在撰寫(xiě)應(yīng)用上，而不必花好幾天去糾結(jié)配置的問(wèn)題。與此同時(shí)，它也為每個(gè)工具提供了調(diào)整配置的靈活性，無(wú)需 eject。

2.1、CLI

CLI (@vue/cli) 是一個(gè)全局安裝的 npm 包，提供了終端里的 vue 命令。它可以通過(guò) vue create 快速搭建一個(gè)新項(xiàng)目，或者直接通過(guò) vue serve 構(gòu)建新想法的原型。你也可以通過(guò) vue ui 通過(guò)一套圖形化界面管理你的所有項(xiàng)目。

2.2、CLI 服務(wù)

CLI 服務(wù) (@vue/cli-service) 是一個(gè)開(kāi)發(fā)環(huán)境依賴。它是一個(gè) npm 包，局部安裝在每個(gè) @vue/cli 創(chuàng)建的項(xiàng)目中。
CLI 服務(wù)是構(gòu)建于 webpack 和 webpack-dev-server 之上的。它包含了：

加載其它 CLI 插件的核心服務(wù)；
一個(gè)針對(duì)絕大部分應(yīng)用優(yōu)化過(guò)的內(nèi)部的 webpack 配置；
項(xiàng)目?jī)?nèi)部的 vue-cli-service 命令，提供 serve、build 和 inspect 命令。

2.3、CLI 插件

CLI 插件是向你的 Vue 項(xiàng)目提供可選功能的 npm 包，例如 Babel/TypeScript 轉(zhuǎn)譯、ESLint 集成、單元測(cè)試和 end-to-end 測(cè)試等。Vue CLI 插件的名字以 @vue/cli-plugin- (內(nèi)建插件) 或 vue-cli-plugin- (社區(qū)插件)開(kāi)頭，非常容易使用。

當(dāng)你在項(xiàng)目?jī)?nèi)部運(yùn)行 vue-cli-service 命令時(shí)，它會(huì)自動(dòng)解析并加載 package.json 中列出的所有 CLI 插件。

插件可以作為項(xiàng)目創(chuàng)建過(guò)程的一部分，或在后期加入到項(xiàng)目中。它們也可以被歸成一組可復(fù)用的 preset。