{"id":6486,"date":"2025-07-27T20:31:10","date_gmt":"2025-07-27T12:31:10","guid":{"rendered":"https:\/\/itoau.com\/?p=6486"},"modified":"2025-07-27T20:37:04","modified_gmt":"2025-07-27T12:37:04","slug":"vue-3-typescript-%e4%b8%93%e4%b8%9a%e5%89%8d%e7%ab%af%e5%bc%80%e5%8f%91%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e6%8c%87%e5%8d%97","status":"publish","type":"post","link":"https:\/\/itoau.com\/?p=6486","title":{"rendered":"Vue 3 + TypeScript \u4e13\u4e1a\u524d\u7aef\u5f00\u53d1\u73af\u5883\u642d\u5efa\u6307\u5357"},"content":{"rendered":"

Vue 3 + TypeScript \u4e13\u4e1a\u524d\u7aef\u5f00\u53d1\u73af\u5883\u642d\u5efa\u6307\u5357<\/strong>
\n\u76ee\u6807
\n\u672c\u6307\u5357\u65e8\u5728\u642d\u5efa\u4e00\u4e2a\u529f\u80fd\u5b8c\u5907\u3001\u5177\u5907\u9ad8\u5ea6\u81ea\u52a8\u5316\u548c\u4ee3\u7801\u8d28\u91cf\u4fdd\u969c\u7684\u524d\u7aef\u5f00\u53d1\u73af\u5883\u3002\u5b8c\u6210\u642d\u5efa\u540e\uff0c\u5c06\u751f\u6210\u4e00\u4e2a\u53ef\u76f4\u63a5\u7528\u4e8e\u9879\u76ee\u5f00\u53d1\u7684\u3001\u53ef\u590d\u7528\u7684\u201c\u9ec4\u91d1\u6a21\u677f\u201d\u3002
\n\u6280\u672f\u6808\u6982\u89c8:
\n\u6838\u5fc3\u6846\u67b6: Vue 3 (\u4f7f\u7528 Composition API)
\n\u8bed\u8a00: TypeScript
\nUI \u6846\u67b6: Bootstrap 5 & Bootstrap Icons
\n\u6570\u636e\u53ef\u89c6\u5316: Apache ECharts
\n\u4ee3\u7801\u8d28\u91cf:
\nESLint: \u4ee3\u7801\u903b\u8f91\u68c0\u67e5
\nPrettier: \u4ee3\u7801\u98ce\u683c\u683c\u5f0f\u5316
\nHusky & lint-staged: Git \u63d0\u4ea4\u524d\u81ea\u52a8\u5316\u68c0\u67e5\u4e0e\u683c\u5f0f\u5316
\n\u524d\u63d0\u6761\u4ef6
\nNode.js: \u8bf7\u786e\u4fdd\u5df2\u5b89\u88c5 v18 \u6216\u66f4\u9ad8\u7248\u672c\u7684 Node.js\u3002\u53ef\u5728\u7ec8\u7aef\u8f93\u5165 node -v \u67e5\u770b\u3002
\nVS Code: \u63a8\u8350\u4f7f\u7528\u7684\u4ee3\u7801\u7f16\u8f91\u5668\u3002
\nVS Code \u6269\u5c55 (\u5173\u952e\uff01):
\nVue Language Features (Volar): \u4e3a Vue 3 \u63d0\u4f9b\u8bed\u8a00\u652f\u6301\u3002
\nPrettier – Code formatter: \u7528\u4e8e\u81ea\u52a8\u683c\u5f0f\u5316\u4ee3\u7801\u3002
\n\u8bf7\u786e\u4fdd\u7981\u7528\u6216\u5378\u8f7d\u65e7\u7684 Vetur \u6269\u5c55\uff0c\u4ee5\u907f\u514d\u4e0e Volar \u51b2\u7a81\u3002
\n\u7b2c\u4e00\u90e8\u5206\uff1a\u9879\u76ee\u521d\u59cb\u5316\u4e0e\u57fa\u7840\u914d\u7f6e<\/strong><\/span>
\n\u4f7f\u7528 Vue \u5b98\u65b9\u63a8\u8350\u7684\u811a\u624b\u67b6 create-vue \u6765\u521d\u59cb\u5316\u9879\u76ee\uff0c\u5b83\u80fd\u5e2e\u6211\u4eec\u9884\u8bbe\u597d\u5927\u90e8\u5206\u914d\u7f6e\u3002\u521b\u5efa\u9879\u76ee:
\n\u6253\u5f00\u7ec8\u7aef\uff0c\u6267\u884c\u4ee5\u4e0b\u547d\u4ee4\uff1a
\nnpm create vue@latest<\/p>\n

\u914d\u7f6e\u9009\u9879:
\n\u811a\u624b\u67b6\u4f1a\u4ee5\u4ea4\u4e92\u65b9\u5f0f\u8be2\u95ee\u60a8\u9700\u8981\u5f00\u542f\u54ea\u4e9b\u529f\u80fd\u3002\u8bf7\u6309\u7167\u4ee5\u4e0b\u5efa\u8bae\u8fdb\u884c\u9009\u62e9\uff08\u4f7f\u7528\u65b9\u5411\u952e\u79fb\u52a8\uff0c\u7a7a\u683c\u952e\u9009\u4e2d\uff09\uff1a
\nGenerated code
\n\u2714 Project name: \u203a vue-pro-template (\u8f93\u5165\u60a8\u7684\u9879\u76ee\u540d\uff0c\u4f8b\u5982 vue-pro-template)
\n\u2714 Add TypeScript? \u2026 Yes
\n\u2714 Add JSX Support? \u2026 No
\n\u2714 Add Vue Router for Single Page Application development? \u2026 Yes
\n\u2714 Add Pinia for state management? \u2026 Yes (\u5373\u4f7f\u6682\u65f6\u4e0d\u7528\uff0c\u4e5f\u5efa\u8bae\u6dfb\u52a0)
\n\u2714 Add Vitest for Unit Testing? \u2026 No (\u53ef\u6839\u636e\u56e2\u961f\u9700\u6c42\u9009\u62e9 Yes)
\n\u2714 Add an End-to-End Testing Solution? \u203a No (\u53ef\u6839\u636e\u56e2\u961f\u9700\u6c42\u9009\u62e9)
\n\u2714 Add ESLint for code quality? \u2026 Yes
\n\u2714 Add Prettier for code formatting? \u2026 Yes<\/p>\n

\u8fdb\u5165\u9879\u76ee\u5e76\u5b89\u88c5\u4f9d\u8d56:
\ncd vue-pro-template
\nnpm install
\n\u81f3\u6b64\uff0c\u4e00\u4e2a\u5305\u542b\u4e86 Vue 3\u3001TS\u3001Router\u3001Pinia\u3001ESLint \u548c Prettier \u7684\u57fa\u7840\u9879\u76ee\u5df2\u7ecf\u521b\u5efa\u5b8c\u6bd5\u3002<\/p>\n

\u7b2c\u4e8c\u90e8\u5206\uff1a\u96c6\u6210 UI \u6846\u67b6 (Bootstrap)<\/span><\/strong>
\n\u5b89\u88c5\u4f9d\u8d56:
\nnpm install bootstrap bootstrap-icons
\n\u5168\u5c40\u5f15\u5165:
\n\u6253\u5f00 src\/main.ts \u6587\u4ef6\uff0c\u5728\u9876\u90e8\u5f15\u5165 Bootstrap \u7684 CSS \u548c JS \u6587\u4ef6\u3002
\n\/\/ src\/main.ts<\/p>\n

\/\/ 1. \u5f15\u5165 Bootstrap
\nimport ‘bootstrap\/dist\/css\/bootstrap.min.css’
\nimport ‘bootstrap’
\nimport ‘bootstrap-icons\/font\/bootstrap-icons.css’<\/p>\n

\/\/ 2. \u5f15\u5165\u9879\u76ee\u539f\u6709\u6837\u5f0f
\nimport ‘.\/assets\/main.css’<\/p>\n

import { createApp } from ‘vue’
\n\/\/ … \u540e\u7eed\u4ee3\u7801\u4fdd\u6301\u4e0d\u53d8
\nTypeScript<\/p>\n

\u7b2c\u4e09\u90e8\u5206\uff1a\u96c6\u6210\u6570\u636e\u53ef\u89c6\u5316\u5e93 (Apache ECharts)<\/span><\/strong>
\n\u4e3a\u4e86\u5728 Vue \u4e2d\u66f4\u4f18\u96c5\u5730\u4f7f\u7528 ECharts\uff0c\u6211\u4eec\u91c7\u7528 vue-echarts \u5c01\u88c5\u5e93\u3002
\n\u5b89\u88c5\u4f9d\u8d56:
\nnpm install echarts vue-echarts<\/p>\n

\u521b\u5efa ECharts \u63d2\u4ef6 (\u6309\u9700\u5f15\u5165):
\n\u5728 src \u76ee\u5f55\u4e0b\u521b\u5efa\u4e00\u4e2a\u65b0\u6587\u4ef6\u5939 plugins\uff0c\u5e76\u5728\u5176\u4e2d\u521b\u5efa echarts.ts \u6587\u4ef6\u3002\u8fd9\u79cd\u65b9\u5f0f\u53ef\u4ee5\u6709\u6548\u51cf\u5c0f\u6700\u7ec8\u6253\u5305\u4f53\u79ef\u3002
\nsrc\/plugins\/echarts.ts:
\nGenerated typescript
\nimport { use } from “echarts\/core”;
\nimport { CanvasRenderer } from “echarts\/renderers”;
\nimport { BarChart, LineChart, PieChart } from “echarts\/charts”;
\nimport {
\nGridComponent,
\nTooltipComponent,
\nLegendComponent,
\nTitleComponent,
\n} from “echarts\/components”;<\/p>\n

\/\/ \u6309\u9700\u5f15\u5165 ECharts \u56fe\u8868\u548c\u7ec4\u4ef6
\nuse([
\nCanvasRenderer,
\nBarChart,
\nLineChart,
\nPieChart,
\nGridComponent,
\nTooltipComponent,
\nLegendComponent,
\nTitleComponent,
\n]);<\/p>\n

\u5168\u5c40\u6ce8\u518c ECharts \u7ec4\u4ef6:
\n\u518d\u6b21\u6253\u5f00 src\/main.ts \u6587\u4ef6\uff0c\u5f15\u5165 ECharts \u63d2\u4ef6\u548c vue-echarts \u7ec4\u4ef6\u3002
\nsrc\/main.ts (\u6574\u5408\u540e):
\nGenerated typescript
\n\/\/ Bootstrap
\nimport ‘bootstrap\/dist\/css\/bootstrap.min.css’
\nimport ‘bootstrap’
\nimport ‘bootstrap-icons\/font\/bootstrap-icons.css’
\n\/\/ …<\/p>\n

\/\/ ECharts
\nimport ECharts from ‘vue-echarts’
\nimport ‘.\/plugins\/echarts’ \/\/ \u5bfc\u5165\u521b\u5efa\u7684\u63d2\u4ef6\u6587\u4ef6<\/p>\n

\/\/ …<\/p>\n

const app = createApp(App)<\/p>\n

\/\/ \u5168\u5c40\u6ce8\u518c v-chart \u7ec4\u4ef6
\napp.component(‘v-chart’, ECharts)<\/p>\n

app.use(createPinia())
\napp.use(router)<\/p>\n

app.mount(‘#app’)<\/p>\n

\u7b2c\u56db\u90e8\u5206\uff1a\u914d\u7f6e\u81ea\u52a8\u5316\u4ee3\u7801\u8d28\u91cf\u4f53\u7cfb<\/strong><\/span>
\n\u8fd9\u662f\u63d0\u5347\u6548\u7387\u548c\u4ee3\u7801\u8d28\u91cf\u7684\u5173\u952e\u4e00\u6b65\u3002
\n\u914d\u7f6e Prettier:
\n\u9879\u76ee\u6839\u76ee\u5f55\u5df2\u751f\u6210 .prettierrc.json \u6587\u4ef6\u3002\u5efa\u8bae\u4f7f\u7528\u4ee5\u4e0b\u914d\u7f6e\uff0c\u5b83\u878d\u5408\u4e86\u901a\u7528\u6700\u4f73\u5b9e\u8df5\uff1a
\n.prettierrc.json:
\nGenerated json
\n{
\n“$schema”: “https:\/\/json.schemastore.org\/prettierrc”,
\n“semi”: true,
\n“singleQuote”: true,
\n“printWidth”: 100,
\n“tabWidth”: 2,
\n“trailingComma”: “es5”
\n}<\/p>\n

\u914d\u7f6e ESLint \u4e0e Prettier \u534f\u540c:
\n\u9879\u76ee\u811a\u624b\u67b6\u5df2\u7ecf\u5e2e\u6211\u4eec\u505a\u597d\u4e86\u8fd9\u4e00\u6b65\uff0cESLint \u7684\u914d\u7f6e\uff08\u901a\u5e38\u662f .eslintrc.cjs\uff09\u5df2\u7ecf\u5305\u542b\u4e86\u4e0e Prettier \u534f\u540c\u7684\u89c4\u5219\u3002\u65e0\u9700\u989d\u5916\u64cd\u4f5c\u3002
\n\u914d\u7f6e Git \u63d0\u4ea4\u94a9\u5b50 (Husky & lint-staged):
\n\u8fd9\u5c06\u5f3a\u5236\u5728\u6bcf\u6b21 git commit \u524d\u81ea\u52a8\u68c0\u67e5\u548c\u683c\u5f0f\u5316\u4ee3\u7801\u3002
\n\u5b89\u88c5\u4f9d\u8d56:
\nnpm install –save-dev husky lint-staged<\/p>\n

\u521d\u59cb\u5316 Husky:
\nnpx husky-init<\/p>\n

\u6b64\u547d\u4ee4\u4f1a\u521b\u5efa .husky \u76ee\u5f55\u5e76\u81ea\u52a8\u5728 package.json \u4e2d\u6dfb\u52a0 “prepare”: “husky install” \u811a\u672c\u3002
\n\u914d\u7f6e lint-staged:
\n\u6253\u5f00 package.json \u6587\u4ef6\uff0c\u5728\u672b\u5c3e\u6dfb\u52a0\u4ee5\u4e0b\u914d\u7f6e\uff1a
\nGenerated json
\n\/\/ package.json
\n{
\n\/\/ … \u5176\u4ed6\u914d\u7f6e
\n“lint-staged”: {
\n“*.{js,ts,vue}”: “eslint –fix”
\n}
\n}
\n\u4fee\u6539 pre-commit \u94a9\u5b50:
\n\u5c06 .husky\/pre-commit \u6587\u4ef6\u91cc\u7684\u5185\u5bb9\u4fee\u6539\u4e3a\uff1a
\nGenerated sh
\n#!\/usr\/bin\/env sh
\n. “$(dirname — “$0″)\/_\/husky.sh”<\/p>\n

npx lint-staged<\/p>\n

\u7b2c\u4e94\u90e8\u5206\uff1a\u73af\u5883\u6709\u6548\u6027\u9a8c\u8bc1<\/span><\/strong>
\n\u521b\u5efa\u4e00\u4e2a\u4e13\u95e8\u7684\u6d4b\u8bd5\u9875\u9762\u6765\u9a8c\u8bc1\u6240\u6709\u96c6\u6210\u662f\u5426\u90fd\u6b63\u5e38\u5de5\u4f5c\u3002
\n\u521b\u5efa\u6d4b\u8bd5\u89c6\u56fe:
\n\u5728 src\/views \u76ee\u5f55\u4e0b\u65b0\u5efa TestView.vue \u6587\u4ef6\uff0c\u5e76\u7c98\u8d34\u4ee5\u4e0b\u4ee3\u7801\uff1a
\n(\u6b64\u4ee3\u7801\u4e0e\u4e4b\u524d\u9a8c\u8bc1\u4ee3\u7801\u4e00\u81f4)
\nGenerated vue
\n<template>
\n<div class=”test-view”>
\n<div class=”container mt-4″>
\n<div class=”card”>
\n<div class=”card-header”>
\n<h2 class=”d-flex align-items-center”>
\n<i class=”bi bi-check2-circle me-2 text-success”><\/i>
\n\u73af\u5883\u96c6\u6210\u6d4b\u8bd5
\n<\/h2>
\n<\/div>
\n<div class=”card-body”>
\n<p class=”card-text”>
\n\u5982\u679c\u4e0b\u65b9\u6240\u6709\u5143\u7d20\u90fd\u6b63\u5e38\u663e\u793a\u4e14\u529f\u80fd\u6b63\u5e38\uff0c\u5219\u73af\u5883\u5df2\u6210\u529f\u642d\u5efa\uff01
\n<\/p>
\n<button class=”btn btn-primary” @click=”updateChartData”>
\n\u8fd9\u662f\u4e00\u4e2a Bootstrap \u6309\u94ae (\u70b9\u51fb\u66f4\u65b0\u56fe\u8868)
\n<\/button>
\n<hr class=”my-4″>
\n<h4 class=”mb-3″>ECharts \u56fe\u8868\u6d4b\u8bd5<\/h4>
\n<div class=”chart-container p-3 border rounded”>
\n<v-chart class=”chart” :option=”chartOption” autoresize \/>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/div>
\n<\/template><\/p>\n

<script setup lang=”ts”>
\nimport { ref } from ‘vue’;
\nimport type { EChartsOption } from ‘echarts’;<\/p>\n

const chartOption = ref<EChartsOption>({
\ntooltip: { trigger: ‘axis’ },
\nlegend: { data: [‘\u6d4b\u8bd5\u6570\u636e’] },
\nxAxis: {
\ntype: ‘category’,
\ndata: [‘\u5468\u4e00’, ‘\u5468\u4e8c’, ‘\u5468\u4e09’, ‘\u5468\u56db’, ‘\u5468\u4e94’, ‘\u5468\u516d’, ‘\u5468\u65e5’],
\n},
\nyAxis: { type: ‘value’ },
\nseries: [{
\nname: ‘\u6d4b\u8bd5\u6570\u636e’,
\ntype: ‘line’,
\nsmooth: true,
\ndata: [120, 132, 101, 134, 90, 230, 210],
\n}],
\n});<\/p>\n

const updateChartData = () => {
\nconst newData = Array.from({ length: 7 }, () => Math.round(Math.random() * 200 + 50));
\nif (chartOption.value.series && Array.isArray(chartOption.value.series)) {
\nchartOption.value.series[0].data = newData;
\n}
\n};
\n<\/script><\/p>\n

<style scoped>
\n.chart { height: 400px; }
\n<\/style>
\nUse code with caution.
\nVue
\n\u6dfb\u52a0\u6d4b\u8bd5\u8def\u7531:
\n\u6253\u5f00 src\/router\/index.ts\uff0c\u6dfb\u52a0\u6307\u5411 TestView \u7684\u8def\u7531\u3002
\nGenerated typescript
\n\/\/ src\/router\/index.ts
\nimport { createRouter, createWebHistory } from ‘vue-router’
\nimport TestView from ‘..\/views\/TestView.vue’ \/\/ \u5bfc\u5165\u6d4b\u8bd5\u89c6\u56fe<\/p>\n

const router = createRouter({
\nhistory: createWebHistory(import.meta.env.BASE_URL),
\nroutes: [
\n{
\npath: ‘\/test’, \/\/ \u5b9a\u4e49\u6d4b\u8bd5\u9875\u9762\u7684\u8bbf\u95ee\u8def\u5f84
\nname: ‘test’,
\ncomponent: TestView
\n},
\n\/\/ … \u5176\u4ed6\u8def\u7531
\n]
\n})
\nexport default router<\/p>\n

\u542f\u52a8\u5e76\u9a8c\u8bc1:<\/span><\/strong>
\n\u8fd0\u884c npm run dev\u3002
\n\u5728\u6d4f\u89c8\u5668\u4e2d\u8bbf\u95ee http:\/\/localhost:5173\/test\u3002
\n\u68c0\u67e5\u6e05\u5355:
\n[ ] Bootstrap: \u9875\u9762\u662f\u5426\u663e\u793a Bootstrap \u98ce\u683c\u7684\u5361\u7247\u548c\u84dd\u8272\u6309\u94ae\uff1f\u56fe\u6807\u662f\u5426\u663e\u793a\uff1f
\n[ ] ECharts: \u6298\u7ebf\u56fe\u662f\u5426\u6b63\u5e38\u6e32\u67d3\uff1f\u70b9\u51fb\u6309\u94ae\u540e\u56fe\u8868\u6570\u636e\u662f\u5426\u66f4\u65b0\uff1f
\n[ ] TypeScript: \u5728 TestView.vue \u4e2d\uff0c\u9f20\u6807\u60ac\u505c\u5728 chartOption \u4e0a\u662f\u5426\u663e\u793a\u7c7b\u578b\uff1f\u4fee\u6539\u914d\u7f6e\u65f6\u662f\u5426\u6709\u667a\u80fd\u63d0\u793a\uff1f
\n[ ] Husky:
\n\u5728 TestView.vue \u4e2d\u968f\u4fbf\u52a0\u4e00\u4e2a console.log(“test”) \u4f46\u4e0d\u52a0\u5206\u53f7\u3002
\n\u6267\u884c git add .
\n\u6267\u884c git commit -m “test”
\n\u63d0\u4ea4\u662f\u5426\u88ab\u963b\u6b62\uff0c\u5e76\u63d0\u793a ESLint \u9519\u8bef\uff1f
\n\u4fee\u590d\u9519\u8bef\uff08\u6216\u8ba9 Prettier \u81ea\u52a8\u4fee\u590d\uff09\u540e\uff0c\u662f\u5426\u80fd\u6210\u529f\u63d0\u4ea4\uff1f<\/p>\n

\u7b2c\u516d\u90e8\u5206\uff1a\u6a21\u677f\u5316\u4e0e\u56e2\u961f\u63a8\u5e7f<\/strong><\/span>
\n\u9a8c\u8bc1\u65e0\u8bef\u540e\uff0c\u5c31\u53ef\u4ee5\u5c06\u8fd9\u4e2a\u9879\u76ee\u4f5c\u4e3a\u56e2\u961f\u7684\u6807\u51c6\u6a21\u677f\u3002
\n\u6e05\u7406\u9879\u76ee:
\n\u5220\u9664\u6d4b\u8bd5\u6587\u4ef6: src\/views\/TestView.vue\u3002
\n\u6e05\u7406\u6d4b\u8bd5\u8def\u7531: \u5220\u9664 src\/router\/index.ts \u4e2d\u5173\u4e8e \/test \u7684\u8def\u7531\u3002
\n\uff08\u53ef\u9009\uff09\u6e05\u7406 App.vue \u548c views\u3001components \u76ee\u5f55\u4e0b\u7684\u9ed8\u8ba4\u5185\u5bb9\uff0c\u4fdd\u7559\u4e00\u4e2a\u6700\u5e72\u51c0\u7684\u9aa8\u67b6\u3002
\n\uff08\u5173\u952e\uff09\u5220\u9664 node_modules \u6587\u4ef6\u5939\u3002
\n\uff08\u53ef\u9009\uff09\u5220\u9664 .git \u6587\u4ef6\u5939\uff0c\u4ee5\u4fbf\u65b0\u9879\u76ee\u521d\u59cb\u5316\u81ea\u5df1\u7684\u7248\u672c\u5386\u53f2\u3002
\n\u4fdd\u5b58\u6a21\u677f:
\n\u5c06\u6e05\u7406\u540e\u7684\u6574\u4e2a\u9879\u76ee\u6587\u4ef6\u5939\u590d\u5236\u5e76\u91cd\u547d\u540d\u4e3a vue-pro-template\uff0c\u4fdd\u5b58\u5728\u56e2\u961f\u5171\u4eab\u7684\u4f4d\u7f6e\u3002
\n\u4f7f\u7528\u6a21\u677f:
\n\u5f53\u9700\u8981\u5f00\u542f\u65b0\u9879\u76ee\u65f6\uff1a
\n\u590d\u5236 vue-pro-template \u6587\u4ef6\u5939\uff0c\u91cd\u547d\u540d\u4e3a\u65b0\u9879\u76ee\u540d\u79f0\u3002
\n\u8fdb\u5165\u65b0\u9879\u76ee\u76ee\u5f55\uff0c\u5728\u7ec8\u7aef\u6267\u884c npm install\u3002
\n\u6267\u884c npm run dev\uff0c\u5f00\u59cb\u65b0\u9879\u76ee\u7684\u5f00\u53d1\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"

Vue 3 + TypeScript \u4e13\u4e1a\u524d\u7aef\u5f00\u53d1\u73af\u5883\u642d\u5efa\u6307\u5357 \u76ee\u6807 \u672c\u6307\u5357\u65e8\u5728\u642d\u5efa\u4e00\u4e2a\u529f\u80fd\u5b8c\u5907\u3001\u5177\u5907\u9ad8\u5ea6\u81ea\u52a8 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"set","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[54,53,52],"tags":[],"class_list":["post-6486","post","type-post","status-publish","format-standard","hentry","category-vue","category-53","category-52"],"_links":{"self":[{"href":"https:\/\/itoau.com\/index.php?rest_route=\/wp\/v2\/posts\/6486","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/itoau.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/itoau.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/itoau.com\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/itoau.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=6486"}],"version-history":[{"count":3,"href":"https:\/\/itoau.com\/index.php?rest_route=\/wp\/v2\/posts\/6486\/revisions"}],"predecessor-version":[{"id":6489,"href":"https:\/\/itoau.com\/index.php?rest_route=\/wp\/v2\/posts\/6486\/revisions\/6489"}],"wp:attachment":[{"href":"https:\/\/itoau.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=6486"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/itoau.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=6486"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/itoau.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=6486"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}