vue/cli和vue版本對(duì)應(yīng)及安裝方式
Vue Cli
Vue CLI = Vue + 一堆的js插件
1、cli 全稱就是Command-Line Interface，翻譯為命令行界面，俗稱 腳手架
2、Vue Cli 就是一個(gè)官網(wǎng)發(fā)布的vue.js項(xiàng)目的腳手架
3、使用vue-cli 可以幫我們快速的搭建Vue開(kāi)發(fā)環(huán)境以及對(duì)應(yīng)的webpack配置
使用方式
Vue CLI是一個(gè)腳手架，通俗點(diǎn)說(shuō)就是代碼生成器，可以快速生成一套基于Vue完整的前端框架，單獨(dú)編譯，單獨(dú)部署?？梢栽偌筛鞣N第三方插件，擴(kuò)展出更多的功能。
Vue是漸近式框架，你可以用它一個(gè)功能，也可以用全家桶。比如你可以在老的jsp或thymeleaf項(xiàng)目里，引入vue.js，只用它核心的數(shù)據(jù)綁定功能。
如果項(xiàng)目過(guò)于簡(jiǎn)單，就是一些基本的數(shù)據(jù)渲染，不必要使用Vue Cli腳手架。當(dāng)開(kāi)發(fā)大型項(xiàng)目的時(shí)候，需要考慮代碼目錄結(jié)構(gòu)，項(xiàng)目結(jié)構(gòu)，部署以及熱更新等瑣碎的事情，可以將這些事情交給腳手架去配置。
關(guān)于Vue Cli版本介紹
舊版本名稱為 vue-cli，新版本是 @vue/cli。
如果已經(jīng)全局安裝了舊版本的vue-cli(1.x或2.x)，你需要先通過(guò) npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它。
npm uninstall vue-cli -g 或 yarn global remove vue-cli
@vue/cli 安裝
注意：Vue Cli 需要Node.js 8.9或更高版本（推薦8.11.0+）。
你可以使用nvm或nvm-windows在同一臺(tái)電腦中管理多個(gè)Node版本。
- npm install -g @vue/cli （安裝的是最新版）
- npm install vue-cli@2.9.6 （指定版本安裝【指定版本為3.0以下版本】，其中2.9.6為版本號(hào)）
- npm install -g @vue/cli@3.11.0（指定版本安裝【指定版本為3.0以上版本】，其中3.11.0為版本號(hào)）
通過(guò)命令行查詢可用的包的版本號(hào)：
npm view vue-cli versions --json （3.0以下版本） npm view @vue/cli versions --json （3.0以上版本）
Vue/cli版本查看：
vue -V
版本號(hào)對(duì)應(yīng)
- Vue CLI 4.5以下，對(duì)應(yīng)的是Vue2
- Vue CLI 4.5及以上，對(duì)應(yīng)的是Vue3
- 但是使用vue init 創(chuàng)建項(xiàng)目的時(shí)候會(huì)有機(jī)會(huì)選擇，可以選擇Vue2
查看vue和@vue/cli版本
vue -V 和 vue --version 是查看 vue-cli（腳手架）的版本的.
C:\Users\Mavis>vue -V @vue/cli 5.0.8
查看vue版本使用如下命令：
npm list vue || npm list vue -g
注意：
Vue Cli3.X和4.X的腳手架的模板和Vue Cli2.X完全不同。
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue基于v-charts封裝雙向條形圖的實(shí)現(xiàn)代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12
uniapp模仿微信實(shí)現(xiàn)聊天界面的示例代碼
這篇文章主要介紹了如何利用uniapp模仿微信，實(shí)現(xiàn)一個(gè)聊天界面。文中的示例代碼講解詳細(xì)，對(duì)我們學(xué)習(xí)Vue有一定的幫助，感興趣的可以了解一下2022-01-01
ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例
本文主要介紹了ElementUI?復(fù)雜頂部和左側(cè)導(dǎo)航欄實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移功能(支持跨頁(yè)移動(dòng))
有時(shí)候需要前端實(shí)現(xiàn)上移和下移功能,下面這篇文章主要給大家介紹了關(guān)于如何基于前端VUE+ElementUI實(shí)現(xiàn)table行上移或下移(支持跨頁(yè)移動(dòng))的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
Vue3中無(wú)法為el-tree-select設(shè)置反選問(wèn)題解析
這篇文章主要介紹了Vue3中無(wú)法為el-tree-select設(shè)置反選問(wèn)題分析,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-04-04
Vue前端左側(cè)菜單右側(cè)內(nèi)容的網(wǎng)站界面制作過(guò)程
這篇文章主要介紹了使用Vue和ElementUI制作一個(gè)帶有左側(cè)菜單和右側(cè)內(nèi)容區(qū)的網(wǎng)站頁(yè)面的過(guò)程,文中通過(guò)CSS樣式和深度作用符,實(shí)現(xiàn)了頁(yè)面的美化和功能的完善,需要的朋友可以參考下2025-02-02
Vue.js更改調(diào)試地址端口號(hào)的實(shí)例
今天小編就為大家分享一篇Vue.js更改調(diào)試地址端口號(hào)的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
這篇文章主要介紹了vue實(shí)現(xiàn)組件之間傳值功能,結(jié)合實(shí)例形式分析了vue.js父子組件之間相互傳值常見(jiàn)操作技巧,需要的朋友可以參考下2018-07-07
vue實(shí)現(xiàn)虛擬滾動(dòng)的示例詳解
虛擬滾動(dòng)或者移動(dòng)是指禁止原生滾動(dòng),之后通過(guò)監(jiān)聽(tīng)瀏覽器的相關(guān)事件實(shí)現(xiàn)模擬滾動(dòng),下面小編就來(lái)和大家詳細(xì)介紹一下vue實(shí)現(xiàn)虛擬滾動(dòng)的示例代碼,需要的可以參考下2023-10-10
vue mintui-Loadmore結(jié)合實(shí)現(xiàn)下拉刷新和上拉加載示例
本篇文章主要介紹了vue mintui-Loadmore結(jié)合實(shí)現(xiàn)下拉刷新和上拉加載示例，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-10-10