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 vuetify或yarn 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 协议》，转载必须注明作者和本文链接