Vue 3.0 使用 Vuetify中的坑

出现如下问题:
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)
  • 背景
    程序运行环境如下:

    Vue CLI: @vue/cli 4.5.4
    NPM: 6.9.0
    Vue: 3.0.0-0
    系统:Windows 10

  • 安装方式

    ①整个项目使用的是vue create [my-project]创建;
    ②安装Vuetify UI,最开始采用的是NPM/YARN的方式安装(npm install vuetifyyarn add vuetify),按照官网上此流程安装后,一直报错……(此处省略具体报啥错,反正就是编译不通过),寻求无解后采用vue add vuetify方式安装。

  • vue add vuetify安装说明(下面是重点!!!!!)

    如果通过vue create [my-project]这个命令创建了项目后,然后再在项目的根目录下直接运行vue add vuetify命令,且在允许vue add vuetify这个安装命令之前没有对项目中的main.js代码做任何更改的话,大概率是会报错的,报错的具体内容见文章开头。遇到上面的错误,解决办法如下:

//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即可顺利安装。


之所以会出现这个问题,是因为当前Vue 3.0发布不久,vuetify对Vue 3.0的语法没有做适配更新,只能使用Vue 2.0的语法。当然,如果你使用的是Vue 2.0创建的项目,那么就不会存在这个问题。

参考链接如下:
https://github.com/vuetifyjs/vue-cli-plugins/issues/140

本作品采用《CC 协议》,转载必须注明作者和本文链接
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!