vue cli 更新對比

2021-08-20 22:27:40 字數 1662 閱讀 8167

vue-cli 是vue 官方提供的腳手架工具,他的github 位址是: 

vue-cli github

vue-cli 3.0發布了,相對比於2.0,更新挺大的。本文簡單介紹了下初採坑的一些區別

npm install vue-cli

-g

檢視版本

vue -v

// 2.9.3 說明是2.9.3版本(在寫此篇文章時,npm 上是2.9.3最新版本,3.0測試版安裝方式不同,請往下看)

接下來介紹一些2.0以上中的命令

vue help

//或者

vue --help

// 檢視vue 幫助

vue list

//檢視vue 模板列表

vue init

>

> 初始化 vue 專案

下面是以webpack模板建立專案完成後的目錄結構:

然後在建立的專案根目錄下

npm install 

npm run dev

寫此篇文章時 vue-cli 3.0 測試版剛發布,所以安裝方式有所不同

npm install -g vue@cli
檢視版本

vue -v//或者

vue --version

// 3.0.0-beta.1 說明測試版本安裝成功

3.0 中的命令

vue --help

// 檢視幫助,刪除了 vue help

// 還刪除了vue list

建立新專案

vue create

//注意:現在已經不是選擇模版了,而是presets (預設)首先是問你是否使用預設的preset 還是手動配置功能

注意

建立專案的方式改變,建立完成的專案也就不一樣;但是,並不是說2.0 的 vue init 方式取消了;如果還想使用;則需要安裝 @vue/cli-init;執行 npm install @vue/cli-init;

新版本建立專案的專案目錄:

安裝完成之後進到專案根目錄,啟動專案:

npm run serve
注意 啟動方式改變了,並且也不需要 npm install 了 

還有就是發現目錄結構簡單多了,原因在於package.json:

"scripts":
vue 學習 react-scripts 搞了乙個vue-cli-service 啊 

上面三個命令分別是啟動開發服務,打包,和格式化** 

之前的config目錄**去了?build 的目錄**去了?webpack 的配置呢 

可能這就是vue-cli3.0號稱的0配置吧 

那麼我們怎麼配置呢? 

要請出我們的vue.config.js(模仿於angular-cli腳手架建立專案的配置) 

具體如何配置請移駕官方文件檢視! 

官方配置文件

vue cli版本檢視 更新

vue cli的版本檢視 vue vvue cli的3.0 以後使用的不是vue cli了,如果安裝3.0的話就需要使用新的命令,如下 npm install vue cli gvue cli4的安裝與使用 若你已安裝過vue cli3一下的版本的話,你得先解除安裝掉,命令如下 首先檢視是否已安裝過...

vuecli3熱更新配置

我們在使用vuecli3的時候難免會遇到儲存 但是頁面不能自動重新整理 熱更新 的問題,今天分享一下我的熱更新的配置 chainwebpack config 只要在chainwebpack的配置項下加一行config.resolve.symlinks true 這樣我們修改儲存.vue檔案以及js ...

vue cli的安裝及版本檢視 更新

vue cli安裝 npm install vue cli g vue cli的版本檢視 vue v vue cli的3.0 以後使用的不是vue cli了,如果用以上的安裝命令安裝的並不是最新版的3.0 的,而如果安裝3.0的話就需要使用新的 npm install vue cli g 如果原來已...