{"id":921,"date":"2024-12-23T20:37:03","date_gmt":"2024-12-23T12:37:03","guid":{"rendered":"https:\/\/womeifei.cn\/?p=921"},"modified":"2024-12-23T20:37:03","modified_gmt":"2024-12-23T12:37:03","slug":"vue3%e5%a4%a7%e4%ba%8b%e4%bb%b6%e7%ae%a1%e7%90%86%e9%a1%b9%e7%9b%ae-%e9%a1%b9%e7%9b%ae%e5%87%86%e5%a4%87","status":"publish","type":"post","link":"https:\/\/womeifei.cn\/index.php\/2024\/12\/23\/vue3%e5%a4%a7%e4%ba%8b%e4%bb%b6%e7%ae%a1%e7%90%86%e9%a1%b9%e7%9b%ae-%e9%a1%b9%e7%9b%ae%e5%87%86%e5%a4%87\/","title":{"rendered":"Vue3\u5927\u4e8b\u4ef6\u7ba1\u7406\u9879\u76ee—\u9879\u76ee\u51c6\u5907"},"content":{"rendered":"\n

\u73b0\u5728\u4e34\u8fd1\u671f\u672b\u8003\u8bd5\u4e86 \u9700\u8981\u82b1\u65f6\u95f4\u53bb\u590d\u4e60\u4e00\u4e0b\u4e13\u4e1a\u8bfe\u5185\u5bb9\u4e86 \u51c6\u5907\u505a\u5b8c\u8fd9\u4e2ademo\u7ea7\u522b\u7684PC\u7aef\u9879\u76ee\u5c31\u6536\u624b\u4e86 \u5bd2\u5047\u518d\u4e13\u5fc3\u505a\u4e00\u4e2a\u5927\u578b\u7684\u5b8c\u6574\u9879\u76ee <\/p>\n\n\n\n

\u8fd9\u4e2a\u5927\u4e8b\u4ef6\u7ba1\u7406\u7cfb\u7edf\u662f\u7531Vue3\u6765\u8fdb\u884c\u5f00\u53d1 \u9884\u8ba1\u4e94\u5929\u5185\u5b8c\u6210 \u89c6\u9891\u8bfe\u4e2d\u7528\u5230\u4e86Git\u7248\u672c\u63a7\u5236 \u4f46\u662f\u8fd9\u90e8\u5206\u77e5\u8bc6\u6ca1\u6709\u5b66\u8fc7 \u6240\u4ee5\u53ea\u80fd\u5148\u4e0d\u7528Git \u7b49\u6709\u65f6\u95f4\u4e86\u518d\u628a\u8fd9\u5757\u77e5\u8bc6\u8865\u5145\u4e00\u4e0b <\/p>\n\n\n\n

\u901a\u8fc7\u8fd9\u4e00\u7bc7\u6587\u7ae0\u7684\u5b66\u4e60 \u6211\u4eec\u4e3b\u8981\u8981\u4e86\u89e3\u5982\u4f55\u505a\u597d\u4e00\u4e2a\u9879\u76ee\u7684\u51c6\u5907\u5de5\u4f5c<\/strong><\/p>\n\n\n\n

\u672c\u9879\u76ee\u7684\u6280\u672f\u6808<\/strong> <\/p>\n\n\n\n

\u672c\u9879\u76ee\u6280\u672f\u6808\u57fa\u4e8e ES6<\/a>\u3001vue3<\/a>\u3001pinia<\/a>\u3001vue-router<\/a> \u3001vite \u3001axios \u548c element-plus<\/a><\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u9879\u76ee\u9875\u9762\u4ecb\u7ecd<\/strong><\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n

pnpm\u5305\u7ba1\u7406\u5668—\u521b\u5efa\u9879\u76ee<\/strong><\/p>\n\n\n\n

\u4e00\u4e9b\u4f18\u52bf\uff1a\u6bd4\u540c\u7c7b\u5de5\u5177\u5feb 2\u500d \u5de6\u53f3\u3001\u8282\u7701\u78c1\u76d8\u7a7a\u95f4https:\/\/www.pnpm.cn\/<\/a><\/p>\n\n\n\n

npm install -g pnpm \u5b89\u88c5pnpm<\/p>\n\n\n\n

pnpm create vue \u521b\u5efa\u9879\u76ee<\/p>\n\n\n\n

\"\"<\/div><\/figure>\n\n\n\n

\u8c03\u6574\u9879\u76ee\u76ee\u5f55<\/strong><\/p>\n\n\n\n

1.\u5220\u9664\u90e8\u5206\u6587\u4ef6<\/strong><\/p>\n\n\n\n

2.\u4fee\u6539&&\u6dfb\u52a0\u5185\u5bb9<\/strong><\/p>\n\n\n\n

src\/router\/index.js<\/p>\n\n\n\n

import { createRouter, createWebHistory } from 'vue-router'\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: []\n})\n\nexport default router<\/code><\/pre>\n\n\n\n
src\/App.vue<\/p>\n\n\n\n
<script setup><\/script>\n\n<template>\n  <div>\n    <router-view><\/router-view>\n  <\/div>\n<\/template>\n\n<style scoped><\/style><\/code><\/pre>\n\n\n\n
src\/main.js<\/p>\n\n\n\n
import { createApp } from ‘vue’
import { createPinia } from ‘pinia’<\/p>\n\n\n\n
import App from ‘.\/App.vue’
import router from ‘.\/router’<\/p>\n\n\n\n
const app = createApp(App)<\/p>\n\n\n\n
app.use(createPinia())
app.use(router)
app.mount(‘#app’)<\/p>\n\n\n\n
3.\u65b0\u589e\u9700\u8981\u76ee\u5f55 api utils<\/strong><\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
4.\u5c06\u9879\u76ee\u9700\u8981\u7684\u5168\u5c40\u6837\u5f0f \u548c \u56fe\u7247\u6587\u4ef6\uff0c\u590d\u5236\u5230 assets \u6587\u4ef6\u5939\u4e2d, \u5e76\u5c06\u5168\u5c40\u6837\u5f0f\u5728main.js\u4e2d\u5f15\u5165<\/strong><\/p>\n\n\n\n
import '@\/assets\/main.scss'<\/code><\/pre>\n\n\n\n
\u5b89\u88c5sass\u4f9d\u8d56 pnpm add sass -D<\/p>\n\n\n\n
VueRouter4\u8def\u7531\u4ee3\u7801\u89e3\u6790<\/strong><\/p>\n\n\n\n
import { createRouter, createWebHistory } from 'vue-router'\n\n\/\/ createRouter \u521b\u5efa\u8def\u7531\u5b9e\u4f8b\uff0c===> new VueRouter()\n\/\/ 1. history\u6a21\u5f0f: createWebHistory()   http:\/\/xxx\/user\n\/\/ 2. hash\u6a21\u5f0f: createWebHashHistory()  http:\/\/xxx\/#\/user\n\n\/\/ vite \u7684\u914d\u7f6e import.meta.env.BASE_URL \u662f\u8def\u7531\u7684\u57fa\u51c6\u5730\u5740\uff0c\u9ed8\u8ba4\u662f \u2019\/\u2018\n\/\/ https:\/\/vitejs.dev\/guide\/build.html#public-base-path\n\n\/\/ \u5982\u679c\u5c06\u6765\u4f60\u90e8\u7f72\u7684\u57df\u540d\u8def\u5f84\u662f\uff1ahttp:\/\/xxx\/my-path\/user\n\/\/ vite.config.ts  \u6dfb\u52a0\u914d\u7f6e  base: my-path\uff0c\u8def\u7531\u8fd9\u5c31\u4f1a\u52a0\u4e0a my-path \u524d\u7f00\u4e86\n\nconst router = createRouter({\n  history: createWebHistory(import.meta.env.BASE_URL),\n  routes: []\n})\n\nexport default router<\/code><\/pre>\n\n\n\n
\u5f15\u5165Element-Plus\u7ec4\u4ef6\u5e93<\/strong><\/p>\n\n\n\n
\u5b89\u88c5 <\/p>\n\n\n\n
pnpm add element-plus<\/p>\n\n\n\n
\u81ea\u52a8\u6309\u9700\u5bfc\u5165<\/p>\n\n\n\n
1.\u5b89\u88c5\u63d2\u4ef6<\/p>\n\n\n\n
pnpm add -D unplugin-vue-components unplugin-auto-import<\/p>\n\n\n\n
2.\u7136\u540e\u628a\u4e0b\u5217\u4ee3\u7801\u63d2\u5165\u5230\u4f60\u7684 Vite<\/code> \u6216 Webpack<\/code> \u7684\u914d\u7f6e\u6587\u4ef6\u4e2d<\/p>\n\n\n\n
...\nimport AutoImport from 'unplugin-auto-import\/vite'\nimport Components from 'unplugin-vue-components\/vite'\nimport { ElementPlusResolver } from 'unplugin-vue-components\/resolvers'\n\n\/\/ https:\/\/vitejs.dev\/config\/\nexport default defineConfig({\n  plugins: [\n    ...\n    AutoImport({\n      resolvers: [ElementPlusResolver()]\n    }),\n    Components({\n      resolvers: [ElementPlusResolver()]\n    })\n  ]\n})<\/code><\/pre>\n\n\n\n
3.\u76f4\u63a5\u4f7f\u7528(\u65e0\u9700\u6ce8\u518c!!!) <\/strong>(\u9ed8\u8ba4components\u4e0b\u7684\u6587\u4ef6\u4e5f\u4f1a\u88ab\u81ea\u52a8\u6ce8\u518c!!!)<\/p>\n\n\n\n
Pinia\u6784\u5efa\u7528\u6237\u4ed3\u5e93\u548c\u6301\u4e45\u5316<\/strong><\/p>\n\n\n\n
1.\u5b89\u88c5\u6301\u4e45\u5316\u63d2\u4ef6pinia-plugin-persistedstate<\/p>\n\n\n\n
pnpm add pinia-plugin-persistedstate -D<\/p>\n\n\n\n
2.\u5728main.js\u4e2d\u4f7f\u7528<\/p>\n\n\n\n
import persist from ‘pinia-plugin-persistedstate’
\u2026
app.use(createPinia().use(persist))<\/p>\n\n\n\n
3.\u914d\u7f6estores\/user.js<\/p>\n\n\n\n
import { defineStore } from 'pinia'\nimport { ref } from 'vue'\n\n\/\/ \u7528\u6237\u6a21\u5757\nexport const useUserStore = defineStore(\n  'big-user',\n  () => {\n    const token = ref('') \/\/ \u5b9a\u4e49 token\n    const setToken = (t) => (token.value = t) \/\/ \u8bbe\u7f6e token\n\n    return { token, setToken }\n  },\n  {\n    persist: true \/\/ \u6301\u4e45\u5316\n  }\n)<\/code><\/pre>\n\n\n\n
Pinia – \u914d\u7f6e\u4ed3\u5e93\u7edf\u4e00\u7ba1\u7406<\/strong><\/p>\n\n\n\n
pinia \u72ec\u7acb\u7ef4\u62a4<\/p>\n\n\n\n
– \u73b0\u5728\uff1a\u521d\u59cb\u5316\u4ee3\u7801\u5728 main.js \u4e2d\uff0c\u4ed3\u5e93\u4ee3\u7801\u5728 stores \u4e2d\uff0c\u4ee3\u7801\u5206\u6563\u804c\u80fd\u4e0d\u5355\u4e00<\/p>\n\n\n\n
– \u4f18\u5316\uff1a\u7531 stores \u7edf\u4e00\u7ef4\u62a4\uff0c\u5728 stores\/index.js \u4e2d\u5b8c\u6210 pinia \u521d\u59cb\u5316\uff0c\u4ea4\u4ed8 main.js \u4f7f\u7528<\/p>\n\n\n\n
\u4ed3\u5e93 \u7edf\u4e00\u5bfc\u51fa<\/p>\n\n\n\n
– \u73b0\u5728\uff1a\u4f7f\u7528\u4e00\u4e2a\u4ed3\u5e93 import { useUserStore } from .\/stores\/user.js<\/code> \u4e0d\u540c\u4ed3\u5e93\u8def\u5f84\u4e0d\u4e00\u81f4<\/p>\n\n\n\n
– \u4f18\u5316\uff1a\u7531 stores\/index.js \u7edf\u4e00\u5bfc\u51fa\uff0c\u5bfc\u5165\u8def\u5f84\u7edf\u4e00 .\/stores<\/code>\uff0c\u800c\u4e14\u4ed3\u5e93\u7ef4\u62a4\u5728 stores\/modules \u4e2d<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u6570\u636e\u4ea4\u4e92 – \u8bf7\u6c42\u5de5\u5177\u8bbe\u8ba1<\/strong><\/p>\n\n\n\n
\u6211\u4eec\u4f7f\u7528 axios \u6765\u8bf7\u6c42\u540e\u7aef\u63a5\u53e3, \u4e00\u822c\u90fd\u4f1a\u5bf9 axios \u8fdb\u884c\u4e00\u4e9b\u914d\u7f6e (\u6bd4\u5982: \u914d\u7f6e\u57fa\u7840\u5730\u5740\u7b49)<\/p>\n\n\n\n
\u4e00\u822c\u9879\u76ee\u5f00\u53d1\u4e2d, \u90fd\u4f1a\u5bf9 axios \u8fdb\u884c\u57fa\u672c\u7684\u4e8c\u6b21\u5c01\u88c5, \u5355\u72ec\u5c01\u88c5\u5230\u4e00\u4e2a\u6a21\u5757\u4e2d, \u4fbf\u4e8e\u4f7f\u7528<\/p>\n\n\n\n
\"\"<\/div><\/figure>\n\n\n\n
\u521b\u5efaaxios\u5b9e\u4f8b<\/strong><\/p>\n\n\n\n
1.\u5b89\u88c5axios pnpm add axios<\/p>\n\n\n\n
2.\u65b0\u5efautils\/request.js\u5c01\u88c5axios\u6a21\u5757<\/p>\n\n\n\n
\u5229\u7528 axios.create \u521b\u5efa\u4e00\u4e2a\u81ea\u5b9a\u4e49\u7684 axios \u6765\u4f7f\u7528<\/p>\n\n\n\n
http:\/\/www.axios-js.com\/zh-cn\/docs\/#axios-create-config<\/a><\/p>\n\n\n\n
import axios from 'axios'\n\nconst baseURL = 'http:\/\/big-event-vue-api-t.itheima.net'\n\nconst instance = axios.create({\n  \/\/ TODO 1. \u57fa\u7840\u5730\u5740\uff0c\u8d85\u65f6\u65f6\u95f4\n})\n\ninstance.interceptors.request.use(\n  (config) => {\n    \/\/ TODO 2. \u643a\u5e26token\n    return config\n  },\n  (err) => Promise.reject(err)\n)\n\ninstance.interceptors.response.use(\n  (res) => {\n    \/\/ TODO 3. \u5904\u7406\u4e1a\u52a1\u5931\u8d25\n    \/\/ TODO 4. \u6458\u53d6\u6838\u5fc3\u54cd\u5e94\u6570\u636e\n    return res\n  },\n  (err) => {\n    \/\/ TODO 5. \u5904\u7406401\u9519\u8bef\n    return Promise.reject(err)\n  }\n)\n\nexport default instance<\/code><\/pre>\n\n\n\n
\u5b8c\u6210axios\u57fa\u672c\u914d\u7f6e<\/strong><\/p>\n\n\n\n
import { useUserStore } from '@\/stores\/user'\nimport axios from 'axios'\nimport router from '@\/router'\nimport { ElMessage } from 'element-plus'\n\nconst baseURL = 'http:\/\/big-event-vue-api-t.itheima.net'\n\nconst instance = axios.create({\n  baseURL,\n  timeout: 100000\n})\n\ninstance.interceptors.request.use(\n  (config) => {\n    const userStore = useUserStore()\n    if (userStore.token) {\n      config.headers.Authorization = userStore.token\n    }\n    return config\n  },\n  (err) => Promise.reject(err)\n)\n\ninstance.interceptors.response.use(\n  (res) => {\n    if (res.data.code === 0) {\n      return res\n    }\n    ElMessage({ message: res.data.message || '\u670d\u52a1\u5f02\u5e38', type: 'error' })\n    return Promise.reject(res.data)\n  },\n  (err) => {\n    ElMessage({ message: err.response.data.message || '\u670d\u52a1\u5f02\u5e38', type: 'error' })\n    console.log(err)\n    if (err.response?.status === 401) {\n      router.push('\/login')\n    }\n    return Promise.reject(err)\n  }\n)\n\nexport default instance\nexport { baseURL }\n<\/code><\/pre>\n\n\n\n
\u9996\u9875\u6574\u4f53\u8def\u7531\u8bbe\u8ba1<\/strong><\/p>\n\n\n\n
\u5b9e\u73b0\u76ee\u6807:<\/strong><\/p>\n\n\n\n
    \n
  • \u5b8c\u6210\u6574\u4f53\u8def\u7531\u89c4\u5212\u3010\u641e\u6e05\u695a\u8981\u505a\u51e0\u4e2a\u9875\u9762\uff0c\u5b83\u4eec\u5206\u522b\u5728\u54ea\u4e2a\u8def\u7531\u4e0b\u9762\uff0c\u600e\u4e48\u8df3\u8f6c\u7684…..\u3011<\/li>\n\n\n\n
  • \u901a\u8fc7\u89c2\u5bdf, \u70b9\u51fb\u5de6\u4fa7\u5bfc\u822a, \u53f3\u4fa7\u533a\u57df\u5728\u5207\u6362, \u90a3\u53f3\u4fa7\u533a\u57df\u5185\u5bb9\u4e00\u76f4\u5728\u53d8, \u90a3\u8fd9\u4e2a\u5730\u65b9\u5c31\u662f\u4e00\u4e2a\u8def\u7531\u7684\u51fa\u53e3<\/li>\n\n\n\n
  • \u6211\u4eec\u9700\u8981\u642d\u5efa\u5d4c\u5957\u8def\u7531<\/li>\n<\/ul>\n\n\n\n
    \u76ee\u6807\uff1a<\/p>\n\n\n\n
      \n
    • \u628a\u9879\u76ee\u4e2d\u6240\u6709\u7528\u5230\u7684\u7ec4\u4ef6\u53ca\u8def\u7531\u8868, \u7ea6\u5b9a\u4e0b\u6765<\/li>\n<\/ul>\n\n\n\n
      \"\"<\/div><\/figure>\n\n\n\n
      \"\"<\/div><\/figure>\n\n\n\n
             \u5230\u8fd9\u91cc\u9879\u76ee\u7684\u51c6\u5907\u5de5\u4f5c\u5c31\u57fa\u672c\u5b8c\u6210\u4e86 \u540e\u9762\u6211\u4eec\u5c31\u53ef\u4ee5\u8fdb\u884c\u9875\u9762\u7684\u8bbe\u8ba1,\u524d\u540e\u7aef\u4ea4\u4e92,\u9875\u9762\u6e32\u67d3\u7b49\u64cd\u4f5c\u4e86 \u5bf9\u4e8e\u9879\u76ee\u7684\u51c6\u5907 \u6211\u4eec\u5e94\u8be5\u505a\u5230\u5341\u5206\u719f\u7ec3 \u8fd9\u53ef\u4ee5\u8ba9\u6211\u4eec\u63d0\u9ad8\u7f16\u5199\u4ee3\u7801\u7684\u6548\u7387 \u66f4\u597d\u5730\u7ba1\u7406\u9879\u76ee \u4ece\u800c\u5199\u51fa\u66f4\u597d\u7684Vue3\u9879\u76ee <\/p>\n","protected":false},"excerpt":{"rendered":"
      \u73b0\u5728\u4e34\u8fd1\u671f\u672b\u8003\u8bd5\u4e86 \u9700\u8981\u82b1\u65f6\u95f4\u53bb\u590d\u4e60\u4e00\u4e0b\u4e13\u4e1a\u8bfe\u5185\u5bb9\u4e86 \u51c6\u5907\u505a\u5b8c\u8fd9\u4e2ademo\u7ea7\u522b\u7684PC\u7aef\u9879\u76ee\u5c31\u6536\u624b\u4e86 \u5bd2\u5047\u518d\u4e13\u5fc3 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[15,1],"tags":[],"class_list":["post-921","post","type-post","status-publish","format-standard","hentry","category-vue-","category-1"],"_links":{"self":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/921","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/comments?post=921"}],"version-history":[{"count":1,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/921\/revisions"}],"predecessor-version":[{"id":934,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/posts\/921\/revisions\/934"}],"wp:attachment":[{"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/media?parent=921"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/categories?post=921"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/womeifei.cn\/index.php\/wp-json\/wp\/v2\/tags?post=921"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}