first commit

vue3 · Jul 24, 2020 · 3e6ca7a · 3e6ca7a
1 parent 740e695
commit 3e6ca7a
Show file tree

Hide file tree

Showing 36 changed files with 659 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,20 @@
+module.exports = {
+  root: true,
+  env: {
+    node: true,
+  },
+  extends: [
+    "plugin:vue/vue3-essential",
+    "eslint:recommended",
+    "@vue/typescript/recommended",
+    "@vue/prettier",
+    "@vue/prettier/@typescript-eslint",
+  ],
+  parserOptions: {
+    ecmaVersion: 2020,
+  },
+  rules: {
+    "no-console": process.env.NODE_ENV === "production" ? "warn" : "off",
+    "no-debugger": process.env.NODE_ENV === "production" ? "warn" : "off",
+  },
+};
diff --git a/.gitattrbutes b/.gitattrbutes
@@ -0,0 +1,3 @@
+*.js lingist-language=vue
+*.html lingist-language=vue
+*.css lingist-language=vue
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,3 @@
+module.exports = {
+  presets: ["@vue/cli-plugin-babel/preset"],
+};
diff --git a/package.json b/package.json
@@ -0,0 +1,44 @@
+{
+  "name": "vue3-awesome-demo",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@types/lodash": "^4.14.157",
+    "core-js": "^3.6.5",
+    "dayjs": "^1.8.29",
+    "lodash": "^4.17.19",
+    "register-service-worker": "^1.7.1",
+    "vue": "^3.0.0-rc.4",
+    "vue-class-component": "^7.2.3",
+    "vue-property-decorator": "^9.0.0",
+    "vue-router": "^4.0.0-beta.3",
+    "vuex": "^4.0.0-beta.4"
+  },
+  "devDependencies": {
+    "@typescript-eslint/eslint-plugin": "^3.6.1",
+    "@typescript-eslint/parser": "^3.6.1",
+    "@vue/cli-plugin-babel": "~4.4.6",
+    "@vue/cli-plugin-eslint": "~4.4.6",
+    "@vue/cli-plugin-pwa": "~4.4.6",
+    "@vue/cli-plugin-router": "~4.4.6",
+    "@vue/cli-plugin-typescript": "~4.4.6",
+    "@vue/cli-plugin-vuex": "~4.4.6",
+    "@vue/cli-service": "~4.4.6",
+    "@vue/compiler-sfc": "^3.0.0-rc.4",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "@vue/eslint-config-typescript": "^5.0.2",
+    "eslint": "^7.4.0",
+    "eslint-plugin-prettier": "^3.1.4",
+    "eslint-plugin-vue": "^7.0.0-beta.0",
+    "prettier": "^2.0.5",
+    "sass": "^1.26.10",
+    "sass-loader": "^9.0.2",
+    "typescript": "~3.9.7",
+    "vue-cli-plugin-vue-next": "~0.1.3"
+  }
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/img/icons/android-chrome-192x192.png b/public/img/icons/android-chrome-192x192.png
diff --git a/public/img/icons/android-chrome-512x512.png b/public/img/icons/android-chrome-512x512.png
diff --git a/public/img/icons/android-chrome-maskable-192x192.png b/public/img/icons/android-chrome-maskable-192x192.png
diff --git a/public/img/icons/android-chrome-maskable-512x512.png b/public/img/icons/android-chrome-maskable-512x512.png
diff --git a/public/img/icons/apple-touch-icon-120x120.png b/public/img/icons/apple-touch-icon-120x120.png
diff --git a/public/img/icons/apple-touch-icon-152x152.png b/public/img/icons/apple-touch-icon-152x152.png
diff --git a/public/img/icons/apple-touch-icon-180x180.png b/public/img/icons/apple-touch-icon-180x180.png
diff --git a/public/img/icons/apple-touch-icon-60x60.png b/public/img/icons/apple-touch-icon-60x60.png
diff --git a/public/img/icons/apple-touch-icon-76x76.png b/public/img/icons/apple-touch-icon-76x76.png
diff --git a/public/img/icons/apple-touch-icon.png b/public/img/icons/apple-touch-icon.png
diff --git a/public/img/icons/favicon-16x16.png b/public/img/icons/favicon-16x16.png
diff --git a/public/img/icons/favicon-32x32.png b/public/img/icons/favicon-32x32.png
diff --git a/public/img/icons/msapplication-icon-144x144.png b/public/img/icons/msapplication-icon-144x144.png
diff --git a/public/img/icons/mstile-150x150.png b/public/img/icons/mstile-150x150.png
diff --git a/public/img/icons/safari-pinned-tab.svg b/public/img/icons/safari-pinned-tab.svg
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title><%= htmlWebpackPlugin.options.title %></title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:
diff --git a/src/App.vue b/src/App.vue
@@ -0,0 +1,85 @@
+<template>
+  <div class="view">
+    <div id="nav">
+      <div>
+        <b>🚀 [vue3, vuex, router, ts]</b>
+      </div>
+      <div>
+        <router-link to="/">(🍉 ) => Home</router-link>
+      </div>
+      <div>
+        <router-link to="/about">(🌽 ) => About</router-link>
+      </div>
+    </div>
+    <div id="content">
+      <router-view />
+    </div>
+  </div>
+</template>
+
+<style lang="scss">
+*,
+:after,
+:before {
+  box-sizing: border-box;
+}
+body {
+  margin: 0;
+  background-color: #040609;
+  color: #92abcf;
+}
+.view {
+  position: relative;
+  min-height: 100vh;
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  // font-family: Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: flex;
+  // color: #2c3e50;
+}
+#nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background-color: #1d2636;
+  padding: 24px 12px 12px;
+  flex: 0 0 auto;
+  height: 100vh;
+  z-index: 99;
+  div {
+    display: flex;
+    height: 46px;
+    line-height: 46px;
+    color: #92abcf;
+  }
+  a {
+    width: 100%;
+    font-weight: bold;
+    color: #92abcf;
+    text-decoration: none;
+    cursor: pointer;
+    padding-left: 30px;
+    &:hover {
+      color: #11ece5;
+    }
+    &.router-link-exact-active {
+      color: #11ece5;
+      background-color: #2d405d;
+    }
+  }
+}
+#content {
+  position: relative;
+  min-height: 100vh;
+  padding: 20px;
+  width: 100%;
+  padding-left: 230px;
+}
+
+ol,
+ul {
+  list-style: none;
+}
+</style>
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/components/GithubCorner.vue b/src/components/GithubCorner.vue
@@ -0,0 +1,65 @@
+<template>
+  <div class="about">
+    <a
+      href="https://github.com/vue3/vue3-News"
+      class="github-corner"
+      aria-label="View source on GitHub"
+    >
+      <svg
+        width="80"
+        height="80"
+        viewBox="0 0 250 250"
+        style="
+          fill: #64ceaa;
+          color: #fff;
+          position: absolute;
+          top: 0;
+          border: 0;
+          right: 0;
+        "
+        aria-hidden="true"
+      >
+        <path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z" />
+        <path
+          d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2"
+          fill="currentColor"
+          style="transform-origin: 130px 106px;"
+          class="octo-arm"
+        />
+        <path
+          d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z"
+          fill="currentColor"
+          class="octo-body"
+        />
+      </svg>
+    </a>
+  </div>
+</template>
+
+<style lang="scss">
+.github-corner:hover .octo-arm {
+  animation: octocat-wave 560ms ease-in-out;
+}
+@keyframes octocat-wave {
+  0%,
+  100% {
+    transform: rotate(0);
+  }
+  20%,
+  60% {
+    transform: rotate(-25deg);
+  }
+  40%,
+  80% {
+    transform: rotate(10deg);
+  }
+}
+@media (max-width: 500px) {
+  .github-corner:hover .octo-arm {
+    animation: none;
+  }
+  .github-corner .octo-arm {
+    animation: octocat-wave 560ms ease-in-out;
+  }
+}
+</style>