电商商城定制开发vue 3 项目实战一（绘制登录界面）

目录

一、概述

电商商城定制开发本文记录了项目实现的电商商城定制开发详细步骤以及原理，电商商城定制开发十分适合初学vue电商商城定制开发的萌新练手，电商商城定制开发也是阶段性学习的一个总结，电商商城定制开发可能会有些啰嗦，勿怪~。

先从登录界面开始，常规的登录界面不太好看，起不到复习巩固的作用，于是找到了下面这个

 源码：

下面将其拆解并封装，相当于化简为繁，将原本的html+css+js 项目转变为了vue项目，拆分成了三个组件。过程比较详细且啰嗦，选择性观看即可。

二、

1、vue create project_name

2、相关配置

3、cd project_name

4、code .         //快捷打开vscode

是JavaScript的超集，Typescript语法在执行是会先转成JavaScript，在使用时如果不习惯ts可以转 js语法  <script setup lang="js"> 。

项目结构：

 

三、需求分析

 运行源代码可以发现，页面可分为三个主要部分：

因此将这三个部分封装成组件 ，在src下新建login文件夹，用于单独存放该项目的一些文件

 进行一些初始化、将 router/index.ts 路由改写

  1. import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
  2.  
  3. const routes: Array<RouteRecordRaw> = [
  4.   { path: '/', component: () => import('@/login/login.vue') },
  5. ]
  6.  
  7. const router = createRouter({
  8.   history: createWebHashHistory(),
  9.   routes
  10. })
  11.  
  12. export default router

简单测试一下

四、构建组件

4.1、背景组件，也是该登录界面的父组件

 login/login.vue 文件代码

  1. <template>
  2.     <div class="body">
  3.         <div class="main">
  4.             adad
  5.         </div>
  6.     </div>
  7. </template>
  8.  
  9. <script setup lang="ts">
  10.  
  11. </script>
  12.  
  13. <style scoped >
  14. *, *::after, *::before {
  15.     margin: 0;
  16.     padding: 0;
  17.     box-sizing: border-box;
  18.     user-select: none;
  19.   }
  20.  
  21. .body {
  22.     width: 100%;
  23.     height: 100vh;
  24.     display: flex;
  25.     justify-content: center;
  26.     align-items: center;
  27.     font-family: "Montserrat", sans-serif;
  28.     font-size: 12px;
  29.     background-color: #ecf0f3;
  30.     color: #a0a5a8;
  31.   }
  32.   
  33. .main {
  34.     position: relative;
  35.     width: 1000px;
  36.     min-width: 1000px;
  37.     min-height: 600px;
  38.     height: 600px;
  39.     padding: 25px;
  40.     background-color: #ecf0f3;
  41.     box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9;
  42.     border-radius: 20px;
  43.     overflow: hidden;
  44.   }
  45.   @media (max-width: 1200px) {
  46.     .main {
  47.       transform: scale(0.7);
  48.     }
  49.   }
  50.   @media (max-width: 1000px) {
  51.     .main {
  52.       transform: scale(0.6);
  53.     }
  54.   }
  55.   @media (max-width: 800px) {
  56.     .main {
  57.       transform: scale(0.5);
  58.     }
  59.   }
  60.   @media (max-width: 600px) {
  61.     .main {
  62.       transform: scale(0.4);
  63.     }
  64.   }
  65. </style>

零碎笔记：

1.css盒子模型

        即元素可以看成一个盒子，即拥有margin、border、padding、content四个属性

2.css的伪类和伪元素

伪类：为处于某个状态的已有元素添加对应的样式，(项目的切换按钮用到了伪类)，例如

  • 设置鼠标悬停在元素上时的样式     :hover
  • 为已访问和未访问链接设置不同的样式    :link   :visited
  • 设置元素获得焦点时的样式  :focus

        注意：如果同时作用在一个元素上，有书写顺序,比如对a标签进行操作：

a:link  ->   a:visited  ->  a:hover  -> a:active

伪元素： 由“ :: ” 表示，创建一些不在文档树中的元素，并为其添加样式

  • ::after       在每个 元素之后插入内容。
  • ::befor      在每个元素之前插入内容。

3、元素定位：遵从 “ 子绝父相 ”

4.2、switch组件

点击可实现滑动效果

分析

