web-dev-qa-db-ja.com

新しいvue CLIプロジェクトにVuetify 2.0ベータをインストールする方法？

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...

+ [email protected]
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 [email protected]

私は再び成功します：

+ [email protected]
updated 1 package and audited 23980 packages in 10.302s
found 0 vulnerabilities

今、それを実行しようとすると：

npm run serve

エラーが発生します：

> [email protected] 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ページ を使用しても機能しませんでした。

vue.jsvuetify.jsvue-cli-3
9
mlst

新しいfresh 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

10
roli roli

.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に関して docs および new style docs の詳細。

10
Traxo