Laravel+Vue環境で eslintを入れているのですが、eslint実行時に
error 'Vue' is not defined
が出てしまいます。(ターミナルにエラーは出るものの、Vueファイルのコンパイル自体はできる)
原因がわからないので、教えていただけると幸いです。
各種ファイルの設定以下の通りです。
app.js
js
/** * First we will load all of this project's JavaScript dependencies which * includes Vue and other libraries. It is a great starting point when * building robust, powerful web applications using Vue and Laravel. */ require('./bootstrap'); window.Vue = require('vue'); /** * The following block of code may be used to automatically register your * Vue components. It will recursively scan this directory for the Vue * components and automatically register them with their "basename". * * Eg. ./components/ExampleComponent.vue -> <example-component></example-component> */ // const files = require.context('./', true, /.vue$/i) // files.keys().map(key => Vue.component(key.split('/').pop().split('.')[0], files(key).default)) Vue.component('example-component', require('./components/ExampleComponent.vue').default); /** * Next, we will create a fresh Vue application instance and attach it to * the page. Then, you may begin adding components to this application * or customize the JavaScript scaffolding to fit your unique needs. */ const app = new Vue({ el: '#app', });
ExampleComponent.vue
<template> <div class="container"> <div class="row justify-content-center"> <div class="col-md-8"> <div class="card"> <div class="card-header">Example Component</div> <div class="card-body"> I'm an example component. </div> </div> </div> </div> </div> </template> <script> export default { mounted() { console.log('Component mounted.') } } </script>
eslintrc.js
let rules = { "no-unused-vars": ["warn", { vars: "local", args: "none" }], "no-undef": "warn", "no-redeclare": "warn", "no-debugger": "warn", "no-console": "warn", "no-empty": "warn" }; if (process.env.NODE_ENV == "production") { rules["no-debugger"] = "error"; rules["no-console"] = "error"; } module.exports = { plugins: [ "vue" ], extends: [ "eslint:recommended", "plugin:vue/essential", 'plugin:vue/recommended'// vue.js使ってなくてもlaravel-mix-eslintの仕様上必要 ], env: { browser: true, es6: true, amd: true, jquery: true }, parserOptions: { parser: 'babel-eslint', ecmaVersion: "2018" }, rules: { "quotes": ["warn", "single"] }, globals:[ "Vue: true" ] };
webpack.mix.js
js
const mix = require('laravel-mix'); const path = require('path'); require('laravel-mix-eslint'); require('laravel-mix-stylelint'); /* |-------------------------------------------------------------------------- | Mix Asset Management |-------------------------------------------------------------------------- | | Mix provides a clean, fluent API for defining some Webpack build steps | for your Laravel application. By default, we are compiling the Sass | file for the application as well as bundling up all the JS files. | */ const styleLintPlugin = require('stylelint-webpack-plugin'); mix.webpackConfig({ plugins: [ new styleLintPlugin({ files: ['**/*.scss'], configFile: path.join(__dirname, '.stylelintrc.js'), syntax: 'scss' }) ] }).eslint(); mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .browserSync({ files: [ 'resources/views/**/*.blade.php', 'public/**/*.*', 'routes/**/*.php', '**/*.php' ], proxy: { target: 'http://127.0.0.1:8000/' } });
index.blade.php
php
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>index</title> </head> <body> <div id="app"> <example-component> </example-component> </div> <script src="{{ mix('js/app.js')}}"></script> </body> </html>
package.json
json
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js" }, "devDependencies": { "axios": "^0.19", "bootstrap": "^4.0.0", "browser-sync": "^2.26.7", "browser-sync-webpack-plugin": "^2.0.1", "cross-env": "^5.1", "eslint": "^6.8.0", "eslint-loader": "^3.0.3", "eslint-plugin-vue": "^6.0.1", "jquery": "^3.2", "laravel-mix": "^4.0.7", "laravel-mix-eslint": "^0.1.3", "laravel-mix-stylelint": "^0.2.0", "lodash": "^4.17.13", "popper.js": "^1.12", "resolve-url-loader": "^2.3.1", "sass": "^1.20.1", "sass-loader": "7.*", "stylelint": "^12.0.0", "stylelint-config-recommended-scss": "^4.1.0", "stylelint-scss": "^3.13.0", "stylelint-webpack-plugin": "^1.1.2", "vue": "^2.5.17", "vue-template-compiler": "^2.6.10" } }
まだ回答がついていません
会員登録して回答してみよう