我安装了gruhn/vue-qrcode-reader软件包来读取QR码.
这是我的qrscan.blade.php
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Vue</title>
<link href="{{ mix('css/app.css') }}" rel="stylesheet" type="text/css">
</head>
<body>
<div id="app"></div>
<script src="{{ mix('js/app.js') }}"></script>
</body>
</html>
app.js
require('./bootstrap');
window.Vue = require('vue');
import Vue from 'vue'
import VueQrcodeReader from 'vue-qrcode-reader'
Vue.use(VueQrcodeReader)
const app = new Vue({
el: '#app',
components: { App },
});
和我的vue-qrcode-reader.vue
<template>
<QrcodeReader
:paused="paused"
@decode="onDecode"
@init="onInit">
<div v-if="content" class="decoded-content">{{ content }}</div>
<LoadingIndicator v-show="loading" />
</QrcodeReader>
</template>
<script>
import { QrcodeReader } from 'vue-qrcode-reader'
import InitHandler from '@/mixins/InitHandler'
export default {
components: { QrcodeReader },
mixins: [ InitHandler ],
data () {
return {
paused: false,
content: null
}
},
methods: {
onDecode (content) {
this.content = content
this.paused = true
}
}
}
</script>
<style scoped>
.
.
.
</style>
这是我的路线
Route::get('/qrscan', 'InventoryItemController@QRscan');
我究竟做错了什么？我得到的只是空白页面,就像我的.vue文件没有检测到我的.vue文件一样.
你启动npm run build或yarn build命令了吗？
因为您需要先编译文件，然后才能在导航器中使用它。如果您想在每次保存文件时更新构建，请使用npm run watch或yarn watch。
您的 .vue 文件不会被导航器加载，它将被编译为经典的 javascript 文件。
希望对您有帮助。