devbox
小舞很执着
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

使用vue3 + TS + Pinia + Vant4 + vite搭建商城H5项目框架_vue h5框架

作者：小舞很执着 | 2024-07-30 22:53:47

赞

踩

vue h5框架

本文主要将如何利用搭建一个初始化的商城H5项目框架。初始化阶段使用的技术栈有：vue3.2、vue-router、 TS 、 Pinia 、 Vant4、Less、vite

1. 环境检测：

                        node -v 检测是否有安装node.js，未安装请先去官网安装node.js

2. 创建初始化项目： 

        终端输入: npm init vite

        自定义项目名称project name：demodemo

        依次选择Vue + TypeScript创建项目

       启动项目：   cd demodemo

                                npm install

                                npm run dev

3. 初始化项目文件

删除style.css文件，清空assets文件和components文件

新增request文件(配置网络请求和集中存储请求API)，文件下新建index.ts和api.ts两个空文件 

新增store文件(数据共享仓库)，文件下新建index.ts和order.ts和address.ts三个空文件 

新增views文件(集中存放各页面)，文件下新建Home.vue和Login.vue和404.vue等空文件 

新增types文件(声明TS类型)，文件下新建api.d.ts一个空文件

 处理App.vue文件

  1. //App.vue
  2.  
  3. <script setup lang="ts">
  4.  
  5. </script>
  6.  
  7. <template>
  8.   //路由占位符
  9.   <router-view />
  10. </template>
  11.  
  12. <style scoped lang="less">
  13.  
  14. </style>

 处理main.ts文件

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3.  
  4. const app = createApp(App)
  5.  
  6. app.mount('#app')

4. 样式初始化，引入vant组件库，浏览器适配

1）样式初始化

        npm i reset-css

  1. //在main.ts中引入
  2.  
  3. import "reset-css"       //样式初始化

2）引入vant组件库

        npm i vant

  1. //在main.ts中引入vant
  2. import vant from "vant"
  3. import "../node_modules/vant/lib/index.css"

3）浏览器适配

        npm i postcss-px-to-viewport --save -dev

新建文件postcss.config.cjs，配置设计稿的视口宽度：viewportWidth: 375，其余可选配置

  1. //postcss.config.cjs文件
  2. module.exports = {
  3.     plugins: {
  4.       'postcss-px-to-viewport': {
  5.         viewportWidth: 375, // 设计稿的视口宽度
  6.         unitPrecision: 5, // 单位转换后保留的精度
  7.         propList: ["*"], // 能转化为vw的属性列表
  8.         viewportUnit: "vw", // 希望使用的视口单位
  9.         fontViewportUnit: "vw", // 字体使用的视口单位
  10.         selectorBlackList: [], // 需要忽略的CSS选择器，不会转为视口单位，使用原有的px等单位。
  11.         minPixelValue: 1, // 设置最小的转换数值，如果为1的话，只有大于1的值会被转换
  12.         mediaQuery: false, // 媒体查询里的单位是否需要转换单位
  13.         replace: true, //  是否直接更换属性值，而不添加备用属性
  14.         exclude: undefined, // 忽略某些文件夹下的文件或特定文件，例如 'node_modules' 下的文件
  15.         include: undefined, // 如果设置了include，那将只有匹配到的文件才会被转换
  16.         landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
  17.         landscapeUnit: "vw", // 横屏时使用的单位
  18.         landscapeWidth: 568, // 横屏时使用的视口宽度
  19.       },
  20.     },
  21.   };

5. 自动导入常用的使用的第三方库的 API

npm i -D unplugin-auto-import

  1. //在vite.config.ts中配置
  2. import AutoImport from "unplugin-auto-import/vite"
  3.  
  4. export default defineConfig({
  5.   plugins: [
  6.     vue(),
  7.     AutoImport({
  8.       imports: [ 'vue', 'vue-router'] //自动导入相关函数
  9.     })
  10.   ],
  11. })

