没有 vue-cli 的 Vue，在 express 服务器上运行答案

【问题标题】：Vue without vue-cli, run on an express server没有 vue-cli 的 Vue，在 express 服务器上运行
【发布时间】：2020-10-24 20:49:26
【问题描述】：

所以 Vue 非常有趣，因为你不需要使用 vue-cli 来让它在不在服务器上运行时工作。我原本以为你会的。在 vue 安装页面上，https://vuejs.org/v2/guide/installation.html，在 CDN 下它说您可以使用脚本。 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> 注意，这仅用于开发。在生产中使用的脚本是：<script src="https://cdn.jsdelivr.net/npm/vue@2.6.12"></script> 该脚本引用了特定的内部版本号，因此不太可能与较新的版本中断。

HTML 页面：

<!DOCTYPE html>

  <html>
  <head>
    <title> First app </title>
    <meta charset="utf-8"/>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
        <top :itemnumber="itemnumber"></holiday>
    </div>

    <script src="main.js"></script>
  </body>
</html>

所以这是一个小的 HTML 文档，但是页面上的元素可以根据数据而改变（这很酷）。在此示例中，在 var app 所在的底部，您可以将数字更改为 1，这将更改图像、描述并添加 20% 折扣元素！只需更改一个数字！

您也可以缩短 javascript 代码。请注意 v-for，它循环遍历数据，因此您不需要在 HTML 代码中包含 2 个列表项（例如，当有 2 条数据时）。我知道这个模板不适合编码，因为它是一个 HTML 字符串，但是很高兴知道你可以让它像这样工作而无需在命令行中运行。请注意，没有样式表，所以它不会很漂亮。这只是为了测试目的。您必须将图像放在资产文件夹中。

main.js 文件：

Vue.component('top', {
  props: {
    itemnumber: {
      type: Number,
      required: true
    }
  },
  template:
    '<div class="top">'+
    '<h1> The top you need </h1>' +
    '<img :src="image" /> ' +
    '<p> {{message}} </p>' +
    '<p> Description: {{description}} </p>' +
    '<p v-if="onOffer"> 20% OFF! </p>' +
    '<p> Top Choices </p>' +
    '<ul>' +
    '<li v-for="top in tops" +
    :key="top.top">{{top.top}} </li>' +
    '</ul>' +
    '</div>',
  data() {
    return {
      message: "Cute tops make happy people.",
      tops: [
        {
          topID: 72,
          top: 'Green is the new black',
          topImage: './assets/green.jpg',
          description: 'Beautiful green vest top with a cute bow in the middle',
          offer: false
        },
        {
          topID: 55,
          top: 'No peace in your life? Find it in this t-shirt',
          topImage: './assets/blue.jpg',
          description: 'Cute blue t-shirt with a geometric peace design',
          offer: true
        }
      ]
    }
  },
  computed: {
    image() {
      return this.tops[this.topnumber].topImage;
    },
    description() {
      return this.tops[this.topnumber].description;
    },
    onOffer() {
      return this.tops[this.topnumber].offer;
    }
  }
});

var app = new Vue({
  el: '#app',
  data: {itemnumber: 1}
});

现在，我想知道的是，你如何在 express 上运行它？

【问题讨论】：

请添加您的快递代码
由于您的评论，我刚刚意识到我的快速代码有误，谢谢！

标签： javascript node.js express vue.js vuejs2

【解决方案1】：

您使用的网络服务器无关紧要。都是客户端。

只需使用static module 来提供文件，就像处理任何其他客户端 JS 文件和静态 HTML 文档一样。

【讨论】：

我在 app.js 文件中犯了一个错误，我认为这是因为服务器存在问题。感谢您的回答！

【解决方案2】：

您可以正常运行您的服务器。所以，运行npm install。设置您的 package.json (npm init) 并在您的服务器中使用 express 模块，例如 static（从公共文件夹中获取您的文件）您还可以使用 bodyParser（它允许您通过 req.body 使用请求的正文）。这对于使用 GET 和 POST 请求很有用。

【讨论】：