国产 无码 综合区,色欲AV无码国产永久播放,无码天堂亚洲国产AV,国产日韩欧美女同一区二区

Vue3項(xiàng)目實(shí)戰(zhàn)

這篇具有很好參考價(jià)值的文章主要介紹了Vue3項(xiàng)目實(shí)戰(zhàn)。希望對大家有所幫助。如果存在錯(cuò)誤或未考慮完全的地方,請大家不吝賜教,您也可以點(diǎn)擊"舉報(bào)違法"按鈕提交疑問。

目錄

一、項(xiàng)目準(zhǔn)備

二、基礎(chǔ)語法應(yīng)用

2.1、mixin應(yīng)用

2.2、網(wǎng)絡(luò)請求

2.3、顯示與隱藏

2.4、編程式路由跳轉(zhuǎn)

2.5、下載資料

2.6、調(diào)用方法

2.7、監(jiān)聽路由變化

2.8、pinia應(yīng)用

(1)存儲token(user.js)

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

一、項(xiàng)目準(zhǔn)備

下載:

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')
    }
  }
})

組件庫地址:?設(shè)計(jì) | Element Plus

二、基礎(chǔ)語法應(yīng)用

2.1、mixin應(yīng)用

在v-for循環(huán)的時(shí)候,后端返回的狀態(tài)是數(shù)字,而前端需要將它回顯成對應(yīng)的漢字,可以使用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, }
}

視圖應(yīng)用:{{ courseTypeFn(item.courseLevel) }}

methods里面也可以判斷狀態(tài):

Vue3項(xiàng)目實(shí)戰(zhàn),vue.js,前端,javascript

2.2、網(wǎng)絡(luò)請求

拿到請求后,先定義數(shù)據(jù)類型,在onBeforeMount生命周期里面去獲取數(shù)據(jù)。

// api
import {
  getSliders,
  getFirstCategorys,
} from "@/api/api.js";
import { onBeforeMount } from "vue";
// 輪播圖數(shù)據(jù)
let sliderList = ref([]);
// 一級分類數(shù)據(jù)
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>
// 定義數(shù)據(jù)
let isShow = ref(false);
// 事件
const mouseHover = () => {
  isShow.value = true;
  );
};

2.4、編程式路由跳轉(zhuǎn)

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

接收參數(shù)

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

2.5、下載資料

獲取后端返回的文件流,自己組裝出一個(gè)文件全稱,在頁面創(chuàng)建a標(biāo)簽,實(shí)現(xiàn)下載功能。

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
    // 前端創(chuàng)建a標(biāo)簽進(jìn)行新窗口的打開
    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、調(diào)用方法

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、監(jiān)聽路由變化

// 頭部監(jiān)聽路由變化
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應(yīng)用

下載持久化存儲插件: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
        }
    },
    // 開啟數(shù)據(jù)緩存
    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)

解構(gòu)

import { defineStore } from 'pinia'
export const useCartStore = defineStore({
    id: 'cart',
    state: () => {
        return {
            cartList: [],//購物車數(shù)量
            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 = []
        },
        //單個(gè)選
        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);//沒有
            }
        }
    },
})

頁面使用:文章來源地址http://www.zghlxwxcb.cn/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(); // 全選
  }
};

到了這里,關(guān)于Vue3項(xiàng)目實(shí)戰(zhàn)的文章就介紹完了。如果您還想了解更多內(nèi)容,請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!

本文來自互聯(lián)網(wǎng)用戶投稿,該文觀點(diǎn)僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務(wù),不擁有所有權(quán),不承擔(dān)相關(guān)法律責(zé)任。如若轉(zhuǎn)載,請注明出處: 如若內(nèi)容造成侵權(quán)/違法違規(guī)/事實(shí)不符,請點(diǎn)擊違法舉報(bào)進(jìn)行投訴反饋,一經(jīng)查實(shí),立即刪除!

領(lǐng)支付寶紅包贊助服務(wù)器費(fèi)用

