时间戳

首页 > 解决方案 > 将 Vuetify 与 Jhipster 一起使用

vuetify.js - 将 Vuetify 与 Jhipster 一起使用

问题描述

有没有人成功地将 Vuetify 及其主题与 JHipster 集成？我仍在尝试整合但仍然没有发生。我有使用 vuetify 的项目，但我们想使用 Jhipster 移动基础，当涉及到默认前端时，我坚持集成我当前的 vuetify 实现。

希望有关于将 vuetify 与 JHipster 一起使用的建议和指导。蒂亚。

标签： vuetify.jsjhipster

解决方案

我为此使用了 webpack 安装。这里

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

npm install vuetify
npm install sass@~1.32 sass-loader deepmerge -D
  1. 您需要创建一个名为 webpack.config.js 的文件
    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
              },
            },
          },
        ],
      },
    ],
  }
  1. 创建文件 plugins/vuetify.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)
  1. 将 vuetify 添加到 main.ts 或 main.js
// vuetify-import
import vuetify from '@/plugins/vuetify' // path to vuetify export
.
.
.
new Vue({
  vuetify,
  1. 索引.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>
  1. 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/vuetify.js 文件的位置。
  • 不要忘记添加 v-app 标签。
  • 不要害怕创建文件。

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

推荐阅读