Skip to content

Commit e5f8297

Browse files
msaaddevmsaaddev
committed
📦 NEW: Added boilerplate
0 parents  commit e5f8297

File tree

14 files changed

+169
-0
lines changed

14 files changed

+169
-0
lines changed

‎.gitignore

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["johnsoncodehk.volar"]
3+
}

‎README.md

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
# Vue 3 + Vite
2+
3+
This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
4+
5+
## Recommended IDE Setup
6+
7+
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)

‎index.html

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="/favicon.ico" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite App</title>
8+
</head>
9+
<body>
10+
<div id="app"></div>
11+
<script type="module" src="/src/main.js"></script>
12+
</body>
13+
</html>

‎package.json

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
{
2+
"name": "vue-flask-mongodb",
3+
"private": true,
4+
"version": "0.0.0",
5+
"scripts": {
6+
"dev": "vite",
7+
"build": "vite build",
8+
"preview": "vite preview"
9+
},
10+
"dependencies": {
11+
"vue": "^3.2.25"
12+
},
13+
"devDependencies": {
14+
"@vitejs/plugin-vue": "^2.2.0",
15+
"vite": "^2.8.0"
16+
}
17+
}

‎public/favicon.ico

4.19 KB
Binary file not shown.

‎server/.env

+1
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
MONGODB_ATLAS_DB_LINK=REPLACE_WITH_YOUR_MONGODB_ATLAS_DB_LINK

‎server/app.py

+28
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
# IMPORT
2+
import os
3+
from flask import Flask
4+
from flask_cors import CORS
5+
from flask_pymongo import PyMongo
6+
from dotenv import load_dotenv, find_dotenv
7+
8+
# loading environment variables
9+
load_dotenv(find_dotenv())
10+
11+
# APP SETUP
12+
app = Flask(__name__)
13+
# enable resource sharing between frontend and server
14+
CORS(app)
15+
16+
# DB
17+
mongo = PyMongo()
18+
app.config['MONGO_URI'] = os.getenv('MONGODB_ATLAS_DB_LINK')
19+
20+
mongo.init_app(app)
21+
22+
# ROUTES
23+
@app.route('/hello', methods=['GET'])
24+
def hello():
25+
return 'Hello World!'
26+
27+
if __name__ == "__main__":
28+
app.run(debug=True)

‎server/requirements.txt

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
Flask==2.0.2
2+
flask_cors==3.0.10
3+
flask_pymongo==2.3.0
4+
python-dotenv==0.19.2

‎src/App.vue

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<script setup>
2+
// This starter template is using Vue 3 <script setup> SFCs
3+
// Check out https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup
4+
import HelloWorld from './components/HelloWorld.vue'
5+
</script>
6+
7+
<template>
8+
<img alt="Vue logo" src="./assets/logo.png" />
9+
<HelloWorld msg="Hello Vue 3 + Vite" />
10+
</template>
11+
12+
<style>
13+
#app {
14+
font-family: Avenir, Helvetica, Arial, sans-serif;
15+
-webkit-font-smoothing: antialiased;
16+
-moz-osx-font-smoothing: grayscale;
17+
text-align: center;
18+
color: #2c3e50;
19+
margin-top: 60px;
20+
}
21+
</style>

‎src/assets/logo.png

6.69 KB
Loading

‎src/components/HelloWorld.vue

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<script setup>
2+
import { ref } from 'vue'
3+
4+
defineProps({
5+
msg: String
6+
})
7+
8+
const count = ref(0)
9+
</script>
10+
11+
<template>
12+
<h1>{{ msg }}</h1>
13+
14+
<p>
15+
Recommended IDE setup:
16+
<a href="https://code.visualstudio.com/" target="_blank">VSCode</a>
17+
+
18+
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
19+
</p>
20+
21+
<p>
22+
<a href="https://vitejs.dev/guide/features.html" target="_blank">
23+
Vite Documentation
24+
</a>
25+
|
26+
<a href="https://v3.vuejs.org/" target="_blank">Vue 3 Documentation</a>
27+
</p>
28+
29+
<button type="button" @click="count++">count is: {{ count }}</button>
30+
<p>
31+
Edit
32+
<code>components/HelloWorld.vue</code> to test hot module replacement.
33+
</p>
34+
</template>
35+
36+
<style scoped>
37+
a {
38+
color: #42b983;
39+
}
40+
</style>

‎src/main.js

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { createApp } from 'vue'
2+
import App from './App.vue'
3+
4+
createApp(App).mount('#app')

‎vite.config.js

+7
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import { defineConfig } from 'vite'
2+
import vue from '@vitejs/plugin-vue'
3+
4+
// https://vitejs.dev/config/
5+
export default defineConfig({
6+
plugins: [vue()]
7+
})

0 commit comments

Comments
 (0)