Я довольно новичок в vue. js, поэтому заранее прошу прощения, если вопрос глуп, но я застрял в проблеме, которую не могу обойти.
Я создал pwa с помощью vue cli и попытался установить этот пример pomodoro , скопировав / вставив код в мое приложение. Но когда я запускаю сервер, приложение не отображается на домашней странице. Как заставить приложение работать на моем индексе. html?
Моя структура каталогов:
sr c -> views -> Home. vue (я копирую / вставляю html и JS здесь)
publi c -> pomo. css (скопируйте / вставьте сюда css)
Вот мой индекс. html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<link rel="manifest", href="/manifest.json">
<link rel="stylesheet" href="/main.css">
<title>pomodoro</title>
</head>
<body>
<noscript>
<strong>We're sorry but pomo doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="pomoApp"></div>
<!-- built files will be auto injected -->
</body>
</html>
Ниже приведено the Home. vue file:
<template>
<div class="header">
<h1 class="cover-heading">Pomodoro Clock</h1>
<div class="appBox" id="pomoApp">
<div class="pBox" @click="start" title="Click to start">
<div class="timer">{{ stateMsg }}<br>{{ display }}</div>
<div class="hover-play" v-bind:class="{ 'hover-playing': state}">
<i class="fa fa-play-circle"></i>
</div>
</div>
<div class="timer-ctrl">
<label>Session:
<input type="text" v-model="sessionCtrl" maxlength="2" class="timer-box-input">
</label>
<input type="range" v-model="sessionCtrl" min="0" max="60" class="timer-slider">
<label>Break:
<input type="text" v-model="breakCtrl" maxlength="2" class="timer-box-input">
</label>
<input type="range" v-model="breakCtrl" min="0" max="60" class="timer-slider">
<button type="button" class="btn btn-danger" @click="reset">Reset</button>
</div>
</div>
</div>
</template>
<script>
const AUDIO = [new Audio('https://www.dropbox.com/s/5d2dy8xr29246l3/KeyChimes.mp3?raw=1')];
var STOP = 0,
START = 1,
BREAK = 2,
PAUSE = 3,
TIMEOUT = 4,
DEFAULT_TIME = 1500000,
DEFAULT_BREAK_TIME = 300000,
DEFAULT_MINUTE = 25,
DEFAULT_BREAK = 5,
RESET_TOKEN = 0;
var vm = new Vue({
el: '#pomoApp',
data: {
limit: DEFAULT_TIME,
_limit: DEFAULT_TIME,
counter: DEFAULT_TIME,
sessionCtrl: 0,
breakCtrl: 0,
startTime: null,
timerID: null,
state: STOP,
stateMsg: 'Session',
},
computed: {
display: function() {
return this.cMinute + ':' + this.cSecond;
},
cMinute: function() {
var strMin = 0;
if (this.state == STOP) {
strMin = this.sessionCtrl;
} else {
strMin = ((this.counter / 1000) / 60) | 0;
}
if (strMin < 10)
return '0' + strMin;
else
return strMin;
},
cSecond: function() {
var strSec = ((this.counter / 1000) % 60) | 0;
if (strSec < 10)
return '0' + strSec;
else
return strSec;
}
},
created: function() {
if (localStorage.length) {
this.syncLocalStorage();
} else {
this.sessionCtrl = DEFAULT_MINUTE;
this.breakCtrl = DEFAULT_BREAK;
}
},
watch: {
sessionCtrl: function(val) {
if (RESET_TOKEN != 1) localStorage.setItem('sessionCtrl', val);
},
breakCtrl: function(val) {
if (RESET_TOKEN != 1) localStorage.setItem('breakCtrl', val);
}
},
methods: {
start: function() {
if (this.state != START) {
this.state = START;
this.startTime = Date.now();
var newLimit = this.sessionCtrl * 60 * 1000;
if (newLimit != this.limit) {
this.limit = newLimit;
this.counter = newLimit;
}
if (!this.timerID) {
this.timerID = setInterval(this.countdown.bind(this), 100);
}
}
return this.timerID;
},
countdown: function() {
if (this.state == START || this.state == BREAK) {
this.counter = this.limit - (Date.now() - this.startTime);
if (this.counter <= 0) {
AUDIO[0].play();
if (this.state == BREAK) {
this.state = START;
this.stateMsg = 'Session';
this.startTime = Date.now();
this.limit = this.sessionCtrl * 60 * 1000;
} else if (this.state == START) {
this.state = BREAK;
this.stateMsg = '- Break -';
this.startTime = Date.now();
this.limit = this.breakCtrl * 60 * 1000;
}
}
}
return this.counter;
},
reset: function() {
RESET_TOKEN = 1;
this.state = STOP;
this.stateMsg = 'Session';
this.sessionCtrl = DEFAULT_MINUTE;
this.breakCtrl = DEFAULT_BREAK;
clearInterval(this.timerID);
this.startTime = this.timerID = null;
this.counter = this.limit = this._limit = DEFAULT_TIME;
localStorage.clear();
return this.counter;
},
syncLocalStorage: function() {
this.sessionCtrl = localStorage.getItem('sessionCtrl');
this.breakCtrl = localStorage.getItem('breakCtrl');
}
}
});
</script>
Какие изменения я должен внести в это, чтобы увидеть шаблон Home. vue, отображаемый здесь?