Question

我是Vue.js的新手，也在传统的LAMP环境中做大部分工作。到目前为止尝试过的vue组件似乎没有联系起来。有人可以请：

提供示例流程以在旧版LAMP环境中安装vue组件
提供一个简单的html模板，展示如何加载vue组件

感谢您的任何提示。

Answer 1

由于您处于遗留环境中，因此您可能不会使用npm / webpack / babel。在这种情况下，您将通过<script>标记导入所需的每个包。

过程：
- 寻找您需要的组件
- 检查他们的文档，了解导入它们所需的步骤。
  - 通常它是<script>标记（以及CSS <link>样式），后跟一些配置步骤（但并非总是如此）。
  - 在极少数情况下，lib不会通过<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>

使用第三方组件提供有关如何在不使用NPM的情况下使用的说明。示例bootstrap-vue。如何使用？按照每个特定组件的说明操作。下面Card Component的演示。

<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>

最后，使用第三方组件，如果没有NPM，则不会显示任何特定的指示。在下面的演示中，我们看到vue2-datepicker。他们没有提供有关如何通过<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>

在现有网页中使用没有npm的组件

1 个答案: