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

Posted 2023-02-22

【中文标题】如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中？

【英文标题】：How to install vuetify 2.0 beta to the new vue cli project?

【发布时间】：2019-10-15 07:48:49

【问题描述】：

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 显然不起作用。此外，我也无法通过关注官方vuetify page 来获得此测试版。

【问题讨论】：

2.0.0 现已发布。安装和升级说明在这里：github.com/vuetifyjs/vuetify/releases/v2.0.0

【参考方案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'

docs 和 new style docs 中关于 sass 的更多信息。

【讨论】：

如何使用yarn去掉node-sass，添加sass和sass-loader？

@KickButtowski 尝试yarn remove node-sass 和yarn add sass

【参考方案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 release

【讨论】：

这应该是正确的答案，因为它适用于 beta.2，没有任何额外的麻烦......也应该在文档中:)