代码

  1. <template>
  2. <div class="switch" id="switch-cnt">
  3.         <div class="switch__circle"></div>
  4.         <div class="switch__circle switch__circle--t"></div>
  5.         <div class="switch__container" id="switch-c1">
  6.           <h2 class="switch__title title">Welcome Back !</h2>
  7.           <p class="switch__description description">To keep connected with us please login with your personal info</p>
  8.           <button class="switch__button button switch-btn" @click="change">SIGN IN</button>
  9.         </div>
  10.         <div class="switch__container is-hidden" id="switch-c2">
  11.           <h2 class="switch__title title">Hello Friend !</h2>
  12.           <p class="switch__description description">Enter your personal details and start journey with us</p>
  13.           <button class="switch__button button switch-btn" @click="change">SIGN UP</button>
  14.         </div>
  15.       </div>
  16. </template>
  17.  
  18. <script setup lang="ts">
  19.     const change = () => {
  20.         const switchC1 = document.querySelector("#switch-c1") as any;
  21.         const switchC2 = document.querySelector("#switch-c2") as any;
  22.         const switchCircle = document.querySelectorAll(".switch__circle") as any;
  23.         const switchCtn = document.querySelector("#switch-cnt") as any;  
  24.         switchCtn.classList.add("is-gx");
  25.         setTimeout(function(){
  26.             switchCtn.classList.remove("is-gx");
  27.         }, 1500)
  28.         switchCtn.classList.toggle("is-txr");
  29.         switchCircle[0].classList.toggle("is-txr");
  30.         switchCircle[1].classList.toggle("is-txr");
  31.         switchC1.classList.toggle("is-hidden");
  32.         switchC2.classList.toggle("is-hidden");
  33.     }
  34. </script>
  35.  
  36. <style scoped>
  37. @import './login.css';
  38. /* 
  39. 将源码中的css样式单独存放,在各组件中导入就可以。
  40. 后续整理代码时建议，将全局样式和局部样式分开。 
  41. */
  42. </style>

部分css样式

实现隐藏

 

隐藏元素的几种方法：opacity: 0、visibility: hidden、display: none

移动主要是靠设置 left 偏移得到的

移动过程中的动画

4.3、sign组件

两者结构部分

  1. <!-- sign_up -->
  2. <template>
  3.     <div class="container a-container" id="a-container">
  4.         <form class="form" id="a-form" method="" action="">
  5.           <h2 class="form_title title">Create Account</h2>
  6.           <div class="form__icons">
  7.              <img class="form__icon" src=" ">
  8.              <img class="form__icon" src=" ">
  9.              <img class="form__icon" src=" ">
  10.           </div>
  11.           <span class="form__span">or use email for registration</span>
  12.           <input class="form__input" type="text" placeholder="Name">
  13.           <input class="form__input" type="text" placeholder="Email">
  14.           <input class="form__input" type="password" placeholder="Password">
  15.           <button class="form__button button submit">SIGN UP</button>
  16.         </form>
  17.     </div>
  18. </template>
  19. <style scoped>
  20. @import './login.css';
  21. /* 将源码中的css样式单独存放,在各组件中导入就可以。*/
  22. </style>
  1. <!-- sign_in -->
  2. <template>
  3. <div class="container b-container" id="b-container">
  4.     <form class="form" id="b-form" method="" action="">
  5.       <h2 class="form_title title">Sign in to Website</h2>
  6.       <div class="form__icons">
  7.         <img class="form__icon" src=" ">
  8.         <img class="form__icon" src=" ">
  9.         <img class="form__icon" src=" ">
  10.       </div>
  11.       <span class="form__span">or use your email account</span>
  12.       <input class="form__input" type="text" placeholder="用户名" v-model="loginFrom.username">
  13.       <input class="form__input" type="password" placeholder="密码" v-model.lazy="loginFrom.password">
  14.       <a class="form__link">Forgot your password?</a>
  15.       <button class="form__button button submit">SIGN IN</button>
  16.     </form>
  17. </div>
  18. </template>
  19. <style scoped>
  20. @import './login.css';
  21. /* 将源码中的css样式单独存放,在各组件中导入就可以。*/
  22. </style>

像组件中如facebook的小图标，利用base64 将图片转为字符串以此来代替src的位置，可以减少http请求。 （base64推荐小图标使用，jpg转base64，体积会变大一点点。）

