ori

2021-09-04 10:28:36 +08:00 · 2021-09-04 10:28:36 +08:00 · 897cb40d3c
commit 897cb40d3c
parent 55106f5718
8 changed files with 251 additions and 18 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -2314,6 +2314,14 @@
      "integrity": "sha1-3TeelPDbgxCwgpH51kwyCXZmF/0=",
      "dev": true
    },
+    "async-validator": {
+      "version": "1.8.5",
+      "resolved": "https://registry.npmjs.org/async-validator/-/async-validator-1.8.5.tgz",
+      "integrity": "sha512-tXBM+1m056MAX0E8TL2iCjg8WvSyXu0Zc8LNtYqrVeyoL3+esHRZ4SieE9fKQyyU09uONjnMEjrNBMqT0mbvmA==",
+      "requires": {
+        "babel-runtime": "6.x"
+      }
+    },
    "asynckit": {
      "version": "0.4.0",
      "resolved": "https://registry.npm.taobao.org/asynckit/download/asynckit-0.4.0.tgz",
@ -2367,6 +2375,11 @@
        "resolve": "^1.12.0"
      }
    },
+    "babel-helper-vue-jsx-merge-props": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/babel-helper-vue-jsx-merge-props/-/babel-helper-vue-jsx-merge-props-2.0.3.tgz",
+      "integrity": "sha512-gsLiKK7Qrb7zYJNgiXKpXblxbV5ffSwR0f5whkPAaBAR4fhi6bwRZxX9wBlIc5M/v8CCkXUbXZL4N/nSE97cqg=="
+    },
    "babel-loader": {
      "version": "8.2.2",
      "resolved": "https://registry.npm.taobao.org/babel-loader/download/babel-loader-8.2.2.tgz?cache=0&sync_timestamp=1606424647115&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-loader%2Fdownload%2Fbabel-loader-8.2.2.tgz",
@ -2418,6 +2431,27 @@
        "@babel/helper-define-polyfill-provider": "^0.2.2"
      }
    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.12",
+          "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
+          "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
    "balanced-match": {
      "version": "1.0.2",
      "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
@ -4063,8 +4097,7 @@
    "deepmerge": {
      "version": "1.5.2",
      "resolved": "https://registry.nlark.com/deepmerge/download/deepmerge-1.5.2.tgz",
-      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M=",
-      "dev": true
+      "integrity": "sha1-EEmdhohEza1P7ghC34x/bwyVp1M="
    },
    "default-gateway": {
      "version": "5.0.5",
@ -4513,6 +4546,19 @@
      "integrity": "sha1-Mu0CT6gxbl1GnJbuy+p9JGPYAIU=",
      "dev": true
    },
+    "element-ui": {
+      "version": "2.15.5",
+      "resolved": "https://registry.npmjs.org/element-ui/-/element-ui-2.15.5.tgz",
+      "integrity": "sha512-B/YCdz2aRY2WnFXzbTRTHPKZHBD/2KV6u88EBnkaARC/Lyxnap+7vpvrcW5UNTyVwjItS5Fj1eQyRy6236lbXg==",
+      "requires": {
+        "async-validator": "~1.8.1",
+        "babel-helper-vue-jsx-merge-props": "^2.0.0",
+        "deepmerge": "^1.2.0",
+        "normalize-wheel": "^1.0.1",
+        "resize-observer-polyfill": "^1.5.0",
+        "throttle-debounce": "^1.0.1"
+      }
+    },
    "elliptic": {
      "version": "6.5.4",
      "resolved": "https://registry.npm.taobao.org/elliptic/download/elliptic-6.5.4.tgz?cache=0&sync_timestamp=1612290836352&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Felliptic%2Fdownload%2Felliptic-6.5.4.tgz",
@ -7596,6 +7642,11 @@
      "integrity": "sha1-suHE3E98bVd0PfczpPWXjRhlBVk=",
      "dev": true
    },
+    "normalize-wheel": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/normalize-wheel/-/normalize-wheel-1.0.1.tgz",
+      "integrity": "sha1-rsiGr/2wRQcNhWRH32Ls+GFG7EU="
+    },
    "npm-run-path": {
      "version": "2.0.2",
      "resolved": "https://registry.nlark.com/npm-run-path/download/npm-run-path-2.0.2.tgz",
@ -9258,6 +9309,11 @@
      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=",
      "dev": true
    },
