如何将vuetify 2.0 Beta安装到新的vue cli项目？

Question

Vuetify 2.0.0-beta.0刚刚发布，我想尝试一下并在新的vue测试应用程序中试用。但是，当我尝试将其安装在新的新项目中时出现错误。这是我已采取的步骤。

我使用@vue/cli v3.8.2默认设置创建一个新项目：

vue create testapp

这给了我成功的结果：

  Successfully created project testapp.
  Get started with the following commands:

 $ cd testapp
 $ npm run serve

然后，我将vuetify插件添加到具有默认（推荐）预设的项目中：

cd testapp
vue add vuetify

这给了我成功：

  Installing vue-cli-plugin-vuetify...

+ vue-cli-plugin-vuetify@0.5.0
added 1 package from 1 contributor and audited 23942 packages in 9.235s
found 0 vulnerabilities

?  Successfully installed plugin: vue-cli-plugin-vuetify

? Choose a preset: Default (recommended)

  Invoking generator for vue-cli-plugin-vuetify...
  Installing additional dependencies...

added 11 packages from 49 contributors and audited 23980 packages in 9.252s
found 0 vulnerabilities

?  Running completion hooks...

?  Successfully invoked generator for plugin: vue-cli-plugin-vuetify

现在在package.json我看到vuetify版本： "vuetify": "^1.5.5"

我现在将其更新为v2.0.0-beta.0：

npm install vuetify@2.0.0-beta.0

我再次获得成功：

+ vuetify@2.0.0-beta.0
updated 1 package and audited 23980 packages in 10.302s
found 0 vulnerabilities

现在，当我尝试运行它时：

npm run serve

我得到错误：

> testapp@0.1.0 serve c:\temp\testapp
> vue-cli-service serve

 INFO  Starting development server...
 98% after emitting CopyPlugin

 ERROR  Failed to compile with 99 errors                                                                                                                                                                                           6:17:04 PM

This dependency was not found:

* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js

To install it, you can run: npm install --save vuetify/src/stylus/app.styl
Failed to resolve loader: sass-loader
You may need to install it.

如果我像这样安装sass-loader：

npm i -D node-sass sass-loader

我成功了 然后，我尝试再次运行它：

npm run serve

现在再次出现不同的错误：

 ERROR  Failed to compile with 1 errors                                                                                                                                                                                            6:27:06 PM

This dependency was not found:

* vuetify/src/stylus/app.styl in ./src/plugins/vuetify.js

To install it, you can run: npm install --save vuetify/src/stylus/app.styl

我被困在这里，因为我不知道如何解决此错误。npm install --save vuetify/src/stylus/app.styl显然不起作用。同样，通过遵循此Beta版本的官方vuetify页面，我也无法使其正常工作。

Answer 1

不包括.styl文件，基本上已弃用。
删除node-sass并安装sass

$ npm uninstall node-sass
$ npm i -D sass

并修改您的plugins/vuetify.js文件

import Vue from 'vue'
import Vuetify from 'vuetify'


Vue.use(Vuetify)
export default new Vuetify({ theme: { ... } })

和 main.js

new Vue({
  ...
  vuetify, // we add vuetify here
  render: (h) => h(App),
}).$mount('#app')

注意在v2中更改了主题选项，现在可以自定义深色主题，例如

theme: {
  dark: true,
    themes: {
      light: {
        primary: '#42a5f5',
        ...
      },
      dark: {
        primary: '#2196F3
      },
    },
  },
  options: {
    customProperties: true,
  },
  icons: {
    iconfont: 'md', // default is 'mdi'
  }
}

关于sass的文档和新样式的文档更多。

Answer 2

创建新的vue项目后，请遵循以下命令：

# yarn
$ yarn add https://github.com/vuetifyjs/vue-cli-plugin-vuetify.git#dev -D
$ vue invoke vuetify

# npm
$ npm install https://github.com/vuetifyjs/vue-cli-plugin-vuetify.git#dev --save-dev
$ vue invoke vuetify

我认为它甚至可以与您已经创建的项目一起使用。只需尝试上面的命令。

有关更多信息，请检查v2.0.0-beta.0版本