也可以使用矢量图

 组件的移动和switch类似，多了个 z-index 来对这两个组件进行了堆叠

 五、之间的通信

现在各组件已经构建好了，但想要让switch子组件的按钮事件，也能控制到sign_in/sign_up子组件，则需要借助 Event Bus（用其它的方式也行，比如vuex ）。  常用的父子组件通讯方式有：props,$emit ，$ref 等。

Event Bus：就是A-->B 有困难，那么就借助全局C来传数据，A-->C-->B

Vue3中需要借助 组件库来完成

1、安装：npm i mitt

2、在main中声明

  1. // main.ts
  2. import { createApp } from 'vue'
  3. import App from './App.vue'
  4. import router from './router'
  5. import mitt from 'mitt'
  6.  
  7. const app=createApp(App)
  8. app.config.globalProperties.emitter = mitt()
  9.  
  10. app.use(router)
  11. app.mount('#app')

3、新建文件、进封装

  1. // src/hooks/useEmitter.js
  2. import { getCurrentInstance } from 'vue'
  3.  
  4. export default function useEmitter() {
  5.   const internalInstance = getCurrentInstance()
  6.   const emitter = internalInstance.appContext.config.globalProperties.emitter
  7.  
  8.   return emitter
  9. }

 5.1、在switch组件中添加部分代码

  1. <script setup lang="ts">
  2.     import { ref } from 'vue'
  3.     import useEmitter from '@/hooks/useEmitter.js'
  4.  
  5.     const sidebarOpen = ref(true)
  6.     const emitter = useEmitter()
  7.  
  8.     const change = () => {
  9.         const switchC1 = document.querySelector("#switch-c1") as any;
  10.         const switchC2 = document.querySelector("#switch-c2") as any;
  11.         const switchCircle = document.querySelectorAll(".switch__circle") as any;
  12.         const switchCtn = document.querySelector("#switch-cnt") as any;
  13.         switchCtn.classList.add("is-gx");
  14.         setTimeout(function(){
  15.             switchCtn.classList.remove("is-gx");
  16.         }, 1500)
  17.         switchCtn.classList.toggle("is-txr");
  18.         switchCircle[0].classList.toggle("is-txr");
  19.         switchCircle[1].classList.toggle("is-txr");
  20.         switchC1.classList.toggle("is-hidden");
  21.         switchC2.classList.toggle("is-hidden");
  22.  
  23.         sidebarOpen.value = !sidebarOpen.value
  24.         emitter.emit('change', sidebarOpen.value)
  25.     }
  26. </script>

vscode中可能会有错误提示，用的语法是ts的，导入自定义js时会检查其类型。

取消检查==>

修改tsconfig.json中的compilerOptions，将"allowJs"设为true，没有则自行添加

 5.2、sign_in/sign_up内添加：

  1. <script setup lang="ts">
  2.  import { ref, onMounted } from 'vue'
  3.   import useEmitter from '@/hooks/useEmitter.js'
  4.  
  5.   // const isOpen  = ref(true)
  6.   const emitter = useEmitter()
  7.   onMounted(() => {
  8.     emitter.on('change', (isOpen : boolean) => {
  9.       watch: {
  10.         isOpen:{
  11.           let aContainer = document.querySelector("#a-container") as any;
  12.           aContainer.classList.toggle("is-txl");
  13.         
  14.         //b中样式
  15.         // let bContainer = document.querySelector("#b-container") as any;
  16.         // bContainer.classList.toggle("is-txl");
  17.         // bContainer.classList.toggle("is-z200");
  18.         }
  19.       }
  20.     })
  21.   })
  22.  
  23. </script>

到这边样式部分基本完毕了，存在什么问题、遗漏，请多多交流，帮帮本萌新，之后会对登录、注册的功能进行实现。

网站建设定制开发 软件系统开发定制 定制软件开发 软件开发定制 定制app开发 app开发定制 app开发定制公司 电商商城定制开发 定制小程序开发 定制开发小程序 客户管理系统开发定制 定制网站 定制开发 crm开发定制 开发公司 小程序开发定制 定制软件 收款定制开发 企业网站定制开发 定制化开发 android系统定制开发 定制小程序开发费用 定制设计 专注app软件定制开发 软件开发定制定制 知名网站建设定制 软件定制开发供应商 应用系统定制开发 软件系统定制开发 企业管理系统定制开发 系统定制开发