Merge pull request #31 from Sharmaz/feature/template-vue

Feature/template vue
Sharmaz · Jul 18, 2024 · 70088ad · 70088ad
2 parents 7b67136 + 5995958
commit 70088ad
Show file tree

Hide file tree

Showing 14 changed files with 223 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -71,3 +71,4 @@ mk-app --template react-ts my-app
 | **react-ts** | React + Vite + TypeScript + ESlint 8. |
 | **react-dev-ts** | React + Typescript + Vite + Tailwind CSS + ESlint 8 + React Testing Library. |
 | **react-next** | React 19 + Farm + Oxlint. |
+| **vue-js** | Vue + Vite. |
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@sharmaz/mk-app",
- "version": "0.2.5",
+ "version": "0.2.6",
  "type": "module",
  "description": "A quick way to start your web applications.",
  "main": "index.js",

diff --git a/src/templateList.js b/src/templateList.js
@@ -45,6 +45,11 @@ const templates = [
  value: 'react-next',
  title: colors.error('React Experimental'),
  description: colors.error('React 19 + Farm + Oxlint.'),
+ },
+ {
+ value: 'vue-js',
+ title: colors.vue('Vue'),
+ description: colors.error('Vue + Vite'),
  }
 ];
 

diff --git a/src/utils/colors.js b/src/utils/colors.js
@@ -7,6 +7,7 @@ const colors = {
  ok: chalk.hex('30ED86'),
  error: chalk.hex('ED3066'),
  info: chalk.hex('42ECDE'),
+ vue: chalk.hex('54E6A5'),
  warn: chalk.hex('#EC9942'),
  webpack: chalk.hex('#75AFCC')
 };

diff --git a/src/utils/helpMessage.js b/src/utils/helpMessage.js
@@ -21,5 +21,6 @@ Available templates:
  react-ts React + Vite + TypeScript + ESlint 8.
  react-dev-ts React + Typescript + Vite + Tailwind CSS + ESlint 8 + React Testing Library.
  react-next React 19 + Farm + Oxlint.
+ vue-js Vue + Vite
 `;
 export default helpMessage;
diff --git a/templates/vue-js/_gitignore b/templates/vue-js/_gitignore
@@ -0,0 +1,89 @@
+# compiled output
+/dist
+/tmp
+/out-tsc
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# IDEs and editors
+.idea
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# IDE - VSCode
+.vscode/*
+!.vscode/settings.json
+!.vscode/tasks.json
+!.vscode/launch.json
+!.vscode/extensions.json
+
+# misc
+.sass-cache
+connect.lock
+typings
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+
+# next.js build output
+.next
+
+# Lerna
+lerna-debug.log
+
+# System Files
+.DS_Store
+Thumbs.db
diff --git a/templates/vue-js/index.html b/templates/vue-js/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+ <head>
+ <meta charset="UTF-8" />
+ <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+ <title>Vue</title>
+ </head>
+ <body>
+ <div id="app"></div>
+ <script type="module" src="/src/main.js"></script>
+ </body>
+</html>
diff --git a/templates/vue-js/package.json b/templates/vue-js/package.json
@@ -0,0 +1,18 @@
+{
+ "name": "vue-js",
+ "private": true,
+ "version": "0.0.0",
+ "type": "module",
+ "scripts": {
+ "dev": "vite",
+ "build": "vite build",
+ "preview": "vite preview"
+ },
+ "dependencies": {
+ "vue": "^3.4.31"
+ },
+ "devDependencies": {
+ "@vitejs/plugin-vue": "^5.0.5",
+ "vite": "^5.3.4"
+ }
+}
diff --git a/templates/vue-js/src/App.vue b/templates/vue-js/src/App.vue
@@ -0,0 +1,7 @@
+<script setup>
+ import Counter from './components/Counter.vue'
+</script>
+
+<template>
+ <Counter msg="Vue" />
+</template>
diff --git a/templates/vue-js/src/components/Counter.vue b/templates/vue-js/src/components/Counter.vue
@@ -0,0 +1,16 @@
+<script setup>
+import { ref } from 'vue'
+
+defineProps({
+ msg: String,
+})
+
+const count = ref(0)
+</script>
+
+<template>
+ <h1>{{ msg }}</h1>
+ <div class="card">
+ <button type="button" @click="count++">count is {{ count }}</button>
+ </div>
+</template>
diff --git a/templates/vue-js/src/main.js b/templates/vue-js/src/main.js
@@ -0,0 +1,5 @@
+import { createApp } from 'vue'
+import './style.css'
+import App from './App.vue'
+
+createApp(App).mount('#app')
diff --git a/templates/vue-js/src/style.css b/templates/vue-js/src/style.css
@@ -0,0 +1,57 @@
+:root {
+ font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+ line-height: 1.5;
+ font-weight: 400;
+
+ color-scheme: light dark;
+ color: rgba(255, 255, 255, 0.87);
+ background-color: #242424;
+
+ font-synthesis: none;
+ text-rendering: optimizeLegibility;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+}
+body {
+ margin: 0;
+ display: flex;
+ justify-content: center;
+ place-items: center;
+ min-width: 320px;
+ min-height: 100vh;
+}
+h1 {
+ font-size: 3.2em;
+ line-height: 1.1;
+ text-align: center;
+}
+button {
+ border-radius: 8px;
+ border: 1px solid transparent;
+ padding: 0.6em 1.2em;
+ font-size: 1em;
+ font-weight: 500;
+ font-family: inherit;
+ background-color: #1a1a1a;
+ cursor: pointer;
+ transition: border-color 0.25s;
+}
+button:hover {
+ border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+ outline: 4px auto -webkit-focus-ring-color;
+}
+@media (prefers-color-scheme: light) {
+ :root {
+ color: #213547;
+ background-color: #ffffff;
+ }
+ a:hover {
+ color: #747bff;
+ }
+ button {
+ background-color: #f9f9f9;
+ }
+}
diff --git a/templates/vue-js/vite.config.js b/templates/vue-js/vite.config.js
@@ -0,0 +1,7 @@
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+ plugins: [vue()],
+})