Pre*_*ema 3 vue.js vue-component vuejs2
我是Vue.js的新手，并且在常规LAMP环境中也可以完成大多数工作。到目前为止，尝试使用的Vue组件似乎无法链接。任何人都可以：
感谢您的提示。
由于您处于旧环境中，因此您可能不会使用npm / webpack / babel。在这种情况下，您将通过<script>标签导入所需的每个软件包。
<script>标记（和CSS <link>样式），然后是一些配置步骤（但并非总是如此）。<script>，在这种情况下，您可以尝试使用<script src="https://unkpg.com/NODE-PACKAGE-NAME">，然后查看是否可以直接使用它。例子：
<custom-comp>组件并通过进行全局注册Vue.component。<script src="https://unpkg.com/vue"></script>
<div id="app">
<p>{{ message }}</p>
<custom-comp v-bind:myname="name"></custom-comp>
</div>
<template id="cc">
<p>I am the custom component. You handled me {{ myname }} via props. I already had {{ myown }}.</p>
</template>
<script>
Vue.component('custom-comp', {
template: '#cc',
props: ['myname'],
data() {
return {
myown: 'Eve'
}
}
});
new Vue({
el: '#app',
data: {
message: 'Hello, Vue.js',
name: 'Alice'
}
});
</script><script src="https://unpkg.com/vue"></script>
<!-- Add this to <head> -->
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>
<!-- Add this after vue.js -->
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app">
<div>
<b-card title="Card Title"
img-src="https://lorempixel.com/600/300/food/5/"
img-alt="Image"
img-top
tag="article"
style="max-width: 20rem;"
class="mb-2">
<p class="card-text">
Some quick example text to build on the card title.
</p>
<b-button href="#" variant="primary">Go somewhere</b-button>
</b-card>
</div>
</div>
<script>
new Vue({
el: '#app'
});
</script><script>，但是通过查看自述文件，我们看到它们的组件通常会导出DatePicker变量。使用然后使用<script src="https://unpkg.com/vue2-datepicker">加载组件并通过进行注册以供使用Vue.component('date-picker', DatePicker.default);。需求.default各不相同。对于其他组件，Vue.component('comp-name', ComponentName);（而不是ComponentName.default）直接可以使用。// After importing the <script> tag, you use this command to register the component
// so you can use. Sometimes the components auto-register and this is not needed
// (but generally when this happens, they tell in their docs). Sometimes you need
// to add `.default` as we do below. It's a matter of trying the possibilities out.
Vue.component('date-picker', DatePicker.default);
new Vue({
el: '#app',
data() {
return {
time1: '',
time2: '',
shortcuts: [
{
text: 'Today',
start: new Date(),
end: new Date()
}
]
}
}
})<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue2-datepicker"></script>
<div id="app">
<div>
<date-picker v-model="time1" :first-day-of-week="1" lang="en"></date-picker>
<date-picker v-model="time2" range :shortcuts="shortcuts" lang="en"></date-picker>
</div>
</div>