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

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

6 голосов
/ 29 мая 2019

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

+ vue-cli-plugin-vuetify@0.5.0
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 vuetify@2.0.0-beta.0

Я снова получаю успех: 

+ vuetify@2.0.0-beta.0
updated 1 package and audited 23980 packages in 10.302s
found 0 vulnerabilities

Теперь, когда я пытаюсьзапустите его: 

npm run serve

Я получу сообщение об ошибке: 

> testapp@0.1.0 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-загрузчик следующим образом: 

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 для этой бета-версии.

Ответы [ 2 ]

10 голосов
/ 29 мая 2019

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

6 голосов
/ 29 мая 2019

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

...