如何在vue.js中使用HTML模板
[英]How to use html template with vue.js
问题描述
我只想尝试使用vue.js但是在尝试使用自己购买的模板时遇到了麻烦。 我已将所有.css和.js文件放入index.html，然后调用vue.js自身内部的组件。
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>
所有页面均运行正常，并被归属vue.js成功调用，但如果我将调用页面与<router-link>一起使用， 则不会出现
Graph.vue
<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>
但是，当我刷新页面（手动）时，图表数据就完美了。
应用程序
<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
我想念什么？
谢谢
1 个解决方案
解决方案1
1 已采纳 2017-03-08 11:41:57
查看回购后，我注意到一堆可能会与VueJS混淆的jQuery数据。
在准备好文档后，应使用一些生命周期方法将jQuery图形初始化为Graph.vue组件
mounted() {
jQuery(document).ready(function() {
// chart init method
})
}
我仍然建议不要将jQuery和Vue混淆太多-它们在概念上是不同的，并且只会造成很大的混乱。
如何在HTML上声明组件属性 <template> 在Vue.js上标记
[英]How to declare component props on html <template> tag on Vue.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.