0
Ich möchte nur mit vue.js versuchen, aber in Schwierigkeiten geraten, wenn ich versuche, eine Vorlage zu verwenden, die ich gekauft habe. Ich habe alle .css und .js Dateien in index.html und dann rufen Sie die Komponenten innerhalb vue.js selbst.Wie HTML-Vorlage mit vue.js verwenden
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<meta content="Preview page of Metronic Admin Theme #1 for statistics, charts, recent events and reports"
name="description"/>
<meta content="" name="author"/>
<title>My Application</title>
<!-- BEGIN GLOBAL MANDATORY STYLES -->
<link href="http://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700&subset=all" rel="stylesheet"
type="text/css"/>
<link href="assets/global/plugins/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/simple-line-icons/simple-line-icons.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/bootstrap-switch/css/bootstrap-switch.min.css" rel="stylesheet" type="text/css"/>
<!-- END GLOBAL MANDATORY STYLES -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<link href="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.css" rel="stylesheet"
type="text/css"/>
<link href="assets/global/plugins/morris/morris.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/fullcalendar/fullcalendar.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/global/plugins/jqvmap/jqvmap/jqvmap.css" rel="stylesheet" type="text/css"/>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL STYLES -->
<link href="assets/global/css/components-md.min.css" rel="stylesheet" id="style_components" type="text/css"/>
<link href="assets/global/css/plugins-md.min.css" rel="stylesheet" type="text/css"/>
<!-- END THEME GLOBAL STYLES -->
<!-- BEGIN THEME LAYOUT STYLES -->
<link href="assets/layouts/layout/css/layout.min.css" rel="stylesheet" type="text/css"/>
<link href="assets/layouts/layout/css/themes/darkblue.min.css" rel="stylesheet" type="text/css" id="style_color"/>
<link href="assets/layouts/layout/css/custom.min.css" rel="stylesheet" type="text/css"/>
<!-- END THEME LAYOUT STYLES -->
<link rel="shortcut icon" href="src/assets/logo.png"/>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/1.1.3/sweetalert.min.css">
<!-- BEGIN CORE PLUGINS -->
<script src="assets/global/plugins/jquery.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap/js/bootstrap.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/js.cookie.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-slimscroll/jquery.slimscroll.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery.blockui.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap-switch/js/bootstrap-switch.min.js" type="text/javascript"></script>
<!-- END CORE PLUGINS -->
<!-- BEGIN PAGE LEVEL PLUGINS -->
<script src="assets/global/plugins/moment.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/bootstrap-daterangepicker/daterangepicker.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/morris/morris.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/morris/raphael-min.js" type="text/javascript"></script>
<script src="assets/global/plugins/counterup/jquery.waypoints.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/counterup/jquery.counterup.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/amcharts.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/serial.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/pie.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/radar.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/light.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/patterns.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amcharts/themes/chalk.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/ammap/ammap.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/ammap/maps/js/worldLow.js" type="text/javascript"></script>
<script src="assets/global/plugins/amcharts/amstockcharts/amstock.js" type="text/javascript"></script>
<script src="assets/global/plugins/fullcalendar/fullcalendar.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/horizontal-timeline/horizontal-timeline.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.resize.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/flot/jquery.flot.categories.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery-easypiechart/jquery.easypiechart.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jquery.sparkline.min.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/jquery.vmap.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.russia.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.world.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.europe.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.germany.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/maps/jquery.vmap.usa.js" type="text/javascript"></script>
<script src="assets/global/plugins/jqvmap/jqvmap/data/jquery.vmap.sampledata.js" type="text/javascript"></script>
<!-- END PAGE LEVEL PLUGINS -->
<!-- BEGIN THEME GLOBAL SCRIPTS -->
<script src="assets/global/scripts/app.min.js" type="text/javascript"></script>
<!-- END THEME GLOBAL SCRIPTS -->
<!-- BEGIN PAGE LEVEL SCRIPTS -->
<script src="assets/pages/scripts/dashboard.js" type="text/javascript"></script>
<!-- END PAGE LEVEL SCRIPTS -->
<!-- BEGIN THEME LAYOUT SCRIPTS -->
<script src="assets/layouts/layout/scripts/layout.min.js" type="text/javascript"></script>
<script src="assets/layouts/layout/scripts/demo.min.js" type="text/javascript"></script>
<script src="assets/layouts/global/scripts/quick-sidebar.min.js" type="text/javascript"></script>
<script src="assets/layouts/global/scripts/quick-nav.min.js" type="text/javascript"></script>
<!-- END THEME LAYOUT SCRIPTS -->
</head>
</head>
<body class="page-header-fixed page-sidebar-closed-hide-logo page-content-white page-md">
<div class="page-wrapper">
<div id="app"></div>
<script src="/dist/build.js"></script>
</div>
</body>
</html>
Alle Seiten ausgeführt werden genannt perfekt und erfolgreich durch vue.js gehört aber nicht erscheint, wenn ich die aufrufende Seite mit <router-link>
Graph.vue verwenden
<template>
<div>
<h1 class="page-title"> Grafik Pages
<small>statistics, charts, recent events and reports</small>
</h1>
<div class="row">
<div class="col-lg-6 col-xs-12 col-sm-12">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-bar-chart font-dark hide"></i>
<span class="caption-subject font-dark bold uppercase">Site Visits</span>
<span class="caption-helper">weekly stats...</span>
</div>
<div class="actions">
<div class="btn-group btn-group-devided" data-toggle="buttons">
<label class="btn red btn-outline btn-circle btn-sm active">
<input name="options" class="toggle" id="option1" type="radio">New</label>
<label class="btn red btn-outline btn-circle btn-sm">
<input name="options" class="toggle" id="option2" type="radio">Returning</label>
</div>
</div>
</div>
<div class="portlet-body">
<div id="site_statistics_loading" style="display: none;">
<img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
<div id="site_statistics_content" class="display-none" style="display: block;">
<div id="site_statistics" class="chart" style="padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 10px; text-align: center;">02/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 58px; text-align: center;">03/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 107px; text-align: center;">04/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 155px; text-align: center;">05/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 203px; text-align: center;">06/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 251px; text-align: center;">07/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 300px; text-align: center;">08/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 348px; text-align: center;">09/2013</div><div style="position: absolute; max-width: 48px; top: 285px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 396px; text-align: center;">10/2013</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 273px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 220px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 166px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div><div style="position: absolute; top: 113px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">3000</div><div style="position: absolute; top: 59px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">4000</div><div style="position: absolute; top: 6px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">5000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 300px;" width="657" height="450"></canvas></div>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
<div class="col-lg-6 col-xs-12 col-sm-12">
<!-- BEGIN PORTLET-->
<div class="portlet light bordered">
<div class="portlet-title">
<div class="caption">
<i class="icon-share font-red-sunglo hide"></i>
<span class="caption-subject font-dark bold uppercase">Revenue</span>
<span class="caption-helper">monthly stats...</span>
</div>
<div class="actions">
<div class="btn-group">
<a href="" class="btn dark btn-outline btn-circle btn-sm dropdown-toggle" data-toggle="dropdown" data-hover="dropdown" data-close-others="true"> Filter Range
<span class="fa fa-angle-down"> </span>
</a>
<ul class="dropdown-menu pull-right">
<li>
<a href="javascript:;"> Q1 2014
<span class="label label-sm label-default"> past </span>
</a>
</li>
<li>
<a href="javascript:;"> Q2 2014
<span class="label label-sm label-default"> past </span>
</a>
</li>
<li class="active">
<a href="javascript:;"> Q3 2014
<span class="label label-sm label-success"> current </span>
</a>
</li>
<li>
<a href="javascript:;"> Q4 2014
<span class="label label-sm label-warning"> upcoming </span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="portlet-body">
<div id="site_activities_loading" style="display: none;">
<img src="../../../assets/global/img/loading.gif" alt="loading"> </div>
<div id="site_activities_content" class="display-none" style="display: block;">
<div id="site_activities" style="height: 228px; padding: 0px; position: relative;"> <canvas class="flot-base" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas><div class="flot-text" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; font-size: smaller; color: rgb(84, 84, 84);"><div class="flot-x-axis flot-x1-axis xAxis x1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 21px; text-align: center;">DEC</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 66px; text-align: center;">JAN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 109px; text-align: center;">FEB</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 151px; text-align: center;">MAR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 197px; text-align: center;">APR</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 239px; text-align: center;">MAY</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 285px; text-align: center;">JUN</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 330px; text-align: center;">JUL</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 371px; text-align: center;">AUG</div><div style="position: absolute; max-width: 43px; top: 209px; font: small-caps 400 11px/18px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 417px; text-align: center;">SEP</div></div><div class="flot-y-axis flot-y1-axis yAxis y1Axis" style="position: absolute; top: 0px; left: 0px; bottom: 0px; right: 0px; display: block;"><div style="position: absolute; top: 197px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 20px; text-align: right;">0</div><div style="position: absolute; top: 149px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 7px; text-align: right;">500</div><div style="position: absolute; top: 100px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1000</div><div style="position: absolute; top: 52px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">1500</div><div style="position: absolute; top: 3px; font: small-caps 400 11px/14px "Open Sans",sans-serif; color: rgb(111, 123, 138); left: 1px; text-align: right;">2000</div></div></div><canvas class="flot-overlay" style="direction: ltr; position: absolute; left: 0px; top: 0px; width: 438px; height: 228px;" width="657" height="342"></canvas></div>
</div>
<div style="margin: 20px 0 10px 30px">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-success"> Revenue: </span>
<h3>$13,234</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-info"> Tax: </span>
<h3>$134,900</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-danger"> Shipment: </span>
<h3>$1,134</h3>
</div>
<div class="col-md-3 col-sm-3 col-xs-6 text-stat">
<span class="label label-sm label-warning"> Orders: </span>
<h3>235090</h3>
</div>
</div>
</div>
</div>
</div>
<!-- END PORTLET-->
</div>
</div>
</div>
</template>
<script>
export default {
created() {
},
methods: {
}
}
</script>
Aber wenn ich die Seite aktualisieren (manuell), die Diagrammdaten, um mit dem perfekten zu kommen.
App.vue
<template>
<div id="app">
<navbar></navbar>
<div class="page-container">
<leftmenu></leftmenu>
<container></container>
</div>
</div>
</template>
<script>
import Menu from './components/Menu.vue'
import LeftMenu from './components/Leftmenu.vue'
import Container from './components/Container.vue'
export default {
components: {
'navbar': Menu,
'leftmenu': LeftMenu,
'container': Container,
}
}
</script>
routes.js
import Vue from 'vue'
import VueRouter from 'vue-router'
Vue.use(VueRouter)
const router = new VueRouter({
routes: [
{
path: "/",
component: require('./components/pages/Home.vue'),
meta: {
forVisitors: true
}
},
{
path: "/home",
component: require('./components/pages/Home.vue'),
meta: {
forVisitors: true
}
},
{
path: "/graph",
component: require('./components/pages/Graph.vue'),
meta: {
forVisitors: true
}
},
{
path: "/form",
component: require('./components/pages/Form.vue'),
meta: {
forVisitors: true
}
}
],
linkActiveClass: 'nav-item start active open',
mode: 'history'
})
export default router
Was mir fehlt ??
Dank
Der ganze Code, den Sie gepostet haben, ist für uns meistens nutzlos. Wir brauchen mehr VueJS-Code - der aktuelle sagt uns nichts Besonderes. –
Hi @BelminBedak Bitte überprüfen Sie meine Code-Aktualisierung –
Danke, das ist besser. Haben Sie Ihren Server für den History-Modus konfiguriert? https://router.vuejs.org/en/essentials/history-mode.html –