6. 配置网络请求，全局配置请求的参数和返回值TS类型

        npm i axios

  1. //在request文件下的index.ts配置
  2.  
  3. import axios from "axios"
  4.  
  5. const instance = axios.create({
  6.     baseURL: "https://XXXXXX.com",
  7.     timeout: 20000
  8. })
  9.  
  10. //请求拦截器
  11. instance.interceptors.request.use(
  12.     config => {
  13.         if(localStorage.getItem('token')){
  14.             config.headers.Authorization = localStorage.getItem('token')
  15.         }
  16.         return config
  17.     },
  18.     err => {
  19.         return Promise.reject(err)
  20.     }
  21. )
  22.  
  23. // 响应拦截器
  24. instance.interceptors.response.use(
  25.     res => {
  26.         return res.data
  27.     },
  28.     err => {
  29.         return Promise.reject(err)
  30.     }
  31. )
  32.  
  33. export default instance
  34.  
  1. //在request文件下的api.ts配置
  2.  
  3. import request from "./index"
  4.  
  5. export const helpCenterRes = () => request.get('/helpcenter')
  6.  
  7. export const bannerAPIRes = ( params: BannerAPIReq ):Promise<BannerAPIRes> => request.get('/banner', {params})

在types文件下api.d.ts，配置各个请求接口的参数类型和返回值类型，并在api.ts中应用

  1. interface BannerAPIReq {
  2.     title: string;
  3. }
  4.  
  5. interface BannerListType {
  6.     detail_url: string;
  7.     picture: string;
  8.     url: string;
  9. }
  10.  
  11. interface BannerAPIRes {
  12.     code: number;
  13.     message: string;
  14.     banner: BannerListType[];
  15. }
  1. //在Index.vue中使用封装的接口
  2.  
  3. <script setup lang="ts">
  4. import { ref,onMounted } from "vue"
  5. import { bannerAPIRes } from '../request/api'
  6. onMounted( () => {
  7.     getBannerRes()
  8. })
  9. interface BannerListType {
  10.     detail_url: string;
  11.     picture: string;
  12.     url: string;
  13. }
  14. const bannerList = ref<BannerListType[]>([])
  15.  
  16. const getBannerRes = async() => {
  17.     const res:any = await bannerAPIRes({
  18.         title: 'newapp'
  19.     })
  20.     console.log(res)
  21.     if(res.code == 200){
  22.         bannerList.value = res.banner
  23.     }
  24. }
  25. </script>
  26.  
  27. <template>
  28.   <van-swipe :autoplay="3000" :height="420" lazy-render>
  29.     <van-swipe-item v-for="item in bannerList">
  30.       <img style="width: 100%;height: 419.4px;" :src="item.picture" />
  31.     </van-swipe-item>
  32.   </van-swipe>
  33. </template>
  34.  
  35. <style scoped lang="less">
  36.  
  37. </style>

7.  配置路由

npm i vue-router          //下载vue-router插件第四版本

  1. //main.ts中引入和挂载路由
  2.  
  3. import router from './router'
  4.  
  5. app.use(router) 
  1. //router/index.ts
  2.  
  3. import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
  4. import Home from "../views/Home.vue"
  5. import Index from "../views/Index.vue"
  6.  
  7. const routes: Array<RouteRecordRaw> = [
  8.     {
  9.         path: '/',
  10.         component:  Home,
  11.         redirect: '/index',   //路由重定向
  12.         children: [           //路由嵌套
  13.             {
  14.                 path: 'index',
  15.                 name: 'Index',
  16.                 component: Index
  17.             },
  18.             {
  19.                 name: 'Wash',
  20.                 path: 'wash',
  21.                 component: () => import('../views/Wash.vue')
  22.             },
  23.             {
  24.                 name: 'Order',
  25.                 path: 'order',
  26.                 component: () => import('../views/Order.vue')
  27.             },
  28.             {
  29.                 name: 'My',
  30.                 path: 'my',
  31.                 component: () => import('../views/My.vue')
  32.             }
  33.         ]
  34.     },
  35.     {
  36.         name: 'Login',
  37.         path: '/login',
  38.         component: () => import('../views/Login.vue')
  39.     },
  40.     {
  41.         name: "404",
  42.         path: "/:pathMatch(.*)*",
  43.         component: () => import('../views/404.vue')
  44.     }
  45. ]
  46.  
  47. const router = createRouter({
  48.     history: createWebHistory(),
  49.     routes
  50. })
  51.  
  52. router.beforeEach( ( news,old,next ) => {
  53.     next()
  54. })
  55.  
  56. export default router

8. 配置pinia，并做持久化存储

npm i pinia

npm i pinia-plugin-persist

  1. //在store/index.ts配置pinia和共享数据持久化处理
  2.  
  3. import { createPinia } from "pinia";
  4. import piniaPluginPersist from "pinia-plugin-persist"
  5.  
  6. const store = createPinia()
  7. store.use(piniaPluginPersist)
  8.  
  9. export default store
  10.  
  1. //在mian.ts中引入并挂载pinia
  2.  
  3. import store from "../src/store/index"
  4.  
  5. app.use(store)

