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ページ を使用しても機能しませんでした。
新しい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
.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 の詳細。