+    "resize-observer-polyfill": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/resize-observer-polyfill/-/resize-observer-polyfill-1.5.1.tgz",
+      "integrity": "sha512-LwZrotdHOo12nQuZlHEmtuXdqGoOD0OhaxopaNFxWzInpEgaLWoVuAMbTzixuosCx2nEG58ngzW3vxdWoxIgdg=="
+    },
    "resolve": {
      "version": "1.20.0",
      "resolved": "https://registry.nlark.com/resolve/download/resolve-1.20.0.tgz?cache=0&sync_timestamp=1618846903792&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fresolve%2Fdownload%2Fresolve-1.20.0.tgz",
@ -10459,6 +10515,11 @@
        "neo-async": "^2.6.0"
      }
    },
+    "throttle-debounce": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-1.1.0.tgz",
+      "integrity": "sha512-XH8UiPCQcWNuk2LYePibW/4qL97+ZQ1AN3FNXwZRBNPPowo/NRU5fAlDCSNBJIYCKbioZfuYtMhG4quqoJhVzg=="
+    },
    "through": {
      "version": "2.3.8",
      "resolved": "https://registry.nlark.com/through/download/through-2.3.8.tgz",
@ -11125,6 +11186,11 @@
        }
      }
    },
+    "vue-router": {
+      "version": "3.5.2",
+      "resolved": "https://registry.nlark.com/vue-router/download/vue-router-3.5.2.tgz?cache=0&sync_timestamp=1628495505697&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-router%2Fdownload%2Fvue-router-3.5.2.tgz",
+      "integrity": "sha1-X1Xj8lGXDjbD6NiKfNLWejUK3lw="
+    },
    "vue-style-loader": {
      "version": "4.1.3",
      "resolved": "https://registry.npm.taobao.org/vue-style-loader/download/vue-style-loader-4.1.3.tgz?cache=0&sync_timestamp=1614758618345&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-style-loader%2Fdownload%2Fvue-style-loader-4.1.3.tgz",
--- a/package.json
+++ b/package.json
@ -9,11 +9,14 @@
  },
  "dependencies": {
    "core-js": "^3.6.5",
-    "vue": "^2.6.11"
+    "element-ui": "^2.15.5",
+    "vue": "^2.6.11",
+    "vue-router": "^3.2.0"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "~4.5.0",
    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-router": "^4.5.13",
    "@vue/cli-service": "~4.5.0",
    "babel-eslint": "^10.1.0",
    "eslint": "^6.7.2",
--- a/src/App.vue
+++ b/src/App.vue
@ -1,21 +1,13 @@
 <template>
  <div id="app">
-    <img alt="Vue logo" src="./assets/logo.png">
-    <HelloWorld msg="Welcome to Your Vue.js App"/>
+    <div id="nav">
+      <router-link to="/">Home</router-link> |
+      <router-link to="/TodoList">TodoList</router-link>
+    </div>
+    <router-view/>
  </div>
 </template>

-<script>
-import HelloWorld from './components/HelloWorld.vue'
-
-export default {
-  name: 'App',
-  components: {
-    HelloWorld
-  }
-}
-</script>
-
 <style>
 #app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
@ -23,6 +15,18 @@ export default {
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
-  margin-top: 60px;
+}
+
+#nav {
+  padding: 30px;
+}
+
+#nav a {
+  font-weight: bold;
+  color: #2c3e50;
+}
+
+#nav a.router-link-exact-active {
+  color: #42b983;
 }
 </style>