相關(guān)文章

  • vue3 antd項(xiàng)目實(shí)戰(zhàn)——table表格的自定義篩選【純前端filters過濾、自定義篩選table表格數(shù)據(jù)】

    vue3 antd項(xiàng)目實(shí)戰(zhàn)——table表格的自定義篩選【純前端filters過濾、自定義篩選table表格數(shù)據(jù)】

    文章內(nèi)容 文章鏈接 vue3 antd table 表格的基礎(chǔ)搭建 https://blog.csdn.net/XSL_HR/article/details/128072745 ant design vue 組件庫的引入與使用 https://blog.csdn.net/XSL_HR/article/details/127396384 在 后臺管理系統(tǒng) 中,我們需要 對大量的數(shù)據(jù)進(jìn)行展示、處理和操作 ,table表格也因此無處不在。而 ant design

    2024年01月25日
    瀏覽(28)
  • 【Vue H5項(xiàng)目實(shí)戰(zhàn)】從0到1的自助點(diǎn)餐系統(tǒng)—— 搭建腳手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

    【Vue H5項(xiàng)目實(shí)戰(zhàn)】從0到1的自助點(diǎn)餐系統(tǒng)—— 搭建腳手架(Vue3.2 + Vite + TS + Vant + Pinia + Node.js)

    H5 項(xiàng)目基于 Web 技術(shù),可以在智能手機(jī)、平板電腦等移動(dòng)設(shè)備上的瀏覽器中運(yùn)行,無需下載和安裝任何應(yīng)用程序,且H5 項(xiàng)目的代碼和資源可以集中在服務(wù)器端進(jìn)行管理,只需更新服務(wù)器上的代碼,即可讓所有顧客訪問到最新的系統(tǒng)版本。 本系列將以肯德基自助點(diǎn)餐頁面為模板

    2024年02月13日
    瀏覽(133)
  • 前端技術(shù)Html,Css,JavaScript,Vue3

    1.基本標(biāo)簽 2.文本格式化 3.鏈接 4.圖片 5.無序列表 6.有序列表 7.表格 8.表單 1.選擇器 2.文本和字體 3.鏈接 4.隱藏 5.定位position 6.浮動(dòng) 7.對齊 8.圖像 1.輸出 2.函數(shù) 3.常用事件 4.DOM 5.改變Html 6.DOM 元素 (節(jié)點(diǎn)) 尾部創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn)) - appendChild() 頭部創(chuàng)建新的 HTML 元素 (節(jié)點(diǎn))

    2024年02月13日
    瀏覽(53)
  • 【前端技術(shù)】Vue3 01:初識 Vue.js

    【前端技術(shù)】Vue3 01:初識 Vue.js

    Vue 可以說是非常流行了,至少在國內(nèi)是這樣,他是個(gè)輕量級的 JavaScript 框架,非常適合構(gòu)建大型和中小型的 Web 應(yīng)用程序,如果想和前端打交道,應(yīng)該繞不過這個(gè)框架吧。 目錄 1?Vue.js 介紹 2??IDE 選擇 2.1 vscode 2.2?WebStorm 2.3?Eclipse 3??創(chuàng)建 Vue 應(yīng)用 3.1 本地腳手架創(chuàng)建 ① 安裝

    2024年02月02日
    瀏覽(26)
  • 前端(四)——vue.js、vue、vue2、vue3

    前端(四)——vue.js、vue、vue2、vue3

    ??博主:小貓娃來啦 ??文章核心: vue.js、vue、vue2、vue3從全局到局部 Vue.js是一款流行的JavaScript框架 vue,vue2,vue3都是vue.js的不同版本。 Vue:Vue.js的第一個(gè)版本,也稱為Vue 1.x。它于2014年首次發(fā)布,并獲得了廣泛的應(yīng)用和認(rèn)可。 Vue2:Vue.js的第二個(gè)版本,也稱為Vue 2.x。它在Vu

    2024年02月12日
    瀏覽(28)
  • vue3項(xiàng)目+TypeScript前端項(xiàng)目—— vue3搭建項(xiàng)目+eslint+husky

    vue3項(xiàng)目+TypeScript前端項(xiàng)目—— vue3搭建項(xiàng)目+eslint+husky

    今天來帶大家從0開始搭建一個(gè)vue3版本的后臺管理系統(tǒng)。一個(gè)項(xiàng)目要有統(tǒng)一的規(guī)范,需要使用eslint+stylelint+prettier來對我們的代碼質(zhì)量做檢測和修復(fù),需要使用husky來做commit攔截,需要使用commitlint來統(tǒng)一提交規(guī)范,需要使用preinstall來統(tǒng)一包管理工具。 下面我們就用這一套規(guī)范

    2024年02月22日
    瀏覽(25)
  • 前端HTML、CSS、JS、VUE3 匯總

    前端HTML、CSS、JS、VUE3 匯總

    學(xué)習(xí)https://developer.mozilla.org/zh-CN/docs/Learn/CSS 提示:這里可以添加系列文章的所有文章的目錄,目錄需要自己手動(dòng)添加 使用VS Code運(yùn)行前端代碼 在VS Code上安裝前端插件 正在更新中~ ? 提示:這里可以添加本文要記錄的大概內(nèi)容: 學(xué)習(xí)路線 知識定位 HTML基礎(chǔ) 標(biāo)簽、表格、表單、

    2024年02月13日
    瀏覽(69)
  • Vue3項(xiàng)目實(shí)戰(zhàn)

    Vue3項(xiàng)目實(shí)戰(zhàn)

    目錄 一、項(xiàng)目準(zhǔn)備 二、基礎(chǔ)語法應(yīng)用 2.1、mixin應(yīng)用 2.2、網(wǎng)絡(luò)請求 2.3、顯示與隱藏 2.4、編程式路由跳轉(zhuǎn) 2.5、下載資料 2.6、調(diào)用方法 2.7、監(jiān)聽路由變化 2.8、pinia應(yīng)用 (1)存儲token(user.js) (2)全選全不選案例(car.js) 下載: cnpm i unplugin-auto-import -D? ?//setup 語法糖插件 npm i -D @types

    2024年02月11日
    瀏覽(86)
  • JavaScript - 判斷當(dāng)前時(shí)間是否在指定區(qū)間內(nèi),例如:9:00~12:00(檢查當(dāng)前時(shí)間是否處于規(guī)定的兩個(gè)時(shí)間段范圍內(nèi)),適用于 vue.js / uniapp / 微信小程序等前端項(xiàng)目

    例如,您想知道當(dāng)前時(shí)間是否處于 9:00 ~ 12:00 時(shí)間區(qū)間內(nèi),然后根據(jù)這個(gè)判斷進(jìn)而實(shí)現(xiàn)業(yè)務(wù)邏輯。 如下示例所示, 本文提供一個(gè)函數(shù),您只需要傳入 2 個(gè)時(shí)間區(qū)間,便可得出當(dāng)前時(shí)間是否在該時(shí)間區(qū)間范圍內(nèi): 您可以一鍵復(fù)制,直接粘貼到您的項(xiàng)目中。 您只需要傳入開始時(shí)

    2024年02月16日
    瀏覽(50)
  • 【前端vue升級】vue2+js+elementUI升級為vue3+ts+elementUI plus

    【前端vue升級】vue2+js+elementUI升級為vue3+ts+elementUI plus

    gogo code 是一個(gè)基于 AST (源代碼的抽象語法結(jié)構(gòu)樹狀表現(xiàn)形式)的 JavaScript/Typescript/HTML 代碼轉(zhuǎn)換工具,可以用它來構(gòu)建一個(gè)代碼轉(zhuǎn)換程序來幫助自動(dòng)化完成如框架升級、代碼重構(gòu)、多平臺轉(zhuǎn)換等工作。 當(dāng)前 GoGoCode 支持解析和操作如下類型的代碼: ○JavaScript(JSX) ○Typescript

    2024年02月12日
    瀏覽(31)

覺得文章有用就打賞一下文章作者

支付寶掃一掃打賞

博客贊助

微信掃一掃打賞

請作者喝杯咖啡吧~博客贊助

支付寶掃一掃領(lǐng)取紅包,優(yōu)惠每天領(lǐng)

二維碼1

領(lǐng)取紅包

二維碼2

領(lǐng)紅包