Vue Project Setup (#8018)

* add files for new client side and reorg gulp tasks

* add deps and script for new client

* fix webpack paths so that building works

* fix static assets not copied into prod build

* fix linting

* add eslint deps and re-enable it in webpack

* add most missing deps for client side and split .babelrc for client

* reorganize .eslintignore

* update client tests paths and .gitignore

* uncomment code

* client: move App component

* client: update oaths in App component

* fix client tests and add more deps

* add client side tests to npm test

* fix typo in depencency name

* update more deps

* fix karma.conf.js and upgrade phantomjs

* fix dep and move karma.conf to subdirectory

* update karma.conf.js position in Gruntfile

* try downgrading phantomjs

* Fixup client tests (#8032)

* Use phantom 2

* fix(tests): Fix refresher test

* gitignore translation mock

* Update karma version

* disable e2e tests for new client from build

* write vue templates with pug

* add basic routing

* remove unnecessary Function.bind shim

* remove unused dependency

website/client/components/App.vue

@@ -0,0 +1,64 @@
+<template lang="pug">
+#app
+  img.logo(src='../assets/logo.png')
+  ul
+    li
+      router-link(to='/') Home
+    li
+      router-link(to='/sub') Sub
+  router-view.view
+  p Welcome to your Vue.js app!
+  p
+    | To get a better understanding of how this boilerplate works, check out
+    | <a href="http://vuejs-templates.github.io/webpack" target="_blank">its documentation</a>.
+    | It is also recommended to go through the docs for
+    | <a href="http://webpack.github.io/" target="_blank">Webpack</a> and
+    | <a href="http://vuejs.github.io/vue-loader/" target="_blank">vue-loader</a>.
+    | If you have any issues with the setup, please file an issue at this boilerplate's
+    | <a href="https://github.com/vuejs-templates/webpack" target="_blank">repository</a>.
+  p
+    | You may also want to checkout
+    | <a href="https://github.com/vuejs/vue-router/" target="_blank">vue-router</a> for routing and
+    | <a href="https://github.com/vuejs/vuex/" target="_blank">vuex</a> for state management.
+</template>
+
+<script>
+import Hello from './Hello';
+
+export default {
+  components: {
+    Hello,
+  },
+};
+</script>
+
+<style>
+html {
+  height: 100%;
+}
+
+body {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+#app {
+  color: #2c3e50;
+  margin-top: -100px;
+  max-width: 600px;
+  font-family: Source Sans Pro, Helvetica, sans-serif;
+  text-align: center;
+}
+
+#app a {
+  color: #42b983;
+  text-decoration: none;
+}
+
+.logo {
+  width: 100px;
+  height: 100px
+}
+</style>

website/client/components/Hello.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+.hello
+  h1 {{ msg }}
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello Vue!',
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+  color: #42b983;
+}
+</style>

website/client/components/Sub.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+.hello
+  h1 {{ msg }}
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      msg: 'Hello Sub Route!',
+    };
+  },
+};
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+h1 {
+  color: #42b983;
+}
+</style>