文章/答案/技术大牛

发布

社区首页 >问答首页 >与Jhipster一起使用Vuetify

问与Jhipster一起使用Vuetify
EN

Stack Overflow用户

提问于 2021-08-30 06:00:47

回答 1查看 182关注 0票数 1

有谁能成功地将JHipster及其主题与Vuetify结合起来？我仍在努力整合，但仍未实现。我有使用vuetify的项目，但是我们想要使用Jhipster移动基础，当涉及到默认的前端时，我仍然坚持集成我当前的vuetify实现。

希望对JHipster的使用有一些建议和指导。蒂娅。

vuetify.js

jhipster

回答 1

Stack Overflow用户

回答已采纳

发布于 2022-01-04 08:10:27

我用webpack安装的。这里

从主项目文件位置，安装vuetify。

npm install vuetify
npm install sass@~1.32 sass-loader deepmerge -D

您需要创建一个名为webpack.config.js的文件

在里面：

    // webpack.config.js

module.exports = {
    rules: [
      {
        test: /\.s(c|a)ss$/,
        use: [
          'vue-style-loader',
          'css-loader',
          {
            loader: 'sass-loader',
            // Requires sass-loader@^7.0.0
            options: {
              implementation: require('sass'),
              fiber: require('fibers'),
              indentedSyntax: true // optional
            },
            // Requires sass-loader@^8.0.0
            options: {
              implementation: require('sass'),
              sassOptions: {
                fiber: require('fibers'),
                indentedSyntax: true // optional
              },
            },
          },
        ],
      },
    ],
  }

创建一个文件插件/vuatefy.js

    // src/plugins/vuetify.js
    
    import Vue from 'vue'
    import Vuetify from 'vuetify'
    import 'vuetify/dist/vuetify.min.css'
    
    
    Vue.use(Vuetify)
    
    const opts = {}
    
    export default new Vuetify(opts)

在main.ts或main.js中添加vuetify

// vuetify-import
import vuetify from '@/plugins/vuetify' // path to vuetify export
.
.
.
new Vue({
  vuetify,

index.html

<!DOCTYPE html>
<html class="no-js" lang="en" dir="ltr">

  <head>
  <!-- Vuetify icons -->
      <link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
      <link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
  </head>

app.vue不要忘记将div改为v-app。

<template>
      <v-app id="app">
        <ribbon></ribbon>
        <div id="app-header">
          <jhi-navbar></jhi-navbar>
        </div>
        <div  >
          <router-view></router-view>
    
          <b-modal id="login-page" hide-footer lazy>
            <span data-cy="loginTitle" slot="modal-title" id="login-title" v-text="$t('login.title')">Sign in</span>
            <login-form></login-form>
          </b-modal>
           <jhi-footer></jhi-footer>
        </div>
    
        
      </v-app>
      
    </template>
    
    <script lang="ts" src="./app.component.ts"></script>

关键点

您必须确定plugins/vuatefy.js文件的位置。
别忘了添加v-app标签。
不要害怕创建文件。

这是我的解决方案。但是，如果您有一个现成的项目，项目视图可能看起来不同的bcx的vuetify。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/68979510

复制

相似问题

问与Jhipster一起使用Vuetify
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与Jhipster一起使用VuetifyEN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问与Jhipster一起使用Vuetify
EN