first commit

3 years ago · 57944a3419
16 changed files with 2980 additions and 0 deletions
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,4 @@
+node_modules
+.DS_Store
+dist
+*.local
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,9 @@
+{
+  "recommendations": [
+    "firefox-devtools.vscode-firefox-debug",
+    "msjsdiag.debugger-for-chrome",
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "octref.vetur"
+  ]
+}
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@ -0,0 +1,25 @@
+{
+    // Use IntelliSense to learn about possible attributes.
+    // Hover to view descriptions of existing attributes.
+    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+    "version": "0.2.0",
+    "configurations": [
+        {
+            "name": "Debug Firefox",
+            "type": "firefox",
+            "request": "launch",
+            "reAttach": true,
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}",
+            "skipFiles":["${workspaceFolder}/@modules/vue.js"]
+        },
+                {
+            "name": "Debug Chromium",
+            "request": "launch",
+            "type": "pwa-chrome",
+            "url": "http://localhost:3000",
+            "webRoot": "${workspaceFolder}",
+            "runtimeExecutable": "/usr/bin/chromium",
+        }
+    ]
+}
--- a/.vscode/tasks.json
+++ b/.vscode/tasks.json
@ -0,0 +1,11 @@
+{
+	"version": "2.0.0",
+	"tasks": [
+		{
+			"label": "npm: dev",
+			"type": "npm",
+			"script": "dev",
+			"problemMatcher": []
+		}
+	]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,25 @@
+VAPARA-VUE3
+===========
+
+## TODO
+
+* [ ] composition API
+* [ ] eslint
+
+## Expected Features
+
+* [ ] tailwind
+  * [ ] https://tailwindcss.com/docs/guides/vue-3-vite
+* [ ] login/logout
+* [ ] fake rest api
+* [ ] i18n
+
+## First Initialization
+
+* npm init vite-app vapara-vue3
+* cd vapara-vue3
+  * npm install
+  * npm install typescript
+    * ...tsconfig.json, shims-vue.d.ts, main.ts, index.html
+    * see [vue3+typescript+vite](https://stackoverflow.com/questions/63724523/how-to-add-typescript-to-vue-3-and-vite-project#64438876)
+  * npm run dev
--- a/index.html
+++ b/index.html
@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <link rel="icon" href="/favicon.ico" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Vite App</title>
+</head>
+<body>
+  <div id="app"></div>
+  <script type="module" src="/src/main.ts"></script>
+</body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,16 @@
+{
+  "name": "vapara-vue3",
+  "version": "0.1.0",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build"
+  },
+  "dependencies": {
+    "typescript": "^4.1.3",
+    "vue": "^3.0.0-rc.1"
+  },
+  "devDependencies": {
+    "vite": "^1.0.0-rc.1",
+    "@vue/compiler-sfc": "^3.0.0-rc.1"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,15 @@
+<template>
+  <img alt="Vue logo" src="./assets/logo.png" />
+  <HelloWorld msg="vapara-vue3" />
+</template>
+
+<script lang="ts">
+import HelloWorld from "./components/HelloWorld.vue";
+
+export default {
+  name: "App",
+  components: {
+    HelloWorld,
+  },
+};
+</script>
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/components/HelloWorld.vue
+++ b/src/components/HelloWorld.vue
@ -0,0 +1,26 @@
+<template>
+  <h1>{{ msg }}</h1>
+  <button @click="count++">count is: {{ count }}</button>
+  <button @click="inc">inc</button>
+  <p>Hello World!</p>
+</template>
+
+<script lang="ts">
+export default {
+  name: "HelloWorld",
+  props: {
+    msg: String,
+  },
+  data() {
+    return {
+      count: 0,
+    };
+  },
+  methods: {
+    inc() {
+      console.log("increment count");
+      this.count++;
+    },
+  },
+};
+</script>
--- a/src/index.css
+++ b/src/index.css
@ -0,0 +1,8 @@
+#app {
+  font-family: Avenir, Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+  margin-top: 60px;
+}
--- a/src/main.ts
+++ b/src/main.ts
@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import './index.css'
+
+createApp(App).mount('#app')
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@ -0,0 +1,5 @@
+declare module "*.vue" {
+  import { defineComponent } from "vue";
+  const Component: ReturnType<typeof defineComponent>;
+  export default Component;
+}
--- a/tsconfig.json
+++ b/tsconfig.json
@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "importHelpers": true,
+    "isolatedModules": true,
+    "noEmit": true
+  }
+}