文创商城项目实战

vue create mall

    npm i  axios vue-axios vue-router@3.x  element-ui

import App from './App.vue'import axios from "axios"import VueAxios from 'vue-axios'import VueRouter from 'vue-router'import ElementUI from 'element-ui'import 'element-ui/lib/theme-chalk/index.css';import Login from './components/Login.vue';import Home from './components/Home.vue';import Cultural from "./components/CulturalFolder/Cultural.vue";import Clothe from "./components/ClotheFolder/Clothe.vue";import Fresh from "./components/FreshFolder/Fresh.vue";import Book from "./components/BookFolder/Book.vue";import Cart from "./components/ShoppingCart/Cart.vue"import ProdectDetail from './components/CulturalFolder/ProdectDetail'
Vue.config.productionTip = false
Vue.use(VueAxios, axios)Vue.use(VueRouter)Vue.use(ElementUI)

module.exports = defineConfig({  transpileDependencies: true,  lintOnSave: false,  devServer: {    proxy: {      '/v1': {        target: 'http://140.246.26.182:7070'      }    }  }})

/* 配置路由表 */const routes = [  {    path: '/login',    name: 'login',    component: Login,  },  {    path: '/',    name: 'home',    component: Home,    children: [      {        path: '/cultural',        name: 'cultural',        component: Cultural      },      {        path: '/clothe',        name: 'clothe',        component: Clothe      },      {        path: '/fresh',        name: 'fresh',        component: Fresh      },      {        path: '/book',        name: 'book',        component: Book      },      {        path: '/cart',        name: 'cart',        component: Cart      },      {        path: 'detail/:id',      //商品详情页路由,id表示一个变量（任取）        component: ProdectDetail,        props: true      //把path上的变量作为参数传递到ProductDetail组件中      }    ]  }]

<template>  <div class="page-login">    <el-row type="flex" justify="center">      <el-col style="width: 250px">        <el-row type="flex" align="middle" class="row">          <label class="label">用户</label>          <el-input v-model="name" style="width: 200px"></el-input>        </el-row>        <el-row type="flex" align="middle" class="row">          <label class="label">密码</label>          <el-input v-model="password" type="password" style="width: 200px"></el-input>        </el-row>        <el-row type="flex" align="middle" class="row">          <el-button type="primary" @click="handleClick" style="width: 250px">登录</el-button>        </el-row>      </el-col>    </el-row>  </div></template>
<style>.page-login {  padding-top: 200px;}.row {  width: 250px;  margin-bottom: 20px;}.label {  width: 50px;  text-align: left;}</style>

 data() {    return {      name: "",      password: ""    };  },  methods: {    handleClick() {      this.axios        .post("/v1/login", {          name: this.name,          password: this.password        })        .then(res => {          if (res.data.code === 1) {            this.$router.push({ path: "/cultural" });          } else {            alert(res.data.msg);          }        });    }  }};