diff --git a/package-lock.json b/package-lock.json index ae1a7e7..a9eec0a 100644 --- 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", diff --git a/package.json b/package.json index bf5f689..eb5134c 100644 --- 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", diff --git a/src/App.vue b/src/App.vue index 55df315..2d91ab8 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,21 +1,13 @@ - - + + Home | + TodoList + + - - diff --git a/src/components/todolist.vue b/src/components/todolist.vue new file mode 100644 index 0000000..21765ec --- /dev/null +++ b/src/components/todolist.vue @@ -0,0 +1,105 @@ + + + + 待办事项 + + + 添加任务: + + + + + + + 任务列表: + {{num}}个任务未完成 + + + {{c.context}} + + + + + + + + + + + + + diff --git a/src/main.js b/src/main.js index 63eb05f..c4da162 100644 --- 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') diff --git a/src/router/index.js b/src/router/index.js new file mode 100644 index 0000000..afddb83 --- /dev/null +++ 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 diff --git a/src/views/About.vue b/src/views/About.vue new file mode 100644 index 0000000..3fa2807 --- /dev/null +++ b/src/views/About.vue @@ -0,0 +1,5 @@ + + + This is an about page + + diff --git a/src/views/Home.vue b/src/views/Home.vue new file mode 100644 index 0000000..8bd6c57 --- /dev/null +++ b/src/views/Home.vue @@ -0,0 +1,18 @@ + + + + + + + +