title: Vue without vue-cli, run on an express server
body: <p>So Vue is quite interesting in that you do not need to use vue-cli to get it to work when not running on a  server. I originally thought you did. On the vue installation page, <a href="https://v2.vuejs.org/v2/guide/installation.html" rel="nofollow noreferrer">https://v2.vuejs.org/v2/guide/installation.html</a>, under CDN it says you can use a script.
  <code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js&quot;&gt;&lt;/script&gt;</code> Note, this is for development only. The script to use in production is: <code>&lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.6.12&quot;&gt;&lt;/script&gt;</code>
  This script refers to the specific build number, so it is unlikely to break with newer versions.</p>
  <p><strong>HTML page:</strong></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  
    &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt; First app &lt;/title&gt;
      &lt;meta charset=&quot;utf-8&quot;/&gt;
      &lt;script src=&quot;https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js&quot;&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;div id=&quot;app&quot;&gt;
          &lt;top :itemnumber=&quot;itemnumber&quot;&gt;&lt;/holiday&gt;
      &lt;/div&gt;
  
      &lt;script src=&quot;main.js&quot;&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>So this is a small HTML document, but the elements on the page can change depending on the data (which is quite cool). In this example, at the bottom where <em>var app</em> is, you can change the number to 1, and it will change the image, the description and will add a 20% off element! Just by changing one number!</p>
  <p>You can also shorten javascript code too. Notice the v-for, which loops over the data so you don't need to have 2 list items in your HTML code for example (for when there are 2 pieces of data).
  I know the template isn't nice to code because it's a HTML string, but it's great to know you can get it to work like this without running in command line. Notice that there is no stylesheet, so it won't be pretty. It's just for testing purposes. You must put the images in an assets folder.</p>
  <p><strong>main.js file:</strong></p>
  <pre><code>Vue.component('top', {
    props: {
      itemnumber: {
        type: Number,
        required: true
      }
    },
    template:
      '&lt;div class=&quot;top&quot;&gt;'+
      '&lt;h1&gt; The top you need &lt;/h1&gt;' +
      '&lt;img :src=&quot;image&quot; /&gt; ' +
      '&lt;p&gt; {{message}} &lt;/p&gt;' +
      '&lt;p&gt; Description: {{description}} &lt;/p&gt;' +
      '&lt;p v-if=&quot;onOffer&quot;&gt; 20% OFF! &lt;/p&gt;' +
      '&lt;p&gt; Top Choices &lt;/p&gt;' +
      '&lt;ul&gt;' +
      '&lt;li v-for=&quot;top in tops&quot; +
      :key=&quot;top.top&quot;&gt;{{top.top}} &lt;/li&gt;' +
      '&lt;/ul&gt;' +
      '&lt;/div&gt;',
    data() {
      return {
        message: &quot;Cute tops make happy people.&quot;,
        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}
  });
  </code></pre>
  <p>Now, what I would like to know is, how do you run this on express?</p>