如何正确安装 Vuetify for Rails? [英] How to properly install Vuetify for Rails?

问题描述

Javascript 错误:

[Vuetify] 检测到多个 Vue 实例见 https://github.com/vuetifyjs/vuetify/issues/4068如果你看到$attrs is readonly"，这是由这个引起的consoleError @ vuetify.js:22001安装@ vuetify.js:16239Vue.use @ vue.esm.js:4751安装@ vuetify.js:17943Vue.use @ vue.esm.js:4751(匿名)@application.js:22__webpack_require__ @ 引导程序 0e105d68ff80c96169ef:19(匿名)@bootstrap 0e105d68ff80c96169ef:62(匿名)@bootstrap 0e105d68ff80c96169ef:62

尝试过:

• 按照 这个 github 问题.这会导致一个不同的问题(vue 的仅运行时构建，没有模板解析)

详情:

我有一个 Rails 应用程序，我想在其中使用 Vuetify 的 创建导航抽屉.根据 Vuetify 的快速入门指南，我使用 $ npm install vuetify 安装--保存.然后对于功能检查，我在我的单个文件组件之一中使用了他们自己的示例:

模板

<!-- app/javascript/navigation-drawer.vue --><模板><div id="导航抽屉"><v-navigation-drawer 永久的><v-工具栏平面><v-list><v-list-tile><v-list-tile-title class="title">应用</v-list-tile-title></v-list-tile></v-list></v-工具栏><v-divider></v-divider><v-list密集类=pt-0"><v-list-tilev-for="项目中的项目":key="item.title"@click=""><v-list-tile-action><v-icon>{{ item.icon }}</v-icon></v-list-tile-action><v-list-tile-content><v-list-tile-title>{{ item.title }}</v-list-tile-title></v-list-tile-content></v-list-tile></v-list></v-navigation-drawer>

<脚本>导出默认{数据 () {返回 {项目: [{标题:'首页'，图标:'仪表板'}，{ 标题:'关于'，图标:'question_answer' }],右:空}}}

主应用程序.js

从 'vue-turbolinks' 导入 TurbolinksAdapter从 'vue/dist/vue.esm' 导入 Vue从bootstrap-vue"导入 BootstrapVue从 'vuetify' 导入 Vuetify从 '../navigation-drawer.vue' 导入 NavigationDrawer导入'bootstrap/dist/css/bootstrap.css'导入'bootstrap-vue/dist/bootstrap-vue.css'Vue.use(TurbolinksAdapter)Vue.use(BootstrapVue)Vue.use(Vuetify)Vue.component('navigation-drawer', NavigationDrawer)document.addEventListener('turbolinks:load', () => {const app = new Vue({el: '[data-behavior="vue"]'})})

NPM vuetify 版本

$ npm list vuetifybarber-ranks@/path/to/app/barber-ranks└── vuetify@1.3.11

NPM vue 版本

$ npm list vuebarber-ranks@/path/to/app/barber-ranks├── vue@2.5.17└─┬ vue-turbolinks@2.0.3└── vue@2.5.17

注意，这个 rails 项目同时使用 npm 和 yarn 来管理节点包.我不确定这是否会造成冲突.

解决方案

发现于 这个问题，你可以解决Vue路径并使Vuetify实例与Vue一起工作.

在你的 config 中网络包environment.js 添加:

const { environment } = require('@rails/webpacker')const vue = require('./loaders/vue')environment.loaders.append('vue', vue)const 解析器 = {解决: {别名:{'vue$': 'vue/dist/vue.esm.js'}}}environment.config.merge(解析器)module.exports = 环境

在 javascript > application.js 中，您现在可以像这样导入 Vue 和 Vuetify，没有错误:

从'vue'导入Vue从 'vuetify' 导入 Vuetify

Javascript Error:

[Vuetify] Multiple instances of Vue detected
See https://github.com/vuetifyjs/vuetify/issues/4068

If you're seeing "$attrs is readonly", it's caused by this
consoleError @ vuetify.js:22001
install @ vuetify.js:16239
Vue.use @ vue.esm.js:4751
install @ vuetify.js:17943
Vue.use @ vue.esm.js:4751
(anonymous) @ application.js:22
__webpack_require__ @ bootstrap 0e105d68ff80c96169ef:19
(anonymous) @ bootstrap 0e105d68ff80c96169ef:62
(anonymous) @ bootstrap 0e105d68ff80c96169ef:62

Tried:

• Importing from 'vue' instead of from 'vue/dist/vue.esm' as proposed in this github issue. This causes a different problem (runtime-only build for vue without template parsing)

Details:

I have a Rails app where I would like to create a navigation drawer using Vuetify's <v-navigation-drawer>. As per Vuetify's Quick Start Guide, I installed using $ npm install vuetify --save. Then for a functionality check I used their own example in one of my single file components:

The Template

<!-- app/javascript/navigation-drawer.vue -->
<template>
    <div id="nav-drawer">
        <v-navigation-drawer permanent>
            <v-toolbar flat>
                <v-list>
                    <v-list-tile>
                        <v-list-tile-title class="title">
                           Application
                        </v-list-tile-title>
                    </v-list-tile>
                </v-list>
            </v-toolbar>

            <v-divider></v-divider>

            <v-list dense class="pt-0">
                <v-list-tile
                    v-for="item in items"
                    :key="item.title"
                    @click=""
                >
                   <v-list-tile-action>
                       <v-icon>{{ item.icon }}</v-icon>
                   </v-list-tile-action>

                   <v-list-tile-content>
                       <v-list-tile-title>{{ item.title }}</v-list-tile-title>
                    </v-list-tile-content>
                </v-list-tile>
            </v-list>
        </v-navigation-drawer>
    </div>
</template>

<script>
   export default {
       data () {
           return {
               items: [
                { title: 'Home', icon: 'dashboard' },
                { title: 'About', icon: 'question_answer' }
            ],
            right: null
        }
    }
}

Main application.js

import TurbolinksAdapter from 'vue-turbolinks'
import Vue from 'vue/dist/vue.esm'
import BootstrapVue from 'bootstrap-vue'
import Vuetify from 'vuetify'
import NavigationDrawer from '../navigation-drawer.vue'

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

Vue.use(TurbolinksAdapter)
Vue.use(BootstrapVue)
Vue.use(Vuetify)

Vue.component('navigation-drawer', NavigationDrawer)

document.addEventListener('turbolinks:load', () => {
  const app = new Vue({
    el: '[data-behavior="vue"]'
  })
})

NPM vuetify version

$ npm list vuetify
barber-ranks@ /path/to/app/barber-ranks
└── vuetify@1.3.11 

NPM vue version

$ npm list vue
barber-ranks@ /path/to/app/barber-ranks
├── vue@2.5.17 
└─┬ vue-turbolinks@2.0.3
  └── vue@2.5.17 

Note that this rails project uses both npm and yarn to manage node packages. I am not sure if this could create a conflict.

解决方案

Found in this issue, you can resolve Vue path and make Vuetify instance working with Vue.

In your config > webpack > environment.js add:

const { environment } = require('@rails/webpacker')
const vue =  require('./loaders/vue')

environment.loaders.append('vue', vue)

const resolver = {
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
    }
  }
}
environment.config.merge(resolver)

module.exports = environment

In javascript > application.js, you can now import Vue and Vuetify like this with no error:

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

这篇关于如何正确安装 Vuetify for Rails?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！