Question

我正在开始使用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>

我该如何解决？

EDIT2：

<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'的动作

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

现在我看到了：

Answer 1

了解ENV变量。

我也建议您使用值创建js文件，在其中添加导出并在nuxt组件中使用此文件变量。

另一个变种可能是使用Vuex存储。例如，您可以在其中创建模块mainMeny并在其中定义链接，标题和网址的数量。

Answer 2

使用Vuex完成。

在存储区/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>

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

点击运行摘要后，请在整页中单击以查看其运行情况。

以Nuxt网站为模板

2 个答案: