首页 > 解决方案 > VueJs 不适用于 Laravel 5.6

问题描述

我刚刚安装了新laravel的和npm+ vue-axios&vue-router但不知何故我的组件不会加载。

代码

App.js

require('./bootstrap');

window.Vue = require('vue');

import VueRouter from 'vue-router';
Vue.use(VueRouter);

import VueAxios from 'vue-axios';
import axios from 'axios';
Vue.use(VueAxios, axios);

import App from './App.vue';

import examplecomponent from './components/ExampleComponent.vue';

//settings
import settings from './components/admin/settings/Index.vue';
import passportclients from './components/passport/Clients.vue';
import passportauthorizedclients from './components/passport/AuthorizedClients.vue';
import passportpersonalaccesstokens from './components/passport/PersonalAccessTokens.vue';


const routes = [
    {
        path: '/',
        component: examplecomponent,
        name: 'examplecomponent'
    },
    {
        path: '/settings',
        component: settings,
        name: 'settings'
    },
    {path: 
        '/passportclients',
        component: passportclients,
        name: 'passportclients'
    },
    {path: 
        '/passportauthorizedclients',
        component: passportauthorizedclients,
        name: 'passportauthorizedclients'
    },
    {path: 
        'passportpersonalaccesstokens',
        component: passportpersonalaccesstokens,
        name: 'passportpersonalaccesstokens'
    },
];

const router = new VueRouter({ mode: 'history', routes: routes});
new Vue(Vue.util.extend({ router }, App)).$mount('#app');

package.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.18",
        "bootstrap": "^4.0.0",
        "popper.js": "^1.12",
        "cross-env": "^5.1",
        "jquery": "^3.2",
        "laravel-mix": "^2.0",
        "lodash": "^4.17.4",
        "vue": "^2.5.7"
    },
    "dependencies": {
        "vue-axios": "^2.1.2",
        "vue-router": "^3.0.1"
    }
}

知道为什么我不能得到我的组件吗?

标签: laravelvue.jsvuejs2

解决方案


推荐阅读