Vue3项目实战-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue3项目实战。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

一、项目准备

二、基础语法应用

2.1、mixin应用

2.2、网络请求

2.3、显示与隐藏

2.4、编程式路由跳转

2.5、下载资料

2.6、调用方法

2.7、监听路由变化

2.8、pinia应用

(1)存储token(user.js)

(2)全选全不选案例(car.js)

一、项目准备

下载：

cnpm i unplugin-auto-import -D //setup 语法糖插件

npm i -D @types/node //解决vite不能@问题

npm install element-plus --save //组件库

npm install -D unplugin-vue-components //按需引入组件库

npm install less
npm install less-loader
npm install @originjs/vite-plugin-global-style

在vite.config.js中

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import globalStyle from '@originjs/vite-plugin-global-style'
// cnpm i unplugin-auto-import -D setup 语法糖插件
import AutoImport from 'unplugin-auto-import/vite'
import path from 'path'
export default defineConfig({
  plugins: [vue(),
  AutoImport({
    imports: ['vue', 'vue-router']
  }),
  globalStyle({
    sourcePath:'./src/assets/css',
    lessEnabled:true
  }),
],
  resolve: {
    // 配置路径别名(解决vite不能@问题)  npm i -D @types/node
    alias: {
      "@": path.join(__dirname, 'src'),
      "#": path.join(__dirname, 'types')
    }
  }
})

组件库地址：设计 | Element Plus

二、基础语法应用

2.1、mixin应用

在v-for循环的时候，后端返回的状态是数字，而前端需要将它回显成对应的汉字，可以使用mixin将这快封装起来。

import courseType from "../../mixins/courseType.js";
let { courseTypeFn } = courseType();

mixin文件夹下的js代码：

export default function () {
    let courseTypeFn = (type) => {
        let val = ''
        switch (type) {
            case 1:
                val = '初级';
                break;
            case 2:
                val = '中级';
                break;
            case 3:
                val = '高级';
                break;
            default:
                val = ''
        }
        return val;
    }
    return { courseTypeFn, }
}

视图应用：{{ courseTypeFn(item.courseLevel) }}

methods里面也可以判断状态：

Vue3项目实战,vue.js,前端,javascript

2.2、网络请求

拿到请求后，先定义数据类型，在onBeforeMount生命周期里面去获取数据。

// api
import {
  getSliders,
  getFirstCategorys,
} from "@/api/api.js";
import { onBeforeMount } from "vue";
// 轮播图数据
let sliderList = ref([]);
// 一级分类数据
let firstList = ref([]);
// 生命周期
onBeforeMount(() => {
  getSliders().then((res) => {
    sliderList.value = res.data.list;
  });
  getFirstCategorys().then((res) => {
    firstList.value = res.data.list;
  });
});

2.3、显示与隐藏

<div class="active-r" v-if="isShow"></div>
// 定义数据
let isShow = ref(false);
// 事件
const mouseHover = () => {
  isShow.value = true;
  );
};

2.4、编程式路由跳转

import { useRouter } from "vue-router";
const router = useRouter();
//方法里跳转指定页面
const GoJump = (id) => {
  router.push({
    path: "/about/details",
    query: { id },
  });
};

接收参数

import { useRoute } from "vue-router";
let route = useRoute();
courseId: route.query.id,

2.5、下载资料

获取后端返回的文件流，自己组装出一个文件全称，在页面创建a标签，实现下载功能。

const download = (item) => {
  downloadAttachment({
    courseId: item.courseId,
    attachmentId: item.id,
  }).then((res) => {
    //后端返回的是文件流
    const blob = new Blob([res]);
    let fileName = item.attachmentName;
    let fileUrl = item.attachmentUrl;
    const extName = fileUrl.substring(fileUrl.lastIndexOf(".")); //.gif
    fileName = fileName + extName; //kkkk.gif
    // 前端创建a标签进行新窗口的打开
    const link = document.createElement("a");
    link.download = fileName;
    link.target = "_black";
    link.style.display = "none";
    link.href = URL.createObjectURL(blob);
    document.body.appendChild(link);
    link.click();
    URL.revokeObjectURL(link.href);
    document.body.removeChild(link);
  });
};

或者可以直接 window.open(info.url);

2.6、调用方法

const pageSize = ref(8);
const getlist = () => {
  mostNew({
    pageNum: pageNum.value,
    pageSize: pageSize.value,
  }).then((res) => {
    newList.value = res.data.pageInfo.list;
    total.value = res.data.pageInfo.total;
  });
};
const handleSizeChange = (val) => {
  pageSize.value = val;
  getlist();
};

2.7、监听路由变化

// 头部监听路由变化
watch(
  () => router.currentRoute.value.name,
  (toPath) => {
    if (toPath == "Home") {
      currentId.value = 1;
    } else if (toPath == "About") {
      currentId.value = 2;
    } else if (toPath == "Shop") {
      currentId.value = 3;
    }
  },
  { immediate: true }
);

2.8、pinia应用

下载持久化存储插件:cnpm i pinia-plugin-persist

文件夹的index.js

import {createPinia} from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store=createPinia()
store.use(piniaPluginPersist)
export default store

(1)存储token(user.js)

import { defineStore } from 'pinia'
export const useUserStore = defineStore({
    id: 'user',
    state: () => {
        return {
            token: ''
        }
    },
    actions: {
        setToken(token) {
            this.token = token
        }
    },
    // 开启数据缓存
    persist: {
        enabled: true,
        strategies: [{
            key: 'xiao_user',
            storage: localStorage
        }]
    }
})

页面使用：

// pinia
import { useUserStore } from "../stores/user.js";
const userStore = useUserStore();
 userStore.setToken(res.data.accessToken);

(2)全选全不选案例(car.js)

解构

import { defineStore } from 'pinia'
export const useCartStore = defineStore({
    id: 'cart',
    state: () => {
        return {
            cartList: [],//购物车数量
            select: [],//选中的商品id
        }
    },
    getters: {
        isChecked() {
            return this.select.length == this.cartList.length
        }
    },
    actions: {
        addCart(list) {
            list.forEach(v => {
                v['check'] = true
                this.select.push(v.id)
            })
            this.cartList = list
        },
        // 全选
        all() {
            this.select = this.cartList.map(v => {
                v['check'] = true
                return v.id
            })
        },
        // 全不选
        unAll() {
            this.cartList.forEach(v => {
                v['check'] = false
            })
            this.select = []
        },
        //单个选
        itemChecked(index) {
            let id = this.cartList[index].id;
            let idx = this.select.indexOf(id);//检查它里面有没有
            if (idx > -1) {
                this.cartList[index].check = false;
                this.select.splice(idx, 1);//有
            } else {
                this.cartList[index].check = true;
                this.select.push(id);//没有
            }
        }
    },
})

页面使用：文章来源地址https://www.toymoban.com/news/detail-671197.html

import { storeToRefs } from "pinia";
import { useCartStore } from "../stores/car.js";
let cartStore = useCartStore();
let { cartList, isChecked } = storeToRefs(cartStore);
onBeforeMount(() => {
  getShopCarList().then((res) => {
  firstList.value = res.data.list;
  });
  cartStore.addCart(firstList.value);
  console.log(cartStore.cartList);
});
const checkAll = () => {
  if (isChecked.value) {
    cartStore.unAll(); // 不选
  } else {
    cartStore.all(); // 全选
  }
};

到了这里，关于Vue3项目实战的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！