added vue-cli + components

tocoderu · May 27, 2021 · b1d2cf6 · b1d2cf6
commit b1d2cf6
Show file tree

Hide file tree

Showing 23 changed files with 9,189 additions and 0 deletions.
diff --git a/.browserslistrc b/.browserslistrc
@@ -0,0 +1,3 @@
+> 1%
+last 2 versions
+not dead
diff --git a/.editorconfig b/.editorconfig
@@ -0,0 +1,10 @@
+# editorconfig.org
+root = true
+
+[*]
+end_of_line = lf
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
diff --git a/README.md b/README.md
@@ -0,0 +1,19 @@
+# tocode-youtube-vtwitter-vue-cli
+
+## Project setup
+```
+yarn install
+```
+
+### Compiles and hot-reloads for development
+```
+yarn serve
+```
+
+### Compiles and minifies for production
+```
+yarn build
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
diff --git a/babel.config.js b/babel.config.js
@@ -0,0 +1,5 @@
+module.exports = {
+  presets: [
+    '@vue/cli-plugin-babel/preset'
+  ]
+}
diff --git a/package.json b/package.json
@@ -0,0 +1,20 @@
+{
+  "name": "tocode-youtube-vtwitter-vue-cli",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build"
+  },
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "node-sass": "^4.12.0",
+    "sass-loader": "^8.0.2"
+  }
+}
diff --git a/prettier.config.js b/prettier.config.js
@@ -0,0 +1,10 @@
+module.exports = {
+  semi: false,
+  singleQuote: true,
+  arrowParens: 'avoid',
+  trailingComma: 'none',
+  endOfLine: 'auto',
+  htmlFormatWrapAttributes: 'force-aligned'
+
+  // spaceBeforeFunctionParen: true
+}
diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="">
+  <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/src/App.vue b/src/App.vue
@@ -0,0 +1,47 @@
+<template>
+  <div class="wrapper">
+    <!-- header -->
+    <div class="wrapper-content">
+      <div class="view">
+        <div class="container">
+          <Form @onSubmit="handleSubmit" />
+          <List :items="items" />
+        </div>
+      </div>
+    </div>
+    <!-- footer -->
+  </div>
+</template>
+
+<script>
+import Form from '@/components/Form'
+import List from '@/components/List'
+export default {
+  components: { Form, List },
+  data() {
+    return {
+      items: [
+        {
+          id: 1,
+          body: 'hello vue 3',
+          likes: 12,
+          avatar: `https://avatars.dicebear.com/api/male/1.svg`,
+          date: new Date(Date.now()).toLocaleString()
+        },
+        {
+          id: 2,
+          body: 'hello world',
+          likes: 6,
+          avatar: `https://avatars.dicebear.com/api/male/2.svg`,
+          date: new Date(Date.now()).toLocaleString()
+        }
+      ]
+    }
+  },
+  methods: {
+    handleSubmit(item) {
+      this.items.push(item)
+    }
+  }
+}
+</script>
diff --git a/src/assets/.gitkeep b/src/assets/.gitkeep
diff --git a/src/assets/scss/common/_common.scss b/src/assets/scss/common/_common.scss
@@ -0,0 +1,8 @@
+// Buttons
+@import 'buttons';
+
+// Card
+@import 'tweet';
+
+// form
+@import 'form';
diff --git a/src/assets/scss/common/buttons.scss b/src/assets/scss/common/buttons.scss
@@ -0,0 +1,23 @@
+.btn {
+  display: inline-block;
+  padding: 0.8em 2em;
+  line-height: 1;
+  text-transform: uppercase;
+  cursor: pointer;
+  border-radius: 30px;
+}
+
+.btnTweet {
+  display: flex;
+  justify-content: center;
+  color: #fff;
+  background-color: #33a1f2;
+  border: 1px solid #33a1f2;
+  padding: 16px;
+  font-weight: 700;
+  font-size: 16px;
+  cursor: pointer;
+  &:hover {
+    background-color: #2c8ed6;
+  }
+}
diff --git a/src/assets/scss/common/form.scss b/src/assets/scss/common/form.scss
@@ -0,0 +1,49 @@
+form {
+  padding-bottom: 20px;
+  margin-bottom: 20px;
+  .form-controls {
+    display: flex;
+    align-items: center;
+  }
+}
+
+textarea {
+  width: 100%;
+  font-size: 24px;
+  padding: 30px 27px;
+  margin-bottom: 20px;
+  border-radius: 14px;
+  border: 1px solid #fff;
+  border-bottom: 1px solid #ebeef0;
+}
+
+select {
+  width: 100%;
+  max-width: 348px;
+  min-height: 46px;
+  padding: 16px 20px;
+  font-size: 16px;
+  border: 1px solid #fff;
+  border-radius: 34px;
+  line-height: 20px;
+  outline: 0;
+  -moz-appearance: none;
+  -webkit-appearance: none;
+  background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%1%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E'),
+    linear-gradient(to bottom, #f8f8f8 0%, #f6f6f6 100%);
+  background-repeat: no-repeat, repeat;
+  /* arrow icon position (1em from the right, 50% vertical) , then gradient position*/
+  background-position: right 0.7em top 50%, 0 0;
+  /* icon size, then gradient */
+  background-size: 0.65em auto, 100%;
+  &:hover {
+    cursor: pointer;
+  }
+  &:focus {
+    cursor: pointer;
+    outline: none;
+  }
+  option {
+    font-weight: 400;
+  }
+}
diff --git a/src/assets/scss/common/tweet.scss b/src/assets/scss/common/tweet.scss
@@ -0,0 +1,81 @@
+.tweets__wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.tweet__wrapper {
+  display: flex;
+  -webkit-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+  padding: 14px 16px;
+  border-bottom: 1px solid #ebeef0;
+  transition: background-color 1s linear;
+  &:hover {
+    background-color: rgba(0, 0, 0, 0.03);
+  }
+}
+
+.tweet {
+  display: flex;
+  margin-top: 3px;
+  position: relative;
+  .avatar {
+    width: 49px;
+    height: 49px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    img {
+      width: 100%;
+      height: 100%;
+      border: 1px solid #fff;
+      border-radius: 50%;
+    }
+  }
+  .like {
+    display: flex;
+    align-items: center;
+    max-width: 80px;
+    color: #5b7083;
+    cursor: pointer;
+    .icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      height: 40px;
+      margin-left: -11px;
+      border-radius: 50%;
+      transition: background-color 0.2s linear;
+    }
+    span {
+      padding-left: 6px;
+    }
+    &:hover {
+      color: rgba(224, 36, 94, 1);
+      .icon {
+        background-color: rgba(224, 36, 94, 0.1);
+        svg {
+          fill: rgba(224, 36, 94, 1);
+        }
+      }
+    }
+  }
+}
+
+.tweet-header {
+  display: block;
+  margin-bottom: 14px;
+  color: #5b7083;
+  font-size: 15px;
+  white-space: nowrap;
+}
+
+.tweet-content {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 2px;
+  padding-left: 74px;
+}