From 91a7f8196e7b4c897ac21a17fad42d4baf862e54 Mon Sep 17 00:00:00 2001 From: roger Date: Thu, 2 Mar 2023 09:55:30 +0800 Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90vue-router=E7=9A=84=E7=AC=AC?= =?UTF-8?q?=E4=B8=80=E4=B8=AA=E7=A4=BA=E4=BE=8B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 20_脚手架/vue_code/package-lock.json | 72 +++++++++++++++++++ 20_脚手架/vue_code/package.json | 2 + 20_脚手架/vue_code/public/index.html | 2 +- 20_脚手架/vue_code/src/App.vue | 31 +++++--- .../vue_code/src/components/About.vue | 13 ++++ .../vue_code/src/components/Count.vue | 54 -------------- 20_脚手架/vue_code/src/components/Home.vue | 13 ++++ .../vue_code/src/components/Person.vue | 59 --------------- 20_脚手架/vue_code/src/main.js | 15 ++-- 20_脚手架/vue_code/src/router/index.js | 19 +++++ 20_脚手架/vue_code/src/store/count.js | 35 --------- 20_脚手架/vue_code/src/store/index.js | 72 ------------------- 20_脚手架/vue_code/src/store/person.js | 42 ----------- 13 files changed, 148 insertions(+), 281 deletions(-) create mode 100644 20_脚手架/vue_code/src/components/About.vue delete mode 100644 20_脚手架/vue_code/src/components/Count.vue create mode 100644 20_脚手架/vue_code/src/components/Home.vue delete mode 100644 20_脚手架/vue_code/src/components/Person.vue create mode 100644 20_脚手架/vue_code/src/router/index.js delete mode 100644 20_脚手架/vue_code/src/store/count.js delete mode 100644 20_脚手架/vue_code/src/store/index.js delete mode 100644 20_脚手架/vue_code/src/store/person.js diff --git a/20_脚手架/vue_code/package-lock.json b/20_脚手架/vue_code/package-lock.json index e0dc108..35f9e62 100644 --- a/20_脚手架/vue_code/package-lock.json +++ b/20_脚手架/vue_code/package-lock.json @@ -14,6 +14,8 @@ "pubsub-js": "^1.9.4", "vue": "^2.6.14", "vue-resource": "^1.3.5", + "vue-route": "^1.5.1", + "vue-router": "^3.6.5", "vuex": "^3.6.2" }, "devDependencies": { @@ -7930,6 +7932,27 @@ "node": ">=6" } }, + "node_modules/page": { + "version": "1.11.6", + "resolved": "https://registry.npmmirror.com/page/-/page-1.11.6.tgz", + "integrity": "sha512-P6e2JfzkBrPeFCIPplLP7vDDiU84RUUZMrWdsH4ZBGJ8OosnwFkcUkBHp1DTIjuipLliw9yQn/ZJsXZvarsO+g==", + "dependencies": { + "path-to-regexp": "~1.2.1" + } + }, + "node_modules/page/node_modules/isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmmirror.com/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "node_modules/page/node_modules/path-to-regexp": { + "version": "1.2.1", + "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-1.2.1.tgz", + "integrity": "sha512-DBw9IhWfevR2zCVwEZURTuQNseCvu/Q9f5ZgqMCK0Rh61bDa4uyjPAOy9b55yKiPT59zZn+7uYKxmWwsguInwg==", + "dependencies": { + "isarray": "0.0.1" + } + }, "node_modules/param-case": { "version": "3.0.4", "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz", @@ -10386,6 +10409,19 @@ "got": "^7.1.0" } }, + "node_modules/vue-route": { + "version": "1.5.1", + "resolved": "https://registry.npmmirror.com/vue-route/-/vue-route-1.5.1.tgz", + "integrity": "sha512-RoeEWvSTk/Zasjx11En4XPyE1jXwuFQ4Itr4fzh1TOSMYefUddhhlHXmAGFFPn37J1YrEymm6sU/3IRTyu23Aw==", + "dependencies": { + "page": "^1.5.0" + } + }, + "node_modules/vue-router": { + "version": "3.6.5", + "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz", + "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" + }, "node_modules/vue-style-loader": { "version": "4.1.3", "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz", @@ -17301,6 +17337,29 @@ "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==", "dev": true }, + "page": { + "version": "1.11.6", + "resolved": "https://registry.npmmirror.com/page/-/page-1.11.6.tgz", + "integrity": "sha512-P6e2JfzkBrPeFCIPplLP7vDDiU84RUUZMrWdsH4ZBGJ8OosnwFkcUkBHp1DTIjuipLliw9yQn/ZJsXZvarsO+g==", + "requires": { + "path-to-regexp": "~1.2.1" + }, + "dependencies": { + "isarray": { + "version": "0.0.1", + "resolved": "https://registry.npmmirror.com/isarray/-/isarray-0.0.1.tgz", + "integrity": "sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==" + }, + "path-to-regexp": { + "version": "1.2.1", + "resolved": "https://registry.npmmirror.com/path-to-regexp/-/path-to-regexp-1.2.1.tgz", + "integrity": "sha512-DBw9IhWfevR2zCVwEZURTuQNseCvu/Q9f5ZgqMCK0Rh61bDa4uyjPAOy9b55yKiPT59zZn+7uYKxmWwsguInwg==", + "requires": { + "isarray": "0.0.1" + } + } + } + }, "param-case": { "version": "3.0.4", "resolved": "https://registry.npmmirror.com/param-case/-/param-case-3.0.4.tgz", @@ -19192,6 +19251,19 @@ "got": "^7.1.0" } }, + "vue-route": { + "version": "1.5.1", + "resolved": "https://registry.npmmirror.com/vue-route/-/vue-route-1.5.1.tgz", + "integrity": "sha512-RoeEWvSTk/Zasjx11En4XPyE1jXwuFQ4Itr4fzh1TOSMYefUddhhlHXmAGFFPn37J1YrEymm6sU/3IRTyu23Aw==", + "requires": { + "page": "^1.5.0" + } + }, + "vue-router": { + "version": "3.6.5", + "resolved": "https://registry.npmmirror.com/vue-router/-/vue-router-3.6.5.tgz", + "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" + }, "vue-style-loader": { "version": "4.1.3", "resolved": "https://registry.npmmirror.com/vue-style-loader/-/vue-style-loader-4.1.3.tgz", diff --git a/20_脚手架/vue_code/package.json b/20_脚手架/vue_code/package.json index a81480f..94c96bc 100644 --- a/20_脚手架/vue_code/package.json +++ b/20_脚手架/vue_code/package.json @@ -14,6 +14,8 @@ "pubsub-js": "^1.9.4", "vue": "^2.6.14", "vue-resource": "^1.3.5", + "vue-route": "^1.5.1", + "vue-router": "^3.6.5", "vuex": "^3.6.2" }, "devDependencies": { diff --git a/20_脚手架/vue_code/public/index.html b/20_脚手架/vue_code/public/index.html index e95a5c8..9595ac5 100644 --- a/20_脚手架/vue_code/public/index.html +++ b/20_脚手架/vue_code/public/index.html @@ -5,7 +5,7 @@ - + <%= htmlWebpackPlugin.options.title %> diff --git a/20_脚手架/vue_code/src/App.vue b/20_脚手架/vue_code/src/App.vue index 3dc2784..58ce7bf 100644 --- a/20_脚手架/vue_code/src/App.vue +++ b/20_脚手架/vue_code/src/App.vue @@ -1,19 +1,32 @@ diff --git a/20_脚手架/vue_code/src/components/About.vue b/20_脚手架/vue_code/src/components/About.vue new file mode 100644 index 0000000..f1830d7 --- /dev/null +++ b/20_脚手架/vue_code/src/components/About.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/20_脚手架/vue_code/src/components/Count.vue b/20_脚手架/vue_code/src/components/Count.vue deleted file mode 100644 index 8967479..0000000 --- a/20_脚手架/vue_code/src/components/Count.vue +++ /dev/null @@ -1,54 +0,0 @@ - - - - - \ No newline at end of file diff --git a/20_脚手架/vue_code/src/components/Home.vue b/20_脚手架/vue_code/src/components/Home.vue new file mode 100644 index 0000000..ea7fc76 --- /dev/null +++ b/20_脚手架/vue_code/src/components/Home.vue @@ -0,0 +1,13 @@ + + + + + \ No newline at end of file diff --git a/20_脚手架/vue_code/src/components/Person.vue b/20_脚手架/vue_code/src/components/Person.vue deleted file mode 100644 index 7af6dde..0000000 --- a/20_脚手架/vue_code/src/components/Person.vue +++ /dev/null @@ -1,59 +0,0 @@ - - - - - \ No newline at end of file diff --git a/20_脚手架/vue_code/src/main.js b/20_脚手架/vue_code/src/main.js index abf3e27..9c406ac 100644 --- a/20_脚手架/vue_code/src/main.js +++ b/20_脚手架/vue_code/src/main.js @@ -2,16 +2,16 @@ import Vue from "vue"; // 引入App import App from "./App"; -// 引入插件 -import vueResource from "vue-resource"; - -import store from './store' +// 引入VueRouter +import VueRouter from "vue-router"; +// 引入router +import router from "@/router"; // 设置Vue Vue.config.productionTip = false // 使用插件 -Vue.use(vueResource) +Vue.use(VueRouter) // 实例化Vue new Vue({ @@ -19,8 +19,5 @@ new Vue({ App }, render: h => h(App), - store, - beforeCreate() { - Vue.prototype.$bus = this // 安装全局事件总线 - } + router: router, }).$mount('#app') diff --git a/20_脚手架/vue_code/src/router/index.js b/20_脚手架/vue_code/src/router/index.js new file mode 100644 index 0000000..f8af21b --- /dev/null +++ b/20_脚手架/vue_code/src/router/index.js @@ -0,0 +1,19 @@ +import VueRouter from "vue-router"; + +// 引入组件 +import About from "../components/About.vue" +import Home from "../components/Home.vue" + +// 创建一个路由器 +export default new VueRouter({ + routes: [ + { + path: '/about', + component: About + }, + { + path: '/home', + component: Home + }, + ] +}) diff --git a/20_脚手架/vue_code/src/store/count.js b/20_脚手架/vue_code/src/store/count.js deleted file mode 100644 index b30a58f..0000000 --- a/20_脚手架/vue_code/src/store/count.js +++ /dev/null @@ -1,35 +0,0 @@ -// count相关的设置 -export default { - namespaced: true, - actions: { - vuexAddOdd(context, value) { - if (context.state.sum % 2) { - context.commit('vuexAdd', value) - } - }, - vuexAddWait(context, value) { - setTimeout(() => { - context.commit('vuexAdd', value) - }, 1000 - ) - } - }, - mutations: { - vuexAdd(state, value) { - state.sum += value - }, - vuexSub(state, value) { - state.sum -= value - }, - }, - state: { - sum: 0, - school: '修仙学院', - subject: '修仙', - }, - getters: { - bigSum(state) { - return state.sum * 10 - } - } -} \ No newline at end of file diff --git a/20_脚手架/vue_code/src/store/index.js b/20_脚手架/vue_code/src/store/index.js deleted file mode 100644 index a11063b..0000000 --- a/20_脚手架/vue_code/src/store/index.js +++ /dev/null @@ -1,72 +0,0 @@ -// 用于创建vue中核心 store -// 引入Vue -import Vue from "vue"; -// 引入vuex -import Vuex from 'vuex' - -import countOptions from './count' -import personOptions from './person' - -// 应用Vuex插件 -Vue.use(Vuex) - -// 准备actions-用于响应组件中的动作,业务逻辑需要写到actions中 -// const actions = { -// vuexAddOdd(context, value) { -// if (context.state.sum % 2) { -// context.commit('vuexAdd', value) -// } -// }, -// vuexAddWait(context, value) { -// setTimeout(() => { -// context.commit('vuexAdd', value) -// }, 1000 -// ) -// } -// } - -//准备mutations-用于操作数据 -// const mutations = { -// vuexAdd(state, value) { -// state.sum += value -// }, -// vuexSub(state, value) { -// state.sum -= value -// }, -// ADD_PERSON(state, personObj) { -// state.personList.unshift(personObj) -// } -// } - -//准备state-用于存储数据 -// const state = { -// sum: 0, -// school: '修仙学院', -// subject: '修仙', -// personList: [ -// {id: '001', name: '张三'} -// ] -// } - -// getters 用于对state中的数据进行加工，类似用computed -// const getters = { -// bigSum(state) { -// return state.sum * 10 -// } -// } - -// 创建并导出store -// export default new Vuex.Store({ -// actions, -// mutations, -// state, -// getters -// }) - -// namespace形式的导出 -export default new Vuex.Store({ - modules: { - countOptions: countOptions, - personOptions: personOptions, - } -}) diff --git a/20_脚手架/vue_code/src/store/person.js b/20_脚手架/vue_code/src/store/person.js deleted file mode 100644 index 501b29f..0000000 --- a/20_脚手架/vue_code/src/store/person.js +++ /dev/null @@ -1,42 +0,0 @@ -// count相关的设置 - -import axios from "axios"; -import {nanoid} from "nanoid"; -export default { - namespaced: true, - actions: { - addPersonWang(context, value) { - if (value.name.indexOf('王') === 0) { - context.commit('ADD_PERSON', value) - }else{ - alert('添加的人必须姓王！') - } - }, - addPersonServer(context) { - axios.get('https://api.uixsj.cn/hitokoto/get?type=social').then( - response => { - context.commit('ADD_PERSON', {id: nanoid(), name: response.data}) - - }, - error => { - alert(error.message) - } - ) - } - }, - mutations: { - ADD_PERSON(state, personObj) { - state.personList.unshift(personObj) - } - }, - state: { - personList: [ - {id: '001', name: '张三'} - ] - }, - getters: { - firstPersonName(state) { - return state.personList[0].name - } - } -} \ No newline at end of file