Как установить бета-версию vuetify 2.0 в новый проект vue cli?

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.js vuetify.js vue-cli-3
person mlst    schedule 29.05.2019    source источник
comment
Вышла версия 2.0.0. Инструкции по установке и обновлению см. Здесь: github.com/vuetifyjs/vuetify/releases/v2.0.0 < / а>   -  person kaybee99    schedule 25.07.2019

Ответы (2)


arrow_upward
10
arrow_downward

После создания нового нового проекта 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

person roli roli    schedule 29.05.2019
comment
это должен быть правильный ответ, так как это работает для beta.2 без лишних хлопот ... также должно быть в документации :) - person Benny K; 18.06.2019

arrow_upward
11
arrow_downward

Не включайте файлы .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')

Параметры темы заметки изменены в версии 2, теперь можно настроить темную тему, например

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

Подробнее см. docs и новые документы стиля в отношении sass.

person Traxo    schedule 29.05.2019
comment
как я могу использовать пряжу для удаления node-sass и добавления sass и sass-loader? - person Kick Buttowski; 29.01.2020
comment
@KickButtowski попробуй yarn remove node-sass и yarn add sass - person Traxo; 29.01.2020