web-dev-qa-db-fra.com

Comment installer la version beta de vuetify 2.0 sur le nouveau projet vue cli?

Vuetify 2.0.0-beta.0 vient de sortir et je veux l'essayer et jouer dans une nouvelle application de test vue. Mais je reçois des erreurs lorsque j'essaie de l'installer dans un nouveau projet. Voici les étapes que j'ai suivies.

J'utilise @vue/cli v3.8.2 pour créer un nouveau projet avec les paramètres par défaut:

vue create testapp

ce qui me donne un résultat réussi:

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

 $ cd testapp
 $ npm run serve

Ensuite, j'ajoute le plugin vuetify au projet avec le préréglage par défaut (recommandé):

cd testapp
vue add vuetify

ce qui me donne du succès:

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

Maintenant en package.json Je vois la version vuetify: "vuetify": "^1.5.5"

Je le mets à jour maintenant vers le v2.0.0-beta.0 comme ça:

npm install [email protected]

J'ai encore du succès:

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

Maintenant, quand j'essaye de l'exécuter:

npm run serve

Je reçois une erreur:

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

Si j'installe sass-loader comme ceci:

npm i -D node-sass sass-loader

J'ai du succès. Ensuite, j'essaie de l'exécuter à nouveau:

npm run serve

Maintenant, je reçois une erreur différente:

 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

Je suis coincé ici car je ne sais pas comment corriger cette erreur. npm install --save vuetify/src/stylus/app.styl évidemment ne fonctionne pas. De plus, je ne pouvais pas le faire fonctionner non plus en suivant --- vuetify page pour cette version bêta.

vue.jsvuetify.jsvue-cli-3
9
mlst

Après avoir créé un nouveau projet vue, suivez ces commandes:

# 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

Je pense que cela fonctionnera même avec le projet que vous avez déjà créé. Essayez simplement les commandes ci-dessus.

Pour plus de vérification version v2.0.0-beta.

10
roli roli

N'incluez pas les fichiers .styl, c'est obsolète en gros.
Retirer node-sass et installez sass

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

Et modifiez votre plugins/vuetify.js fichier

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


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

Et main.js

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

Notez que les options de thème ont changé dans la v2, le thème sombre peut maintenant être personnalisé, par exemple.

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

Plus dans docs , et new style docs en ce qui concerne sass.

10
Traxo