2

在此处输入图像描述

我开始使用 nuxt 和 vue。我想使用 vue 创建一个简单的站点，然后使用以下命令将其转换为静态站点：

nuxt generate

我已经能够使用 nuxt 和 vuetify 来做到这一点（你可以在https://github.com/kc1/nuxt4看到这个）。

有没有办法将此 nuxt 项目用作模板并使用文件执行“查找和替换”以生成个性化网站？

举个例子。工具栏组件是：

<template>
  <v-toolbar color="indigo" dark>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn>
    </v-toolbar-items>
  </v-toolbar>
</template>

有没有办法更换：

Title - > My project
Link One -> Home
Link Two -> About
Link Three -> Contact

在将其生成为静态站点之前还是之后？

编辑：

在 nuxt 2.34的https://nuxtjs.org/guide/vuex-store页面之后，在 /store/store.js 我放置了：

export const state = () => ({
'toolbarActions' : [ 'My project', 'Home', 'About', 'Contact' ]

})

我仍然得到：

ERROR  [Vue warn]: data functions should return an object:                                                                                         20:59:31
https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

found in

---> <Menu> at components/menu.vue
    <Default> at layouts/default.vue
        <Root>


ERROR  [Vue warn]: Error in render: "TypeError: Cannot use 'in' operator to search for 'toolbarActions' in undefined"                              20:59:31

found in

---> <Menu> at components/menu.vue
    <Default> at layouts/default.vue
        <Root>

我怎样才能解决这个问题？

编辑2：

<template>
  <v-toolbar color="indigo" dark>
    <v-toolbar-side-icon></v-toolbar-side-icon>
    <v-toolbar-title class="white--text">Title</v-toolbar-title>
    <v-spacer></v-spacer>
    <v-toolbar-items class="hidden-sm-and-down">
       <v-btn flat v-for="action in toolbarActions" :key="action">{{action}}</v-btn>
             <!-- <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn> -->
      <!-- <v-btn flat>Link One</v-btn>
      <v-btn flat>Link Two</v-btn>
      <v-btn flat>Link Three</v-btn> -->
    </v-toolbar-items>
  </v-toolbar>
</template>

// 从 '~/store/store.js' 导入toolbarActions

export default {
computed: {
toolbarActions() {
  return this.$store.getters.loadedPosts
.....

现在我看到：

在此处输入图像描述

4

2 回答 2

2

阅读有关 ENV 变量的信息。

另外我建议你用值创建 js 文件，添加导出并在 nuxt 组件中使用这个文件变量。

另一个变体可能是使用 Vuex 商店。你可以在那里创建例如模块 mainMeny 并在那里定义链接、标题和 URL 的数量。

于 2018-12-29T21:40:49.313 回答
1

使用 Vuex 来完成它。

在 store 中创建一个文件：/store/store.js

在那里。

const store = new Vuex.Store({
  state: {
    toolbarActions : [ 'My project', 'Home', 'About', 'Contact' ]
  }
})

在你的组件中

<template>
...
    <v-toolbar-items class="hidden-sm-and-down">
      <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn>
    </v-toolbar-items>
...
</template>

export default {
  computed: {
    toolbarActions() {
      return this.$store.getters.loadedPosts
    }
  }
}

这将使您了解 Vuex 在开始时是如何工作的。

已编辑

请改用计算属性。让我知道。

已编辑 2

new Vue({
	el: '#app',
  computed: {
    toolbarActions: function() {
      return [ 'My project', 'Home', 'About', 'Contact' ]
    }
  }

})
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.15/vuetify.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/vuetify/1.3.15/vuetify.css" />
     
     <div id="app">
     <v-toolbar color="indigo" dark>
        <v-toolbar-side-icon></v-toolbar-side-icon>
        <v-toolbar-title class="white--text">Title</v-toolbar-title>
        <v-spacer></v-spacer>
        <v-toolbar-items class="hidden-sm-and-down">
           <v-btn flat v-for="action in toolbarActions" :key="action">{{action}}</v-btn>
                 <!-- <v-btn flat v-for="action in toolbarActions">{{action}}</v-btn> -->
          <!-- <v-btn flat>Link One</v-btn>
          <v-btn flat>Link Two</v-btn>
          <v-btn flat>Link Three</v-btn> -->
        </v-toolbar-items>
      </v-toolbar>
     </div>

PD： <v-toolbar-items class="hidden-sm-and-down">隐藏在小型设备中的按钮。

单击运行片段后，单击整页以查看它的工作情况。

于 2018-12-29T23:24:34.763 回答