为了避免共享的数据混乱放在一个文件下，因此需模块化处理不同页面的共享数据

order.ts表示订单页面涉及到的共享数据及数据的处理方法

address.ts表示地址页面涉及到的共享数据及数据的处理方法

以order.ts为示例

  1. import { defineStore } from "pinia";
  2.  
  3. export const orderStore = defineStore( "order", {
  4.     //存放需要共享的数据
  5.     state: () => {
  6.         return {
  7.             orderType: "takein",
  8.             count: 1
  9.         }
  10.     },
  11.     //Store 状态的计算值
  12.     getters: {
  13.         doubleCount: (state) => state.count  * 2
  14.     },
  15.     //存放同步和异步方法
  16.     actions: {
  17.         countAdd(num: number){
  18.             this.count = this.count + num
  19.         }
  20.     },
  21.     //开启数据持久化存储
  22.     persist: {
  23.         enabled: true
  24.     }
  25. })
  1. //在页面使用store中的数据
  2. <script setup lang="ts">
  3.   import { storeToRefs } from 'pinia';
  4.   import { orderStore } from '../store/order'; //引入order模块数据
  5.   
  6.   const orderstore = orderStore()
  7.   const {count, doubleCount} = storeToRefs(orderstore) //解构成响应式数据
  8.   const addNum = (num: number) => {
  9.     orderstore.countAdd(num)  //用actions中的方法
  10.   }
  11. </script>
  12.  
  13. <template>
  14.   <div>state中的数据响应式展示： {{ count }} </div>
  15.   <div>getters中的数据响应式展示： {{ doubleCount }} </div>  
  16.   <button @click="addNum(10)">点击操作state中的数据</button>
  17. </template>
  18.  
  19. <style scoped lang="less">
  20.  
  21. </style>

 开启数据持久化存储后，刷新页面，数据不会变成原始数据

9. 设置网站logo和网站名称

在index.html文件配置网站logo和网站名称

网站logo的是.ico格式，其他格式图片需要转成.ico文件

  1. <head>
  2.     <meta charset="UTF-8" />
  3.     <link rel="icon" href="/tidylogo.ico" />    //配置logo
  4.     <title>XXXXX有限公司官方网站</title>          //配置网站名称
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6. </head>

10. 配置less

        npm i less -D

  1. <style scoped lang="less">
  2. @color: pink;   //定义一个颜色变量
  3.  
  4. //类名嵌套
  5. .title{
  6.   div{
  7.     color: @color;   //使用变量
  8.   }
  9. }
  10. </style>

11. 首页配置自定义tabbar底部栏

  1. //Home.vue中配置tabbar栏数据和跳转路由等，同时在router/index.ts中配置相应的路由
  2.  
  3. <script setup lang="ts">
  4.   import { ref,reactive,onMounted } from "vue"
  5.   onMounted( () => {
  6.     
  7.   })
  8.  
  9.   const active = ref(0)
  10.  
  11.   const tabbarList = reactive([
  12.     {
  13.       title: '首页',
  14.       path: '/index',
  15.       inactive: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/home.png',
  16.       active: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/home_active.png'
  17.     },
  18.     {
  19.       title: '洗衣',
  20.       path: '/wash',
  21.       inactive: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/wash.png',
  22.       active: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/wash_active.png'
  23.     },
  24.     {
  25.       title: '订单',
  26.       path: '/order',
  27.       inactive: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/order.png',
  28.       active: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/order_active.png'
  29.     },
  30.     {
  31.       title: '我的',
  32.       path: '/my',
  33.       inactive: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/my.png',
  34.       active: 'https://tidyimages.oss-cn-hangzhou.aliyuncs.com/newh5/my_active.png'
  35.     }
  36.   ])
  37.   const onChangeTab = (index: number | string) => {
  38.     console.log(index)
  39.   }
  40. </script>
  41.  
  42. <template>
  43.   <router-view></router-view>
  44.   <van-tabbar v-model="active" active-color="#26D7CC" route @change="onChangeTab">
  45.     <van-tabbar-item replace :to="item.path" v-for="(item,index) in tabbarList" :key="index">
  46.       <span :class="active === index ? active : ''">{{ item.title }}</span>
  47.       <template #icon="props">
  48.         <img :src="props.active ? item.active : item.inactive" />
  49.       </template>
  50.     </van-tabbar-item>
  51.   </van-tabbar>
  52. </template>
  53.  
  54. <style scoped lang="less">
  55.  
  56. </style>

效果图如下：


​​​​​​​

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/小舞很执着/article/detail/905724
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号