eirikb/ vuetwo.md

## vuetwo.md

      
    Raw
  

               vuetwo.md
            
          
    vuetwo demo

Proof of concept vue for the lazy
Usage


Download zip
npm install
npm start

Library code can be found here

  
## app.js
import Vue from 'vue';
import App from './app.vue';

new Vue({
  el: '#app',
  render: h => h(App)
});

## app.vue
<template>
  <div>
    <h1>Hello, {{test}}!</h1>
    <child></child>
  </div>
</template>

<style lang="less">
  div {
    h1 {
      color: blue;
    }
  }
</style>

<script type="text/babel">
  import Child from './child.vue';

  export default {
    components: {Child},
    data() {
      return {
        test: 'world!'
      };
    }
  };
</script>

## child.vue
<template>
  <div>
    <p>
      <b>I am child, {{test}}</b>
    </p>
  </div>
</template>

<style scoped="true" lang="sass">
  p {
    b {
      color: red;
    }
  }
</style>

<script>
  export default {
    data() {
      return {
        test: 'world!'
      };
    }
  }
</script>

## index.html
<!doctype html>
<title>vuetwo Demo</title>
<body>
  <div id="app"></div>
  <script src="build.js"></script>
</body>

## package.json
{
  "name": "vuetwo-test",
  "version": "1.0.0",
  "description": "",
  "author": "eirikb@eirikb.no",
  "license": "MIT",
  "scripts": {
    "start": "concurrently \"vuetwo app.js build.js\" \"lite-server\""
  },
  "devDependencies": {
    "concurrently": "2.2.0",
    "lite-server": "2.2.2",
    "vuetwo": "http://eirikb.blob.core.windows.net/npm/vuetwo-1.0.0.tgz"
  }
}
	import Vue from 'vue';
	import App from './app.vue';

	new Vue({
	el: '#app',
	render: h => h(App)
	});
	<template>
	<div>
	<h1>Hello, {{test}}!</h1>
	<child></child>
	</div>
	</template>

	<style lang="less">
	div {
	h1 {
	color: blue;
	}
	}
	</style>

	<script type="text/babel">
	import Child from './child.vue';

	export default {
	components: {Child},
	data() {
	return {
	test: 'world!'
	};
	}
	};
	</script>
	<template>
	<div>
	<p>
	<b>I am child, {{test}}</b>
	</p>
	</div>
	</template>

	<style scoped="true" lang="sass">
	p {
	b {
	color: red;
	}
	}
	</style>

	<script>
	export default {
	data() {
	return {
	test: 'world!'
	};
	}
	}
	</script>
	<!doctype html>
	<title>vuetwo Demo</title>
	<body>
	<div id="app"></div>
	<script src="build.js"></script>
	</body>
	{
	"name": "vuetwo-test",
	"version": "1.0.0",
	"description": "",
	"author": "eirikb@eirikb.no",
	"license": "MIT",
	"scripts": {
	"start": "concurrently \"vuetwo app.js build.js\" \"lite-server\""
	},
	"devDependencies": {
	"concurrently": "2.2.0",
	"lite-server": "2.2.2",
	"vuetwo": "http://eirikb.blob.core.windows.net/npm/vuetwo-1.0.0.tgz"
	}
	}