package.json
{ "private": true, "scripts": { "dev": "npm run development", "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --config=webpack.config.js", "watch": "npm run development -- --watch", "watch-poll": "npm run watch -- --watch-poll", "prod": "npm run production", "production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --config=webpack.config.js" }, "devDependencies": { "axios": "^0.19", 'vue' => '^2.5.17', "cross-env": "^7.0", "lodash": "^4.17.19" }}index.html
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Hello Vue</title> <script src="js/app.js" defer></script> <link href="css/app.css" rel="stylesheet"></head><body> <div id="app"> <example-component></example-component> </div></body></html>src/js/bootstrap.js
window._ = require('lodash');window.axios = require('axios');window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';src/js/app.js
require('./bootstrap');window.Vue = require('vue').default;/** * 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". */// 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);const app = new Vue({ el: '#app',});src/js/components/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>