Commit 01d92c3a authored by cc201007's avatar cc201007
Browse files

Initial commit

parents
node_modules
.DS_Store
dist
dist-ssr
*.local
\ No newline at end of file
{
"recommendations": ["johnsoncodehk.volar"]
}
# Vue 3 + Vite
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.
## Recommended IDE Setup
- [VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=johnsoncodehk.volar)
<!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">
<!-- Here is the vue app-->
<router-link to="/">Home</router-link>
<router-link to="/pokedex">Pokedex</router-link>
<router-link to="/calculator">Calculator</router-link>
<router-view />
</div>
<script type="module" src="/src/main.js"></script>
</body>
</html>
This diff is collapsed.
{
"name": "atjs-app",
"version": "0.0.0",
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"vue": "^3.2.16",
"vue-router": "^4.0.12"
},
"devDependencies": {
"@vitejs/plugin-vue": "^1.9.3",
"vite": "^2.6.4"
}
}
import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import Home from './pages/Home.vue';
import Pokedex from './pages/Pokedex.vue';
import Calculator from './pages/Calculator.vue';
const routes = [
{ path: '/', component: Home },
{ path: '/pokedex', component: Pokedex },
{ path: '/calculator', component: Calculator }
]
const router = createRouter({
history: createWebHistory(),
routes
});
const app = createApp({})
app.use(router)
app.mount('#app')
<template>
<h1>Calculator Page</h1>
</template>
\ No newline at end of file
<template>
<h1>Home Page</h1>
</template>
\ No newline at end of file
<script>
export default {
data() {
return {
list: [],
};
},
methods: {
async fetchPokemon() {
const url = 'https://pokeapi.co/api/v2/pokemon?limit=151';
const data = await fetch(url);
const pokemon = await data.json();
this.list = pokemon.results;
},
},
};
</script>
<template>
<div>
<h1>Pokedex</h1>
<button @click="fetchPokemon">Catch Pokemon</button>
<div v-for="(item, index) in list" :key="index">
<div>
<img
:src="`https://raw.githubusercontent.com/PokeAPI/sprites/master/sprites/pokemon/${
index + 1
}.png`"
alt=""
/>
<h2>{{ item.name }}</h2>
</div>
</div>
</div>
</template>
\ No newline at end of file
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/
export default defineConfig({
define: { 'process.env': {} },
plugins: [vue()],
resolve: { alias: { 'vue': 'vue/dist/vue.esm-bundler.js' } }
})
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment