vue.js - ¿Cómo instalar vuetify 2.0 beta en el nuevo proyecto vue cli?

vuetify.js vue-cli-3

Question

Vuetify 2.0.0-beta.0 acaba de ser lanzado y quiero probarlo y jugar en una nueva aplicación de prueba vue. Pero recibo errores cuando intento instalarlo en un nuevo proyecto nuevo. Aquí están los pasos que he tomado.

Uso @vue/cli v3.8.2 para crear un nuevo proyecto con la configuración predeterminada:

vue create testapp

lo que me da un resultado exitoso:

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

 $ cd testapp
 $ npm run serve

Luego agrego el complemento vuetify al proyecto con la configuración predeterminada (recomendada):

cd testapp
vue add vuetify

lo que me da éxito:

📦  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

Ahora en package.json veo la versión de vuetify: "vuetify": "^1.5.5"

Ahora lo actualizo a la v2.0.0-beta.0 así:

npm install [email protected]

Tengo éxito otra vez:

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

Ahora cuando trato de ejecutarlo:

npm run serve

Me sale el error:

> [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 instalo sass-loader así:

npm i -D node-sass sass-loader

Tengo éxito Luego trato de ejecutarlo de nuevo:

npm run serve

Ahora nuevamente obtengo un error diferente:

 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

Estoy atrapado aquí ya que no sé cómo solucionar este error. npm install --save vuetify/src/stylus/app.styl obviamente no funciona. Tampoco pude hacerlo funcionar siguiendo la página oficial de vuetify para esta versión beta.

Answer 1

Después de crear un nuevo proyecto vue nuevo, siga esos comandos:

# 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

Creo que incluso funcionará con el proyecto que ya ha creado. Solo prueba los comandos anteriores.

Para obtener más información, consulte la versión v2.0.0-beta.0

Answer 2

No incluya archivos .styl, básicamente está en desuso.
Eliminar node-sass e instalar sass

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

Y modifique su archivo plugins/vuetify.js

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


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

Y main.js

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

Tenga en cuenta que las opciones de tema cambiaron en v2, el tema oscuro ahora se puede personalizar, por ejemplo

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

Más en docs y nuevos documentos de estilo con respecto a sass.