Question

我正在尝试将vue与vuex结合使用。但是出现错误，我无法将我的main.js链接到我的app const和我的index.html。

我的设置是：

main.js：

import Vue from 'vue'
import VueRouter from 'vue-router'
import routes from 'routes.js'
import HelloWorld from './components/HelloWorld.vue'

Vue.use(VueRouter)
Vue.config.productionTip = false

const router = new VueRouter({
  routes // short for `routes: routes`
})

new Vue({ // eslint-disable-line no-unused-vars
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

routes.js：

import HelloWorld from './components/HelloWorld.vue'

export const routes = [
  {
    path: '/',
    component: HelloWorld,
    name: 'Hello'
  }
]

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title>vue-example</title>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but vue-example doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app">
      <router-link :to="{ name: 'Hello' }">Home</router-link>
      <router-view></router-view>
    </div>
  </body>
</html>

<script src="./src/main.js"></script>

我的新错误：

Answer 1

对于原始问题

如评论中所述，这是一个eslint错误。您很可能会使用vue-cli设置项目，默认情况下，该项目会随项目附带eslint配置。 Eslint is a tool会检查您的代码以防止某种错误。

就您而言，在main.js中，您正在执行以下操作：

const app = new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

当您使用app变量时，您对该变量不执行任何操作。埃斯林特（Eslint）抱怨说-很好，因为没有使用var通常是由于人为错误造成的，并且是一个错误-。

您可以跳过变量分配，只需：

new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

没有app变量。

或者您可以在前面的行中添加评论，例如：

// eslint-disable-next-line no-unused-vars
new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

据我所知，您的问题与vuex无关。

此外，如果您真的想在应用程序的任何其他部分中使用app，只需添加：

export default app位于main.js文件的末尾。这也将解决此错误，因为现在您实际上是在使用app变量。

一些提示：

您可以设置任何编辑器以使用eslint。因此，当您违反某些eslint规则时，编辑器本身（如vscode）将为您提供视觉反馈。如果需要，还将设置注释以忽略特定行中的eslint规则。
您可以配置伴游行为by adding an .eslintrc configuration file to your project。在您的特定情况下，我认为eslint禁止您编译该代码是一件好事（未使用的var充其量会误导您），但是有时您可能不想遵循某些eslint规则，具体取决于您的代码风格和许多考虑因素。 / p>

对于问题版本

现在，您已解决了先前的eslint错误，您将获得一个新的错误： do not use new for side effects

同样，这种保留规则通常是有道理的：new调用旨在返回对象，因此从技术上讲，在不将结果分配给变量的情况下，您不应使用new。

但是，Vue api实际上可以做到这一点，因此这次您需要忽略eslint：

// eslint-disable-next-line no-new
new Vue({
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

这应该可以解决问题。要了解如何使用注释来禁用特定的eslint规则，请this answer helps a lot。

Answer 2

这是eslint rule。它阻止您创建从未使用过的变量。要针对此特定行禁用此规则，只需输入：

const app = new Vue({ // eslint-disable-line no-unused-vars
  el: '#app',
  router,
  components: {
    HelloWorld
  }
})

要在整个项目中禁用此规则，只需在主项目目录中创建一个名为.eslintrc.js的文件（如果尚不存在）

module.exports = {
  rules: {
  'no-unused-vars': 0 //or false,
  }
}

或者您只是不将vue实例分配给变量：

new Vue({
      el: '#app',
      router,
      components: {
        HelloWorld
     }
})

使用Vuex设置Vue.js

2 个答案:

对于原始问题

对于问题版本