更新todoList源修改样式等

silin001 · Aug 10, 2023 · f563e36 · f563e36
1 parent 1121540
commit f563e36
Show file tree

Hide file tree

Showing 11 changed files with 50 additions and 48 deletions.
diff --git a/index.html b/index.html
@@ -13,7 +13,13 @@
   <meta name="viewport" content="width=device-width, initial-scale=1.0" />
   <title>Vite App</title>
 </head>
+<style>
+html,body,#app{
+  width: 100%;
+  height: 100%;
+}
 
+</style>
 <body>
   <div id="app"></div>
   <script type="module" src="/src/main.ts"></script>

diff --git a/package.json b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "my-vite-todolist",
   "version": "0.0.0",
+  "homepage": "https://silin001.github.io/todolist_v3vite",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview"
   },
-  "homepage": "https://silin001.github.io/todolist_v3vite",
   "dependencies": {
     "@types/node": "^16.6.1",
     "axios": "^0.21.1",

diff --git a/src/App.vue b/src/App.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="rootBox full">
+  <div class="rootBox">
     <router-view></router-view>
   </div>
 </template>
@@ -12,4 +12,9 @@ export default defineComponent({
 });
 </script>
 
-<style></style>
+<style scoped lang="less">
+.rootBox{
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/src/router/index.ts b/src/router/index.ts
@@ -5,10 +5,10 @@ const routes: Array<RouteRecordRaw> = [
     path: "/",
     name: "index",
     component: index,
-    redirect: "/index/TodoList",
+    redirect: "/TodoList",
     children: [
       {
-        path: "/index/TodoList",
+        path: "/TodoList",
         name: "TodoList",
         component: () => import("../views/pages/TodoList/index.vue"),
       },

diff --git a/src/store/index.ts b/src/store/index.ts
@@ -19,8 +19,7 @@ const store = createStore({
     asyncAddNum ({ commit }, data) {
       setTimeout(() => {
         commit('add', data)
-        console.log(data)
-      }, 1000)
+      }, 200)
     },
     asyncGetUserInfo ({ commit }) {
       setTimeout(() => {

diff --git a/src/views/index.vue b/src/views/index.vue
@@ -1,38 +1,28 @@
 <template>
-  <div class="index full">
-    <el-container class="full">
-      <el-header class="text-center">
-        <h4>demos</h4>
-      </el-header>
-      <el-container class="container full">
+  <div class="index">
+      <el-container class="container">
         <el-aside class="aside">
           <div class="list-group">
-            <router-link class="list-group-item" to="/index/TodoList"
+            <router-link class="list-group-item" to="/TodoList"
               >TodoList</router-link
             >
             <router-link class="list-group-item" to="/index/Test"
               >test</router-link
             >
-
-            <router-link class="list-group-item" to="/index/ScriptSetup"
-              >script setup语法糖</router-link
-            >
             <router-link class="list-group-item" to="/index/routerVuex"
-              >router&vuex</router-link
+              >vue3使用router&vuex</router-link
             >
-
-            <!-- <router-link class="list-group-item" to="/index/Reptile"
-              >爬虫相关</router-link
+            <!-- <router-link class="list-group-item" to="/index/ScriptSetup"
+              >script setup语法糖</router-link
             > -->
           </div>
         </el-aside>
         <el-main>
-          <div class="rightBox full">
+          <div class="rightBox">
             <router-view></router-view>
           </div>
         </el-main>
       </el-container>
-    </el-container>
   </div>
 </template>
 
@@ -52,15 +42,23 @@ export default {
 </script>
 <style scoped lang="less">
 .index {
+    width: 100%;
+    height: 100%;
   // 路由全局配置了 选中添加class
+
   .active {
     color: red;
   }
   .container {
-    height: calc(100% - 60px);
+    width: 70%;
+    margin: 5% auto;
+    // height: 80%;
     .aside {
       width: 200px;
     }
+    .rightBox{
+      // border: 1px solid;
+    }
   }
 }
 </style>
diff --git a/src/views/pages/ApisGet/NavLink.vue b/src/views/pages/ApisGet/NavLink.vue
@@ -1,7 +1,7 @@
 <template>
   <div class='navLink'
        :class="{'active': isActive}">
-    {{route.name}}+ {{title}}
+    展示route名称+props 标题参数： {{route.name}}+ {{title}}
   </div>
 </template>
 
@@ -34,7 +34,7 @@ export default {
 </script>
 <style scoped lang='less'>
 .active {
-  background: red;
+  // background: red;
 }
 .navLink {
 }

diff --git a/src/views/pages/ApisGet/RouterVuex.vue b/src/views/pages/ApisGet/RouterVuex.vue
@@ -2,11 +2,11 @@
   <div class='routerVuex'
        style="height:1000px;">
     <NavLink to='/'
-             :title="123"></NavLink>
+             :title="'标题参数'"></NavLink>
     <button @click="goPage">新页面跳转</button>
     <button @click="back">返回页面</button>
     <br>
-    <button @click="add">获取store数据可以点击:{{$store.state.num}}</button>
+    <button @click="add">点击，store数据++ {{$store.state.num}}</button>
   </div>
 </template>
 
@@ -40,12 +40,12 @@ export default {
       console.log(query)
     })
     // 路由守卫-离开之前
-    onBeforeRouteLeave((to, from) => {
-      const answer = window.confirm('确定离开此页面吗？')
-      if (!answer) {
-        return false
-      }
-    })
+    // onBeforeRouteLeave((to, from) => {
+    //   const answer = window.confirm('确定离开此页面吗？')
+    //   if (!answer) {
+    //     return false
+    //   }
+    // })
     const back = () => {
       router.push('/')
     }
@@ -64,7 +64,7 @@ export default {
     console.log(num())
     // 改变store 状态数据
     const add = () => {
-      store.dispatch('syncaddnum', 1)
+      store.dispatch('asyncAddNum', 1)
 
     }
     return {

diff --git a/src/views/pages/ApisGet/ScriptSetup.vue b/src/views/pages/ApisGet/ScriptSetup.vue
@@ -27,7 +27,6 @@ import { ref, reactive, toRefs, onMounted } from "vue";
 // ]);
 
 import Foo from "./components/Foo.vue";
-// interface DataProps { }
 /*
 script setip 写法
 组件无需注册、变量数据无需return 就可以直接在tempalte使用
@@ -53,9 +52,6 @@ const getFoo = () => {
 //   })
 // }
 // const post = await p()
-// console.log('🚀🚀 ~ file: ScriptSetup.vue ~ line 31 ~ post', post)
 </script>
 <style scoped lang="less">
-.ScriptSetup {
-}
 </style>
diff --git a/src/views/pages/ApisGet/components/Foo.vue b/src/views/pages/ApisGet/components/Foo.vue
@@ -1,15 +1,14 @@
-<template inherit-attrs="false">
-  <!-- inheritAttrs  不允许添加任何属性  貌似不生效-->
+<template >
   <div class="templateBox">
     <h2>foo子组件</h2>
     <div>props:{{ title }}</div>
     <button @click="fooClick()">发送事件</button>
   </div>
 </template>
 <script lang="ts" setup>
-import { ref, onMounted, defineProps, defineEmits } from "vue";
-const test = ref("hello");
-// 1、props使用 defineProps函数
+import { ref, onMounted } from "vue";
+// const test = ref("hello");
+// 1、props使用 defineProps函数（不需要导入）
 // 写法1
 // const props = defineProps({
 //   title: Number
@@ -20,7 +19,7 @@ console.log("🚀🚀 ~ file: foo.vue ~ line 17 ~ props", props);
 //2、发送emit 使用 defineEmits
 const emit = defineEmits(["foo-click"]);
 // 3、context 上下文，跟之前 setup第二个参数context一样。 expose方法用于导出实例
-// const ctx = useContext()  //----------3.2已经弃用
+// const ctx = useContext()  //----------3.2已经弃用--------------
 // 导出给组件具体实例, 不像之前ref获取到所有组件的实例！
 // ctx.expose({
 //   test

diff --git a/src/views/pages/TodoList/index.vue b/src/views/pages/TodoList/index.vue
@@ -1,6 +1,5 @@
 <template>
   <div class="todolist">
-    <!-- <p @click="testGet">testGet</p> -->
     <div class="todo-container">
       <div class="todo-wrap">
         <Header :add="add" />
@@ -129,7 +128,7 @@ export default {
   }
 
   .todo-container {
-    width: 600px;
+    // width: 600px;
     margin: 0 auto;
   }
   .todo-container .todo-wrap {