• JD-H5开发

    目录

    写配置

    写界面

    写配置

    创建vue项目

    npm init vite@latest beimao-h5 -- --template vue-ts

     我们使用的是-h5

    npm i @nutui/nutui

    在src里面的main文件中

    import { createApp } from 'vue'

    import './style.css'

    import App from './App.vue'

    // 注意：这种方式将会导入所有组件

    import NutUI from "@nutui/nutui";

    // 采用按需加载时  此全局css样式，需要删除

    import "@nutui/nutui/dist/style.css";

    createApp(App).use(NutUI).mount("#app");

    插件在package.json

    1. {
    2.   "name": "beimao-h5",
    3.   "private": true,
    4.   "version": "0.0.0",
    5.   "type": "module",
    6.   "scripts": {
    7.     "dev": "vite",
    8.     "build": "vue-tsc --noEmit && vite build",
    9.     "preview": "vite preview"
    10.   },
    11.   "dependencies": {
    12.     "@nutui/nutui": "^3.1.22",
    13.     "axios": "^0.27.2",
    14.     "dayjs": "^1.11.3",
    15.     "path": "^0.12.7",
    16.     "pinia": "^2.0.14",
    17.     "pinia-plugin-persist": "^1.0.0",
    18.     "ts-md5": "^1.2.11",
    19.     "vue": "^3.2.37",
    20.     "vue-router": "^4.0.16"
    21.   },
    22.   "devDependencies": {
    23.     "@vitejs/plugin-vue": "^3.0.0",
    24.     "typescript": "^4.6.4",
    25.     "vite": "^3.0.0",
    26.     "vue-tsc": "^0.38.4"
    27.   }
    28. }

     加入后进行安装

     npm install

    在src的main.ts里面进行加入东西

    1.  
    2. import { createApp } from 'vue'
    3.  
    4. import App from './App.vue'
    5. //导入我们的路由文件
    6. import Router from  './router/index'
    7. //导入store
    8. import store from './store/index'
    9. // 注意：这种方式将会导入所有组件
    10. import NutUI from "@nutui/nutui";
    11. // 采用按需加载时  此全局css样式，需要删除
    12. import "@nutui/nutui/dist/style.css";
    13. const app = createApp(App)
    14. //使用京东 NutUI
    15. .use(NutUI)
    16. //实用路由
    17. app.use(Router)
    18. //使用store
    19. app.use(store);
    20. app.mount('#app')

    根据里面的内容，加入相应的文件夹以及ts文件

    加入router文件夹，在里面创建index.ts文件，这里面是路由

    1. import { createRouter, createWebHashHistory } from "vue-router";
    2.  
    3. const routes = [
    4.     {
    5.         path: '/',
    6.         name: "home",
    7.         component: () => import("@/views/Index.vue"),
    8.        
    9.     },
    10.     {
    11.         path: '/category',
    12.         name: "category",
    13.         component: () => import("@/views/Category.vue"),
    14.        
    15.     },
    16. ]
    17.  
    18. const router = createRouter({
    19.     history: createWebHashHistory('/'),
    20.     routes
    21. })
    22.  
    23. export default router

     建立store文件夹，在里面创建index.ts文件以及appStore.ts文件

    index.ts文件

    1. import { createPinia } from 'pinia'
    2. import piniaPluginPersist from 'pinia-plugin-persist'
    3.  
    4. const store = createPinia()
    5. store.use(piniaPluginPersist)
    6.  
    7. export default store

    appStore.ts文件

    1. import { defineStore } from 'pinia'
    2.  
    3. const appStore = defineStore({
    4.   id: 'app',
    5.   state: () => {
    6.     return {
    7.       user: { id: 0, userId: "" },
    8.       token: "",
    9.     }
    10.   },
    11.   getters: {
    12.  
    13.   },
    14.   actions: {
    15.  
    16.   },
    17.   // 开启数据缓存
    18.   persist: {
    19.     enabled: true,
    20.     strategies: [
    21.       {
    22.         key: 'com.beiyou.h5',
    23.         storage: localStorage,
    24.       }
    25.     ]
    26.   }
    27. })
    28.  
    29. export default appStore;

    建立views文件夹，里面建立Index.vue

    Index.vue

    1. <template>
    2.   <div>你好苍老师div>
    3. template>

    在在外层的vite.config.ts文件中进行配置文件

    1. import { defineConfig } from 'vite'
    2. import vue from '@vitejs/plugin-vue'
    3. import path from "path";
    4. // https://vitejs.dev/config/
    5. export default defineConfig({
    6.   plugins: [vue()],
    7.   server: {
    8.  
    9.     port: 4000, // 你需要定义的端口号
    10.  
    11.     proxy: {
    12.       "/api": {
    13.         target: "http://localhost:8080/",
    14.         changeOrigin: true,
    15.       },
    16.  
    17.     },
    18.   },
    19.   resolve: {
    20.     // 配置路径别名
    21.     alias: {
    22.       '@': path.resolve(__dirname, './src'),
    23.     }
    24.   },
    25. })

    当path爆红的时候，安装path

            npm install path

    删除components里面的文件

    在src文件夹下面的App文件里面修改内容

    1. <template>
    2.   <div>
    3.     home
    4.   div>
    5. template>
    6. <script setup lang="ts">
    7.  
    8. script>

    建立http文件夹管理页面拦截

            建立index.ts

    1. import axios, {
    2.     AxiosRequestConfig,
    3.     AxiosRequestHeaders,
    4.     AxiosResponse,
    5.   } from "axios";
    6.  
    7.   import { storeToRefs } from "pinia";
    8.   import appStore from "@/store/appStore";
    9.   let { token } = storeToRefs(appStore());
    10.   
    11.   const state = {
    12.     ok: 0,//请求成功状态码
    13.     401: "ERR_BAD_REQUEST"
    14.   };
    15.   
    16.   //返回数据规则
    17.   interface IResponseData {
    18.     status: number;
    19.     message?: string;
    20.     data: T;
    21.     code: string;
    22.   }
    23.   
    24.   //请求默认配置规则
    25.   type TOption = {
    26.     baseURL: string;
    27.     timeout: number;
    28.   };
    29.   
    30.   //默认配置
    31.   const config = {
    32.     baseURL: "",
    33.     timeout: 30 * 1000,
    34.     withCredentials: true,
    35.   };
    36.   
    37.   
    38.   let loading: any = null;
    39.   
    40.   class Http {
    41.     service: any;
    42.     constructor(config: TOption) {
    43.       //实例化请求配置
    44.       this.service = axios.create(config);
    45.   
    46.       //请求拦截
    47.       this.service.interceptors.request.use(
    48.         (config: AxiosRequestConfig) => {
    49.          // loading = ElLoading.service({ fullscreen: true, text: '加载中...' });
    50.    
    51.           if (token.value) {
    52.             (config.headers as AxiosRequestHeaders).Authorization = token.value;
    53.           }
    54.           return config;
    55.         },
    56.         (error: any) => {
    57.           loading.close();
    58.           return Promise.reject(error);
    59.         }
    60.       );
    61.   
    62.       //响应拦截
    63.       this.service.interceptors.response.use(
    64.         (response: AxiosResponse) => {
    65.          // loading.close();
    66.   
    67.      
    68.           const data = response.data;
    69.   
    70.           const { code } = data;
    71.   
    72.           if (code == undefined) {
    73.             //如果没有返回状态码，直接返回数据，针对于返回数据为blob类型    
    74.             return response;
    75.           } else if (code !== 0) {
    76.             //ElMessage.error(data.message);
    77.             return Promise.reject(data);
    78.           }
    79.           // code == 0 的时候，提取我们只关注的Api数据data
    80.           // console.log(response);
    81.           return response.data.data;
    82.         },
    83.         (error: any) => {
    84.           loading.close();
    85.           if (error.code === state[401]) {
    86.            // ElMessage.error("请求失败:" + error.message);
    87.             setTimeout(() => {
    88.               localStorage.removeItem('com.beiyou.h5')
    89.               window.location.href = '/#/login'
    90.             }, 1000);
    91.           }
    92.           return Promise.reject(error);
    93.         }
    94.       );
    95.     }
    96.   
    97.     get(url: string, params?: object, data = {}): Promise> {
    98.       return this.service.get(url, { params, ...data });
    99.     }
    100.   
    101.     post(url: string, params?: object, data = {}): Promise> {
    102.       return this.service.post(url, params, data);
    103.     }
    104.   
    105.     put(url: string, params?: object, data = {}): Promise> {
    106.       return this.service.put(url, params, data);
    107.     }
    108.   
    109.     delete(
    110.       url: string,
    111.       params?: object,
    112.       data = {}
    113.     ): Promise> {
    114.       return this.service.delete(url, { params, ...data });
    115.     }
    116.   }
    117.   
    118.   export default new Http(config);

     

    有些配置爆红在tsconfig.json里面加入

      "baseUrl": ".",

        "paths": {

          "@/*": [

            "src/*"

          ]

        }

    加入后的整体样子 

    1. {
    2.   "compilerOptions": {
    3.     "target": "ESNext",
    4.     "useDefineForClassFields": true,
    5.     "module": "ESNext",
    6.     "moduleResolution": "Node",
    7.     "strict": true,
    8.     "jsx": "preserve",
    9.     "sourceMap": true,
    10.     "resolveJsonModule": true,
    11.     "isolatedModules": true,
    12.     "esModuleInterop": true,
    13.     "lib": [
    14.       "ESNext",
    15.       "DOM"
    16.     ],
    17.     "skipLibCheck": true,
    18.     "baseUrl": ".",
    19.     "paths": {
    20.       "@/*": [
    21.         "src/*"
    22.       ]
    23.     }
    24.   },
    25.   "include": [
    26.     "src/**/*.ts",
    27.     "src/**/*.d.ts",
    28.     "src/**/*.tsx",
    29.     "src/**/*.vue"
    30.   ],
    31.   "references": [
    32.     {
    33.       "path": "./tsconfig.node.json"
    34.     }
    35.   ]
    36. }

     上面就是配置好的全部文件以及文件里面的构成 

     这里为止我们该有的配置已经配置完毕，接下来就是写界面

    写界面

    在src的App.vue里面写入

    1. <template>
    2.  
    3.  <router-view>router-view>
    4.   <nut-tabbar @tab-switch="tabSwitch" :bottom="true">
    5.     <nut-tabbar-item tab-title="首页" icon="home">nut-tabbar-item>
    6.     <nut-tabbar-item tab-title="分类" icon="category">nut-tabbar-item>
    7.     <nut-tabbar-item tab-title="发现" icon="find">nut-tabbar-item>
    8.     <nut-tabbar-item tab-title="购物车" icon="cart">nut-tabbar-item>
    9.     <nut-tabbar-item tab-title="我的" icon="my">nut-tabbar-item>
    10.   nut-tabbar>
    11. template>
    12.  
    13. <script setup lang="ts">
    14. import { useRoute, useRouter } from "vue-router";
    15. const route = useRoute();
    16. const router = useRouter();
    17. const tabSwitch = (item: any, index: any) => {
    18.   console.log(item, index);
    19.   if (index === 1) {
    20.     router.push({ name: "category" });
    21.   }
    22.    if (index === 0) {
    23.     router.push({ name: "home" });
    24.   }
    25. };
    26. script>

     

    解析：

             ：支持页面跳转

            :bottom="true"：让下面的首页等在底部

    这里就要在路由里面加入一个分支，是category的路由分支

    1.    {
    2.         path: '/category',
    3.         name: "category",
    4.         component: () => import("@/views/Category.vue"),
    5.        
    6.     },

     在views里面创建Category.vue文件写入

    <template>这是分类页template>

    开始正式写vue

            在主页面加入一个滚动的公告栏 

     "华为畅享9新品即将上市" :scrollable="true" :background="`rgba(251, 248, 220, 1)`" :color="`#D9500B`">

            在公告栏下面加入一个轮播图

    1.  <nut-swiper :init-page="page" :pagination-visible="true" pagination-color="#426543" auto-play="3000">
    2.      <nut-swiper-item v-for="item in list" :key="item">
    3.         <img :src="item" alt="" />
    4.       nut-swiper-item>
    5.   nut-swiper>

    轮播图的script

    1.  import { reactive, toRefs, onMounted } from 'vue';
    2.   export default {
    3.     setup() {
    4.       const state = reactive({
    5.         page: 2,
    6.         list: [
    7.           'https://storage.360buyimg.com/jdc-article/NutUItaro34.jpg',
    8.           'https://storage.360buyimg.com/jdc-article/NutUItaro2.jpg',
    9.           'https://storage.360buyimg.com/jdc-article/welcomenutui.jpg',
    10.           'https://storage.360buyimg.com/jdc-article/fristfabu.jpg'
    11.         ]
    12.       });
    13.       onMounted(() => {
    14.         setTimeout(() => {
    15.           state.list.splice(1, 1);
    16.         }, 3000);
    17.       });
    18.       return { ...toRefs(state) };
    19.     }
    20.   };

    轮播图的样式

    1. <style lang="scss" scoped>
    2.   .nut-swiper-item {
    3.     line-height: 150px;
    4.     img {
    5.       width: 100%;
    6.       height: 100%;
    7.     }
    8.   }
    9. style>

  • 相关阅读:
    2022年09月 Python（一级）真题解析#中国电子学会#全国青少年软件编程等级考试
    敏捷BI到底与传统BI有何不同？
    Qt扩展-KDDockWidgets 的使用
    软件确认测试有什么作用?确认测试报告的价格是多少?
    GBase XDM API 错误处理调用（上）
    申请阿里云免费证书
    HQS.Part2-C语言基础
    spark性能调优 | 默认并行度
    16 C++设计模式之职责链（Chain of Responsibility）模式
    常用函数(睡眠函数、函数耗时)
  • 原文地址：https://blog.csdn.net/qq_59102081/article/details/125904437