Vue 3.0 使用 Vuetify中的坑 | Vue.js 技術論壇

comeonwyj 2020-10-21

展開全文

出現(xiàn)如下問題：
You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
報錯詳情如下：

.......
??  Invoking generator for vue-cli-plugin-vuetify...
 ERROR  Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
Error: You cannot call "get" on a collection with no paths. Instead, check the "length" property first to verify at least 1 path exists.
    at Collection.get (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\jscodeshift\src\Collection.js:213:13)
    at injectOptions (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\util\codemods\injectOptions.js:15:6)
    at runTransformation (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\vue-codemod\dist\src\run-transformation.js:61:17)
    at Object.keys.forEach.file (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Generator.js:290:23)
    at Array.forEach (<anonymous>)
    at Generator.resolveFiles (C:\Users\aa\AppData\Local\Yarn\Data\global\node_modules\@vue\cli\lib\Generator.js:276:24)
    at process._tickCallback (internal/process/next_tick.js:68:7)

背景
程序運行環(huán)境如下：

Vue CLI: @vue/cli 4.5.4
NPM: 6.9.0
Vue: 3.0.0-0
系統(tǒng)：Windows 10
安裝方式

①整個項目使用的是 vue create [my-project] 創(chuàng)建；
②安裝 Vuetify UI,，最開始采用的是 NPM/YARN 的方式安裝（npm install vuetify 或 yarn add vuetify）,，按照官網(wǎng)上此流程安裝后,，一直報錯……（此處省略具體報啥錯,，反正就是編譯不通過），尋求無解后采用 vue add vuetify 方式安裝,。
vue add vuetify 安裝說明（下面是重點?。。,。,。。?/p>

如果通過 vue create [my-project] 這個命令創(chuàng)建了項目后,，然后再在項目的根目錄下直接運行 vue add vuetify 命令,，且在允許 vue add vuetify 這個安裝命令之前沒有對項目中的 main.js 代碼做任何更改的話，大概率是會報錯的,，報錯的具體內(nèi)容見文章開頭,。遇到上面的錯誤，解決辦法如下：

//main.js 默認代碼
import { createApp } from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

//為了順利利用vue add vuetify命令進行安裝,，需要在輸入命令之前更改main.js代碼
//main.js 更改后代碼
import Vue from 'vue'
import App from './App.vue'

new Vue({
    render: h => h(App)
}).$mount('#app');

對 main.js 進行如上的更改后,，再運行 vue add vuetify 即可順利安裝。

之所以會出現(xiàn)這個問題,，是因為當前 Vue 3.0 發(fā)布不久,，vuetify 對 Vue 3.0 的語法沒有做適配更新，只能使用 Vue 2.0 的語法,。當然,，如果你使用的是 Vue 2.0 創(chuàng)建的項目，那么就不會存在這個問題,。

參考鏈接如下：
https://github.com/vuetifyjs/vue-cli-plugins/issues/140

vue vuetify