component-03

Author: daggerok

.travis.yml

@@ -41,6 +41,20 @@ before_install:
 jobs:
   include:
 
+  - stage: test
+    name: component-03
+    env:
+      - SUB_PROJECT=component-03
+    before_script:
+      - cd $TRAVIS_BUILD_DIR/$SUB_PROJECT && npm i -E
+      - cd $TRAVIS_BUILD_DIR/$SUB_PROJECT && npm start
+      - cd $TRAVIS_BUILD_DIR/$SUB_PROJECT && npm run logs &
+      - wait_for 1234
+    script:
+      - http :1234
+    after_script:
+      - cd ${root}/vuesax-example && npm stop
+
   - stage: test
     name: component-02-in-browser-in-html
     env:
@@ -219,15 +233,15 @@ jobs:
     - if [ -f npm-debug.log ]; then cat npm-debug.log; fi;
     - npm run build -- --report
 
-  - stage: test
-    node_js: lts/*
-    name: todo-list
-    script:
-    - cd ${root}/todo-list
-    - npm install
-    - npm run predeploy
-    - if [ -f npm-debug.log ]; then cat npm-debug.log; fi;
-    - npm run build -- --report
+#  - stage: test
+#    node_js: lts/*
+#    name: todo-list
+#    script:
+#    - cd ${root}/todo-list
+#    - npm install
+#    - npm run predeploy
+#    - if [ -f npm-debug.log ]; then cat npm-debug.log; fi;
+#    - npm run build -- --report
 
 #  - stage: test
 #    node_js: lts/*
@@ -339,7 +353,7 @@ jobs:
 
   - stage: deploy
     env:
-      - SUB_PROJECT=component-02-in-browser-in-html
+      - SUB_PROJECT=component-03
       - secure: oP/muOICK9B+4eYo8V8AQJqJ0iqy2n9s2n+5XUJPDJh04PZdG/jRp5mpoHATdSqrCEoREuvP1HAww8mNCiZRjN1pMbKE6v6LvtuRYURpm3Uctnbgf6m3pA95upcf48TsHLPr30seQge0lwR39dx+PQ0bbsfywR81MzPu+gT2ExbxMg70MOOf2tILIGAPKkk/Zishf7an17VzgFDJZLLq8fZaKFbFE5jgA5OMU7lgSUrQadhXTgRWT6kUmt7pPByovLinzBZVl/wBbyoxcxF3HSNaLcUSgWXDTDfQHeRDblS78ERtQ+ywBEN9dPv9cwTrxgZcr5laAQjIJ22HNGyLT2gxodlxRs3awp7zY2aNsdcrnbNNSTh2gfZ2r3yd/CDkuNU46W5QsfLpvEgJlacle4JM91afCoYj2OFFSx09UHfp9kPbRwuXerhgIWuYGUwQ15dXR0csxxqLJYslDK8XucKGrPIxo8gi4+/cKeKLotR7b5VXEjdrZtRfnbWU4htYMcb+1nGItKmYyK2eFb4ShOhS2lXRhEGwzAOhn8C5MGKdABpaPLcBHcAyUpGFl76B4nRU4kXKyKPKBJoBs36eZMBYgsiKwZ8UD9id0WIHLAQInbXzvh4SbmClJV4SFwcIroKkGv+iQdRvFA21d0v1teYTHAeHot4bKVGVEaODP/M=
     name: GitHub pages deployment
     script: skip

README.adoc

@@ -35,6 +35,9 @@ This repository is contains some Vue.js playground project examples
 
 == links
 
+- link:https://github.com/vuejs/vue-cli/issues/1198#issuecomment-385340314[Vue + TS cannot resolve module TS2307 error fix]
+- https://parceljs.org/vue.html
+- https://parceljs.org/recipes.html#vue
 - link:https://vue-composition-api-rfc.netlify.com/#summary[Vue Composition API]
 - link:https://ru.vuejs.org/v2/guide/syntax.html[Vue in browser]
 - link:https://metanit.com/[rubooks]

component-03/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "vue-examples",
+  "version": "1.0.0",
+  "description": "Starter",
+  "main": "src/index.html",
+  "scripts": {
+    "gh": "npm run build -- --public-url='/vue-examples/'",
+    "build": "parcel build src/index.html --no-cache",
+    "start": "pm2 start 'npm run dev' --name app",
+    "dev": "parcel src/index.html --open --no-cache",
+    "restart": "pm2 restart app",
+    "stop": "pm2 kill",
+    "logs": "pm2 logs"
+  },
+  "keywords": [
+    "pm2",
+    "parcel",
+    "starter"
+  ],
+  "author": "daggerok",
+  "license": "MIT",
+  "devDependencies": {
+    "@types/node": "13.1.4",
+    "@types/vue": "2.0.0",
+    "@vue/component-compiler-utils": "3.1.1",
+    "parcel-bundler": "1.12.4",
+    "pm2": "4.2.1",
+    "pug": "^2.0.4",
+    "sass": "^1.24.3",
+    "typescript": "3.7.4",
+    "vue-template-compiler": "2.6.11",
+    "webfontloader": "1.6.28"
+  },
+  "dependencies": {
+    "vue": "2.6.11",
+    "vue-hot-reload-api": "2.3.4"
+  }
+}

component-03/src/ClickerCounter.vue

@@ -0,0 +1,36 @@
+<template>
+  <div>
+    <button @click="increment">
+      <Other ></Other>
+      clicked {{ counter }} times
+    </button>
+  </div>
+</template>
+
+<script>
+  import Other from './Other';
+
+  export default {
+    name: 'ClickerCounter',
+    components: {
+      Other,
+    },
+    data() {
+      return { counter: 0 };
+    },
+    methods: {
+      increment() {
+        this.counter += 1;
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  button {
+    color: green;
+    padding: 2%;
+    margin: 2%;
+    font-size: 3em;
+  }
+</style>

component-03/src/Other.vue

@@ -0,0 +1,21 @@
+<template lang="pug">
+  .container Hello {{ bundler }}!
+</template>
+
+<script lang="ts">
+  import Vue from 'vue';
+
+  export default Vue.extend({
+    data() {
+      return {
+        bundler: 'Parcel'
+      };
+    },
+  });
+</script>
+
+<style lang="scss" scoped>
+  .container {
+    color: green;
+  }
+</style>

component-03/src/favicon.ico

@@ -0,0 +1,19 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport"
+        content="width=device-width initial-scale=1.0">
+  <meta http-equiv="X-UA-Compatible" content="ie=edge">
+  <title>Vue examples</title>
+  <link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
+</head>
+<body>
+
+<div id="app">
+  <clicker></clicker>
+</div>
+
+<script src="./main.js"></script>
+</body>
+</html>

component-03/src/index.html

@@ -0,0 +1,6 @@
+import './webfontloader.ts';
+import Vue from 'vue';
+import ClickerCounter from './ClickerCounter.vue';
+
+new Vue({ render: createElement => createElement(ClickerCounter) })
+  .$mount('#app');

component-03/src/main.js

@@ -0,0 +1,5 @@
+body {
+  font-family: Roboto, sans-serif;
+  padding: 0;
+  margin: 0;
+}

component-03/src/webfontloader.css

@@ -0,0 +1,11 @@
+import './webfontloader.css';
+import WebFont from '../node_modules/webfontloader';
+
+WebFont.load({
+  google: {
+    families: [
+      // 'Roboto:300,400,500,600,700',
+      'Roboto:400,100,‌​100italic,300,300ita‌​lic,400italic,500,50‌​0italic,700,700itali‌​c,900italic,900',
+    ],
+  },
+});