vue-cli 介紹與安裝
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í)依賴(lài)
(@vue/cli-service)，該依賴(lài)：
- （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)目的用戶(hù)界面。
Vue CLI 致力于將 Vue 生態(tài)中的工具基礎(chǔ)標(biāo)準(zhǔn)化。它確保了各種構(gòu)建工具能夠基于智能的默認(rèn)配置即可平穩(wěn)銜接，這樣你可以專(zhuā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)境依賴(lài)。它是一個(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。
3、@vue-cli安裝
Vue CLI 4.x 需要 Node.js v8.9 或更高版本 (推薦 v10 以上)。你可以使用 n，nvm 或 nvm-windows 在同一臺(tái)電腦中管理多個(gè) Node 版本。
安裝命令如下：
npm install -g @vue/cli
可以用這個(gè)命令來(lái)檢查其版本是否正確
vue --version
到此這篇關(guān)于vue-cli 介紹與安裝的文章就介紹到這了,更多相關(guān)vue-cli 介紹與安裝內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了Vue異步組件的使用方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)手指滑動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
關(guān)于Vue Router的10條高級(jí)技巧總結(jié)
這篇文章主要給大家總結(jié)介紹了關(guān)于Vue Router的10條高級(jí)技巧，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了Vue實(shí)現(xiàn)todolist刪除功能,，代碼簡(jiǎn)單易懂，非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
vuex實(shí)現(xiàn)購(gòu)物車(chē)功能
這篇文章主要為大家詳細(xì)介紹了vuex實(shí)現(xiàn)購(gòu)物車(chē)功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-06-06
uniapp使用v-loading并且不引入element-ui的操作方法
這篇文章主要介紹了uniapp使用v-loading并且不引入element-ui,首先創(chuàng)建loading.js，創(chuàng)建lloading.scss，本文結(jié)合示例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-10-10
這篇文章主要為大家詳細(xì)介紹了如何在vue中封裝axios請(qǐng)求并集中管理,w文中的示例代碼講解詳細(xì),具有一定的參考價(jià)值,有需要的小伙伴可以了解下2023-10-10
vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解
今天小編就為大家分享一篇vue之組件內(nèi)監(jiān)控$store中定義變量的變化詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
vue中使用swiper輪播圖的正確姿勢(shì)(親測(cè)有效)
最近在用Vue制作移動(dòng)端項(xiàng)目,碰到了輪播圖的制作,接下來(lái)就讓小編一步一步帶大家動(dòng)作制作吧,下面這篇文章主要給大家介紹了關(guān)于vue中使用swiper輪播圖的正確姿勢(shì),需要的朋友可以參考下2022-06-06
一篇文章教你實(shí)現(xiàn)VUE多個(gè)DIV,button綁定回車(chē)事件
這篇文章主要介紹了VUE多個(gè)DIV綁定回車(chē)事件，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2021-10-10