laravel - 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"
}
}
知道为什么我不能得到我的组件吗?
解决方案
推荐阅读
- javascript - 比较和过滤对象中的日期属性
- php - 通过将参数数组传递给 __construct() 来创建对象的函数?
- c# - HttpClient 从 URL 下载图片然后上传图片
- php - 在 url 中找不到带有 % 的 Wordpress rest api
- ios - 将 FCMToken 上传到 Firestore 的正确方法?
- jira - Jira 使用 JQL 获取修复版本/发布列表
- xml - 适用于所有分辨率的 Xamarin Android 边距
- animation - 为什么在 SwiftUI 中颜色视图似乎比图像视图褪色更快?
- node.js - Zapier:无法获得原始响应
- https - 我可以通过 HTTPS 将登录凭据传递到网络硬件吗?