From 3dfbdb7858ab821f542562dfbc7fbd1b57572def Mon Sep 17 00:00:00 2001 From: yennanliu Date: Mon, 27 Nov 2023 10:08:03 +0800 Subject: [PATCH] add router, change FE code --- ShoppingCart/Frondend/README.md | 3 ++ ShoppingCart/Frondend/ecommerce-ui/README.md | 47 +++++++++++++++++++ .../Frondend/ecommerce-ui/package-lock.json | 14 +++++- .../Frondend/ecommerce-ui/package.json | 4 +- .../Frondend/ecommerce-ui/src/App.vue | 32 +++++++------ .../Frondend/ecommerce-ui/src/main.js | 6 ++- .../Frondend/ecommerce-ui/src/router/index.js | 29 ++++++++++++ .../ecommerce-ui/src/views/AboutView.vue | 5 ++ .../ecommerce-ui/src/views/HomeView.vue | 18 +++++++ 9 files changed, 141 insertions(+), 17 deletions(-) create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/router/index.js create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/views/AboutView.vue create mode 100644 ShoppingCart/Frondend/ecommerce-ui/src/views/HomeView.vue diff --git a/ShoppingCart/Frondend/README.md b/ShoppingCart/Frondend/README.md index 44bb0a5d0..0042279ed 100644 --- a/ShoppingCart/Frondend/README.md +++ b/ShoppingCart/Frondend/README.md @@ -9,6 +9,9 @@ ```bash vue create ecommerce-ui + +# Run the following command in your command line to install the Vue router in your system +vue add router ``` ## Run diff --git a/ShoppingCart/Frondend/ecommerce-ui/README.md b/ShoppingCart/Frondend/ecommerce-ui/README.md index 6fda7194a..e0ec2287c 100644 --- a/ShoppingCart/Frondend/ecommerce-ui/README.md +++ b/ShoppingCart/Frondend/ecommerce-ui/README.md @@ -22,3 +22,50 @@ npm run lint ### Customize configuration See [Configuration Reference](https://cli.vuejs.org/config/). + + +### Vue intro + +#### Code structure + +```javascript + + + + + +``` + +The template part contains the HTML of the component. + +The script tag contains the code defining the custom behavior of the component. + +The style tag houses the CSS of the component. + +src/components and src/views contain all our components. + +#### Folder Structure + +Let’s go through the folder structure of our newly created Vue project + +*public *— contains the main HTML file of our project + +*src/assets *— stores the media files like images, logos, etc. + +*src/components *— stores all the reusable components of our project. These components are not unique to some specific route. + +Apart from this, we have some important files too + +*App.vue *— it is the root component of our project + +main.js **— it is the starting point of our project. Here we import our root component **App.vue, our router file index.js and createApp method. After this, we mount our root component to the DOM using the following statement: + +new Vue({ +render: h => h(App), +}).$mount('#app') + diff --git a/ShoppingCart/Frondend/ecommerce-ui/package-lock.json b/ShoppingCart/Frondend/ecommerce-ui/package-lock.json index 8b1d917f2..409ee640d 100644 --- a/ShoppingCart/Frondend/ecommerce-ui/package-lock.json +++ b/ShoppingCart/Frondend/ecommerce-ui/package-lock.json @@ -9,13 +9,15 @@ "version": "0.1.0", "dependencies": { "core-js": "^3.8.3", - "vue": "^2.6.14" + "vue": "^2.6.14", + "vue-router": "^3.5.1" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", @@ -10921,6 +10923,11 @@ "node": ">=8" } }, + "node_modules/vue-router": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", + "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" + }, "node_modules/vue-style-loader": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", @@ -19656,6 +19663,11 @@ } } }, + "vue-router": { + "version": "3.6.5", + "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.6.5.tgz", + "integrity": "sha512-VYXZQLtjuvKxxcshuRAwjHnciqZVoXAjTjcqBTz4rKc8qih9g9pI3hbDjmqXaHdgL3v8pV6P8Z335XvHzESxLQ==" + }, "vue-style-loader": { "version": "4.1.3", "resolved": "https://registry.npmjs.org/vue-style-loader/-/vue-style-loader-4.1.3.tgz", diff --git a/ShoppingCart/Frondend/ecommerce-ui/package.json b/ShoppingCart/Frondend/ecommerce-ui/package.json index 5e63688ef..df4d7138a 100644 --- a/ShoppingCart/Frondend/ecommerce-ui/package.json +++ b/ShoppingCart/Frondend/ecommerce-ui/package.json @@ -9,13 +9,15 @@ }, "dependencies": { "core-js": "^3.8.3", - "vue": "^2.6.14" + "vue": "^2.6.14", + "vue-router": "^3.5.1" }, "devDependencies": { "@babel/core": "^7.12.16", "@babel/eslint-parser": "^7.12.16", "@vue/cli-plugin-babel": "~5.0.0", "@vue/cli-plugin-eslint": "~5.0.0", + "@vue/cli-plugin-router": "~5.0.0", "@vue/cli-service": "~5.0.0", "eslint": "^7.32.0", "eslint-plugin-vue": "^8.0.3", diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/App.vue b/ShoppingCart/Frondend/ecommerce-ui/src/App.vue index 55df31532..240acf47a 100644 --- a/ShoppingCart/Frondend/ecommerce-ui/src/App.vue +++ b/ShoppingCart/Frondend/ecommerce-ui/src/App.vue @@ -1,21 +1,13 @@ - - diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/main.js b/ShoppingCart/Frondend/ecommerce-ui/src/main.js index 63eb05f71..b20498fa4 100644 --- a/ShoppingCart/Frondend/ecommerce-ui/src/main.js +++ b/ShoppingCart/Frondend/ecommerce-ui/src/main.js @@ -1,8 +1,12 @@ import Vue from 'vue' import App from './App.vue' +import router from './router' + +/** APP ENTRY POINT */ Vue.config.productionTip = false new Vue({ - render: h => h(App), + router, + render: h => h(App) }).$mount('#app') diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js new file mode 100644 index 000000000..a395a1f86 --- /dev/null +++ b/ShoppingCart/Frondend/ecommerce-ui/src/router/index.js @@ -0,0 +1,29 @@ +import Vue from 'vue' +import VueRouter from 'vue-router' +import HomeView from '../views/HomeView.vue' + +Vue.use(VueRouter) + +const routes = [ + { + path: '/', + name: 'home', + component: HomeView + }, + { + 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/AboutView.vue') + } +] + +const router = new VueRouter({ + mode: 'history', + base: process.env.BASE_URL, + routes +}) + +export default router diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/AboutView.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/AboutView.vue new file mode 100644 index 000000000..3fa28070d --- /dev/null +++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/AboutView.vue @@ -0,0 +1,5 @@ + diff --git a/ShoppingCart/Frondend/ecommerce-ui/src/views/HomeView.vue b/ShoppingCart/Frondend/ecommerce-ui/src/views/HomeView.vue new file mode 100644 index 000000000..e8d96d7a7 --- /dev/null +++ b/ShoppingCart/Frondend/ecommerce-ui/src/views/HomeView.vue @@ -0,0 +1,18 @@ + + +