first commit

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/App.vue

@@ -0,0 +1,17 @@
+<template>
+  <div id="nav">
+    <router-link to="/">Home</router-link> |
+    <router-link to="/about">About</router-link>
+  </div>
+  <router-view/>
+</template>
+
+<style lang="stylus">
+#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
+</style>

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/components/HelloWorld.vue

@@ -0,0 +1,36 @@
+<template>
+  <div class="hello">
+    <h1>{{ msg }}</h1>
+    <p>
+      For a guide and recipes on how to configure / customize this project,<br>
+      check out the
+      <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'HelloWorld',
+  props: {
+    msg: String
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped lang="stylus">
+h3
+  margin 40px 0 0
+
+ul
+  list-style-type none
+  padding 0
+
+li
+  display inline-block
+  margin 0 10px
+
+a
+  color #42b983
+</style>

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/main.js

@@ -0,0 +1,8 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import store from './store'
+
+createApp(App).use(store)
+.use(router)
+.mount('#app')

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/router/index.js

@@ -0,0 +1,25 @@
+import { createRouter, createWebHashHistory } from 'vue-router'
+import Home from '../views/Home.vue'
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/about',
+    name: 'About',
+    // route level code-splitting
+    // this generates a separate chunk (about.[hash].js) for this route
+    // which is lazy-loaded when the route is visited.
+    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
+  }
+]
+
+const router = createRouter({
+  history: createWebHashHistory(),
+  routes
+})
+
+export default router

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/store/index.js

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+
+export default createStore({
+  state: {
+  },
+  mutations: {
+  },
+  actions: {
+  },
+  modules: {
+  }
+})

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/views/About.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>

历届学生/逯帅帅/项目开发/上课项目/vue3next/src/views/Home.vue

@@ -0,0 +1,48 @@
+<template>
+  <div class="home">
+    {{ name }}
+    <button @click="test">点我</button>
+    <ul>
+      <li v-for="(item,index) in list" :key="index">{{ item.id }}</li>
+    </ul>
+  </div>
+</template>
+<script>
+import HelloWorld from '@/components/HelloWorld.vue'
+import { ref, toRefs, onMounted, reactive } from 'vue'
+import router from "../router";
+
+export default {
+  setup(props, context) {
+
+    const state = reactive({
+      name: '你好',
+      age: '18',
+      list: [
+        { id: 1 },
+        { id: 2 },
+        { id: 3 },
+      ]
+    });
+
+    onMounted( () => {
+      // test();
+      console.log(context);
+      console.log();
+    })
+
+    const test = function () {
+      // router.push("/about")
+      console.log(state.list[0].id=44);
+    }
+    
+    return {
+      ...toRefs(state),
+      test
+    };
+  },
+  components: {
+    HelloWorld
+  },
+}
+</script>