Mon Dec 18 17:41:00 CST 2023 inscode

.inscode

 run = "npm i && npm run dev"
+language = "node"
 
 [deployment]
 build = "npm i && npm run build"
@@ -8,3 +9,6 @@ run = "npm run preview"
 PATH = "/root/${PROJECT_DIR}/.config/npm/node_global/bin:/root/${PROJECT_DIR}/node_modules/.bin:${PATH}"
 XDG_CONFIG_HOME = "/root/.config"
 npm_config_prefix = "/root/${PROJECT_DIR}/.config/npm/node_global"
+
+[debugger]
+program = "main.js"

src/App.vue

@@ -4,6 +4,7 @@ import TheWelcome from './components/TheWelcome.vue'
 </script>
 
 <template>
+  <div id="app"> <vote v-for="(item, index) in list" :key="index" :avatar="item.avatar" :name="item.name"></vote> </div>
   <header>
     <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
 
@@ -16,6 +17,11 @@ import TheWelcome from './components/TheWelcome.vue'
     <TheWelcome />
   </main>
 </template>
+<script>
+import Vote from './components/vote.vue'
+
+export default { name: 'App', components: { Vote }, data() { return { list: [ {avatar: require('./assets/jane.png'), name: 'Jane'}, {avatar: require('./assets/kate.png'), name: 'Kate'}, {avatar: require('./assets/mike.png'), name: 'Mike'}, {avatar: require('./assets/tom.png'), name: 'Tom'} ] } } }
+</script>
 
 <style scoped>
 header {

src/components/vote.vue

+<template>
+    <div class="vote"> <img :src="avatar" :alt="name">
+        <p>{{ name }}</p> <button @click="voteCount++">投票</button>
+        <p>票数：{{ voteCount }}</p>
+    </div>
+</template>
+
+<script>
+export default {
+    props: { avatar: String, name: String }, data() {
+        return { voteCount: 0 }
+    }
+}
+</script>
\ No newline at end of file