Настройка Vue.js с Vuex - PullRequest
Новая
       9

Настройка Vue.js с Vuex

0 голосов
/ 13 ноября 2018

Я пытаюсь объединить 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
  }
})

rout.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>

Моя новая ошибка: enter image description here

Ответы [ 2 ]

0 голосов
/ 13 ноября 2018

Это правило eslint .Это мешает вам создавать переменные, которые вы никогда не используете.Чтобы отключить это правило для этой конкретной строки, просто напишите: 

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
     }
})
0 голосов
/ 13 ноября 2018

Для исходного вопроса

Как сказано в комментарии, это ошибка eslint.Скорее всего, вы настроили свой проект с помощью vue-cli, который по умолчанию поставляет ваш проект с конфигурацией eslint. Eslint - это инструмент , который проверяет ваш код на наличие каких-либо ошибок.

В вашем случае, в main.js вы выполняете: 

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

Когда вы назначаете переменную app, но вы ничего не делаете с этой переменной.Эслинт жалуется на это, поскольку неиспользуемые переменные обычно являются следствием человеческой ошибки и являются ошибкой.

Вы можете просто пропустить присвоение переменной и просто: 

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

Без переменной приложения.

или вы можете добавить комментарий в строку, например: 

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

Ваша проблема, насколько я знаю, не имеет никакого отношения к vuex.

Кроме того, если вы действительно хотите использовать app в любой другой части вашего приложения, просто добавьте:

export default app в конце файла main.js.Это также исправит эту ошибку, поскольку теперь вы на самом деле что-то делаете с переменной app.

Несколько советов:

  • Вы можете настроить любой редактор на работус Эслинт.Таким образом, сам редактор (например, vscode) даст вам визуальную обратную связь, когда вы нарушите некоторые правила eslint.Также вы можете настроить комментарии на игнорирование правил eslint в определенных строках, если хотите.

  • Вы можете настроить поведение eslint , добавив файл конфигурации .eslintrc в ваш проект ,В вашем конкретном случае, я думаю, хорошо, что eslint запрещает вам компилировать этот код (неиспользуемые переменные в лучшем случае вводят в заблуждение), но иногда вы можете не захотеть следовать некоторым правилам eslint, в зависимости от стиля кода и многих соображений.1043 *

Для редакции вопроса

Теперь, когда вы исправили предыдущую ошибку eslint, вы получаете новую: do not use new for side effects

ThisПравило eslint, опять же, обычно имеет некоторый смысл: new вызовы предназначены для возврата объекта, поэтому технически не следует использовать new без присвоения результата переменной.

Однако VueAPI фактически делает это, поэтому на этот раз вы должны игнорировать eslint: 

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

Это должно сработать.Чтобы понять, как можно использовать комментарии для отключения определенных eslint правил, этот ответ очень помогает .

...