--- a/src/components/todolist.vue
+++ b/src/components/todolist.vue
@ -0,0 +1,105 @@
+<template>
+  <div id="tolist">
+    <el-row type="flex" class="row-bg" justify="center">
+      <el-col :span="24"><div class="grid-content bg-red title">待办事项</div></el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" >
+      <el-col :span="2"><div class="grid-content normal">添加任务：</div></el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" >
+      <el-col :span="6"><el-input v-model="input1" placeholder="请输入内容"></el-input></el-col>
+      <el-col :span="2"><el-button v-on:click="commit" type="success" icon="el-icon-check" circle></el-button></el-col>
+    </el-row>
+    <el-row type="flex" class="row-bg" >
+      <el-col :span="2"><div class="grid-content  normal">任务列表：</div></el-col>
+      <el-col :span="2"><div class="grid-content  min">{{num}}个任务未完成</div></el-col>
+    </el-row>
+    <el-checkbox-group v-model="checkList" >
+      <el-row type="flex"  v-for="c in checkName" :key="c.id" ><el-checkbox :label="c.id">{{c.context}}</el-checkbox></el-row>
+    </el-checkbox-group>
+    <el-row type="flex" class="row-bg" >
+      <el-col :span="2"><el-button v-on:click="save" type="success" icon="el-icon-check" circle></el-button></el-col>
+    </el-row>
+
+
+  </div>
+
+</template>
+
+<script>
+export default {
+  name: "todolist",
+  data(){
+    return {
+      checkName:[],
+      checkList: [],
+      input1: '',
+      input2: '',
+      input3: '',
+      input4: ''
+    }
+  },
+  methods:{
+    commit(){
+      this.checkName.push({id:this.checkName.length,context:this.input1})
+    },
+    save(){
+
+    }
+  },
+  computed:{
+    num(){
+      return this.checkName.length-this.checkList.length
+    }
+  }
+}
+</script>
+
+<style scoped>
+.title{
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  font-size: xx-large;
+  font-weight: bold;
+}
+.normal{
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  font-size: medium;
+  font-weight: bold;
+}
+.min{
+  font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
+  font-size: small;
+  font-weight: lighter;
+  font-style: italic;
+  vertical-align: middle;
+}
+.el-row {
+  margin-bottom: 20px;
+&:last-child {
+   margin-bottom: 0;
+ }
+}
+.el-col {
+  border-radius: 4px;
+}
+.bg-purple-dark {
+  background: #99a9bf;
+}
+.bg-purple {
+  background: #d3dce6;
+}
+.bg-red {
+  background: red;
+}
+.bg-purple-light {
+  background: #e5e9f2;
+}
+.grid-content {
+  border-radius: 4px;
+  min-height: 36px;
+}
+.row-bg {
+  padding: 10px 0;
+  background-color: #f9fafc;
+}
+</style>
--- a/src/main.js
+++ b/src/main.js
@ -1,8 +1,13 @@
 import Vue from 'vue'
 import App from './App.vue'
+import router from './router'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';

 Vue.config.productionTip = false
+Vue.use(ElementUI);

 new Vue({
-  render: h => h(App),
+  router,
+  render: h => h(App)
 }).$mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,27 @@
+import Vue from 'vue'
+import VueRouter from 'vue-router'
+import Home from '../views/Home.vue'
+
+Vue.use(VueRouter)
+
+const routes = [
+  {
+    path: '/',
+    name: 'Home',
+    component: Home
+  },
+  {
+    path: '/TodoList',
+    name: 'TodoList',
+    // 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" */ '../components/todolist.vue')
+  }
+]
+
+const router = new VueRouter({
+  routes
+})
+
+export default router
--- a/src/views/About.vue
+++ b/src/views/About.vue
@ -0,0 +1,5 @@
+<template>
+  <div class="about">
+    <h1>This is an about page</h1>
+  </div>
+</template>
--- a/src/views/Home.vue
+++ b/src/views/Home.vue
@ -0,0 +1,18 @@
+<template>
+  <div class="home">
+    <img alt="Vue logo" src="../assets/logo.png">
+    <HelloWorld msg="Welcome to Your Vue.js App"/>
+  </div>
+</template>
+
+<script>
+// @ is an alias to /src
+import HelloWorld from '@/components/HelloWorld.vue'
+
+export default {
+  name: 'Home',
+  components: {
+    HelloWorld
+  }
+}
+</script>