YoshiTheChinchilla · August 6, 2019 18:00
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Prototype.vue</title>
    <link rel="stylesheet" href="" type="text/css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
    <style type="text/css">
      /* Vue.js default styles */
      [v-cloak] { display:none }
      .-enter, .-leave-to {
        opacity: ;
      }
      .-enter-active, .-leave-active {
        transition: ;
      }
    </style>
    <style type="text/css">
      /* Enter your global CSS */
    </style>
  </head>
  <body>

    <div id="app"></div>

    
    <!-- Define as a template all for migrating to ease, so don't use div#app -->
    

    <!-- c- prefix of HTML ID attribute means component- for preventing conflicts -->
    <script type="text/x-template" id="c-">
      <div class="c-">

      </div>
    </script>

    <!-- p- prefix of HTML ID attribute means page- for preventing conflicts -->
    <script type="text/x-template" id="p-">
      <div class="p-">
        <c-></c->
      </div>
    </script>

    <script type="text/javascript">
 
      // Usage
      // # Clone this Gist
      // $ git clone https://gist.github.com/YoshiTheChinchilla/bc89f2b3b23d04079387ef1ce584ca27 <PROJECT_NAME>
      // # cd to the cloned directory
      // $ cd <PROJECT_NAME>
      // # Open index.html on browser
      // $ open index.html # on macOS
      
      
      // Features:
      // Non-compile single file
      // No package managing
      // No state management

      // Disadvantages:
      // Hard to find CDN of npm packages
      // No Hot Reload
      // Only front-end development
      // Can't use vue devtools
      // Can't use functional component with template

     
      // Loaded Vue.js version is latest stable
      // Current version: v2.6.10
      // See also another versions on https://github.com/vuejs/vue/releases
      // Latest version on https://github.com/vuejs/vue/releases/latest
      // If you want to use another version Vue.js, please change version of the CDN tag

      
      // Register a global component
      Vue.component('c-', {
        template: '#c-',
        data: function() {
          return {
          }
        },
        props: [],
        methods: {
        },
        computed: {
        },
        watch: {
        }
        // Lifecycle methods
        // ...
      })

      // Mount #p- to div#app
      var vm = new Vue({
        el: '#app',
        components: {
          'c-': {
            template: '#c-',
          },
        },
        template: '#p-',
        data: function() {
          return {
          }
        },
        methods: {
        },
        computed: {
        },
        watch: {
        },
        // Lifecycle methods
        beforeCreate: function() {
        },
        created: function() {
        },
        mounted: function() {
        },
        beforeUpdate: function() {
        },
        updated: function() {
        },
        activated: function() {
        },
        deactivated: function() {
        },
        beforeDestroy: function() {
        },
        destroyed: function() {
        }
      })

    </script>

  </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Prototype.vue</title>
	<link rel="stylesheet" href="" type="text/css">
	<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
	<style type="text/css">
	/* Vue.js default styles */
	[v-cloak] { display:none }
	.-enter, .-leave-to {
	opacity: ;
	}
	.-enter-active, .-leave-active {
	transition: ;
	}
	</style>
	<style type="text/css">
	/* Enter your global CSS */
	</style>
	</head>
	<body>

	<div id="app"></div>


	<!-- Define as a template all for migrating to ease, so don't use div#app -->


	<!-- c- prefix of HTML ID attribute means component- for preventing conflicts -->
	<script type="text/x-template" id="c-">
	<div class="c-">

	</div>
	</script>

	<!-- p- prefix of HTML ID attribute means page- for preventing conflicts -->
	<script type="text/x-template" id="p-">
	<div class="p-">
	<c-></c->
	</div>
	</script>

	<script type="text/javascript">

	// Usage
	// # Clone this Gist
	// $ git clone https://gist.github.com/YoshiTheChinchilla/bc89f2b3b23d04079387ef1ce584ca27 <PROJECT_NAME>
	// # cd to the cloned directory
	// $ cd <PROJECT_NAME>
	// # Open index.html on browser
	// $ open index.html # on macOS


	// Features:
	// Non-compile single file
	// No package managing
	// No state management

	// Disadvantages:
	// Hard to find CDN of npm packages
	// No Hot Reload
	// Only front-end development
	// Can't use vue devtools
	// Can't use functional component with template


	// Loaded Vue.js version is latest stable
	// Current version: v2.6.10
	// See also another versions on https://github.com/vuejs/vue/releases
	// Latest version on https://github.com/vuejs/vue/releases/latest
	// If you want to use another version Vue.js, please change version of the CDN tag


	// Register a global component
	Vue.component('c-', {
	template: '#c-',
	data: function() {
	return {
	}
	},
	props: [],
	methods: {
	},
	computed: {
	},
	watch: {
	}
	// Lifecycle methods
	// ...
	})

	// Mount #p- to div#app
	var vm = new Vue({
	el: '#app',
	components: {
	'c-': {
	template: '#c-',
	},
	},
	template: '#p-',
	data: function() {
	return {
	}
	},
	methods: {
	},
	computed: {
	},
	watch: {
	},
	// Lifecycle methods
	beforeCreate: function() {
	},
	created: function() {
	},
	mounted: function() {
	},
	beforeUpdate: function() {
	},
	updated: function() {
	},
	activated: function() {
	},
	deactivated: function() {
	},
	beforeDestroy: function() {
	},
	destroyed: function() {
	}
	})

	</script>

	</body>
	</html>