{"id":3121,"date":"2021-03-19T08:58:28","date_gmt":"2021-03-19T00:58:28","guid":{"rendered":"http:\/\/www.yuguoxy.com\/geekhome\/?p=3121"},"modified":"2026-08-18T12:35:33","modified_gmt":"2026-08-18T04:35:33","slug":"vite2-0%e6%90%ad%e5%bb%bavue3%e7%a7%bb%e5%8a%a8%e7%ab%af%e9%a1%b9%e7%9b%ae","status":"publish","type":"post","link":"https:\/\/ai.zhousir.top\/?p=3121","title":{"rendered":"vite2.0\u642d\u5efaVue3\u79fb\u52a8\u7aef\u9879\u76ee"},"content":{"rendered":"
\n

\u7528\u4e86 Vue3 \u5927\u534a\u5e74\uff0c\u9879\u76ee\u4e00\u76f4\u662f vue-cli \u57fa\u4e8e webpack \u642d\u7684\u3002\u521a\u597d\u6709\u4e2a\u79fb\u52a8\u7aef\u9700\u6c42\uff0c\u6539\u7528 vite \u7248 Vue3\uff0c\u8fd9\u91cc\u628a\u811a\u624b\u67b6\u3001\u8def\u7531\u3001Vuex\u3001Vant3\u3001rem \u9002\u914d\u3001axios \u548c\u4ee3\u7406\u7684\u8fc7\u7a0b\u8bb0\u4e0b\u6765\u3002<\/p>\n

vite + ts + vue3 \u4e00\u884c\u547d\u4ee4\u5c31\u80fd\u8d77\u9879\u76ee\uff1bVant 3 \u5185\u90e8\u662f ESM\uff0cvite \u4e0b\u4e0d\u5fc5\u518d\u914d\u6309\u9700\u52a0\u8f7d\u63d2\u4ef6\uff0c\u4f46\u6837\u5f0f\u8981\u5168\u5c40\u5f15\u5165\u3002\u6587\u672b\u6709\u7ebf\u4e0a\u9884\u89c8\u548c\u4ed3\u5e93\u5730\u5740\u3002<\/p>\n

\"image-20210319085246646\"<\/a><\/p>\n\n\n\n\n\n\n\n\n\n\n
\u6a21\u5757<\/th>\n\u547d\u4ee4 \/ \u6587\u4ef6<\/th>\n\u8981\u70b9<\/th>\n<\/tr>\n<\/thead>\n
\u811a\u624b\u67b6<\/td>\nnpm init @vitejs\/app –template vue-ts<\/td>\n\u4e00\u884c\u51fa Vue3+TS<\/td>\n<\/tr>\n
\u8def\u7531<\/td>\nvue-router@4\uff0csrc\/router\/index.ts<\/td>\ncreateWebHashHistory<\/td>\n<\/tr>\n
\u72b6\u6001<\/td>\nvuex@next\uff0csrc\/store\/index.ts<\/td>\ncreateStore \u540e app.use<\/td>\n<\/tr>\n
UI<\/td>\nvant@next<\/td>\n\u6837\u5f0f\u5168\u91cf\u5f15\u5165\u7ea6 137.2k<\/td>\n<\/tr>\n
\u9002\u914d<\/td>\npostcss-pxtorem + rem.ts<\/td>\nrootValue 37.5 \u5bf9\u9f50 Vant<\/td>\n<\/tr>\n
\u8bf7\u6c42<\/td>\naxios + vite proxy<\/td>\n\u62e6\u622a\u5668\u5e26 token\uff0c\/api \u8f6c\u53d1<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

\u4e00\u3001\u811a\u624b\u67b6\u3001\u8def\u7531\u4e0e\u6280\u672f\u70b9<\/h2>\n

\u6d89\u53ca\uff1avite\u3001vue3\u3001ts\u3001\u8def\u7531\u3001vuex\u3001axios\u3001Vant3\u3001\u79fb\u52a8\u7aef\u9002\u914d\u3001\u8bf7\u6c42\u4ee3\u7406\u3002<\/p>\n

vite + ts + vue3 \u53ea\u9700\u8981\u4e00\u884c\uff1a<\/p>\n

npm init @vitejs\/app my-vue-app --template vue-ts<\/code><\/pre>\n
\u914d\u7f6e\u8def\u7531<\/h3>\n
npm install vue-router@4 --save<\/code><\/pre>\n
\u5728 src \u4e0b\u65b0\u5efa router\/index.ts\uff1a<\/p>\n
import { createRouter, createWebHashHistory, RouteRecordRaw } from \"vue-router\";\nconst routes: Array<RouteRecordRaw> = [\n  {\n    path: \"\/\",\n    name: \"Home\",\n    meta: {\n      title: \"\u9996\u9875\",\n      keepAlive: true\n    },\n    component: () => import(\"..\/views\/Home\/index.vue\"),\n  },\n  {\n    path: \"\/login\",\n    name: \"Login\",\n    meta: {\n      title: \"\u767b\u5f55\",\n      keepAlive: true\n    },\n    component: () => import(\"..\/views\/Login\/index.vue\"),\n  },\n];\nconst router = createRouter({\n  history: createWebHashHistory(),\n  routes\n});\nexport default router;<\/code><\/pre>\n
\u5728 main.ts \u6302\u8f7d\uff1a<\/p>\n
import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport router from \".\/router\";createApp(App)\n.use(router)\n.mount('#app')<\/code><\/pre>\n
\u4e8c\u3001\u914d\u7f6e Vuex 4.x<\/h2>\n
\u5b89\u88c5<\/h3>\n
npm i vuex@next --save<\/code><\/pre>\n
\u914d\u7f6e<\/h3>\n
src\/store\/index.ts\uff1a<\/p>\n
import { createStore } from \"vuex\";\nexport default createStore({\n  state: {\n    listData:{1:10},\n    num:10\n  },\n  mutations: {\n    setData(state,value){\n        state.listData=value\n    },\n    addNum(state){\n      state.num=state.num+10\n    }\n  },\n  actions: {\n    setData(context,value){\n      context.commit('setData',value)\n    },\n  },\n  modules: {}\n});<\/code><\/pre>\n
\u6302\u8f7d<\/h3>\n
import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport router from \".\/router\";\nimport store from \".\/store\";\ncreateApp(App)\n.use(router)\n.use(store)\n.mount('#app')<\/code><\/pre>\n
\u4e09\u3001Vant3 \u4e0e\u79fb\u52a8\u7aef\u9002\u914d<\/h2>\n
\u5b89\u88c5 Vant<\/h3>\n
npm i vant@next -S<\/code><\/pre>\n
vite \u7248\u672c\u4e0d\u9700\u8981\u914d\u7f6e\u7ec4\u4ef6\u6309\u9700\u52a0\u8f7d\uff1aVant 3.0 \u5185\u90e8\u6a21\u5757\u57fa\u4e8e ESM\uff0c\u5929\u7136\u6309\u9700\u3002\u4f46\u6837\u5f0f\u5fc5\u987b\u5168\u90e8\u5f15\u5165\uff0c\u7ea6 137.2k\u3002\u5728 main.ts \u5168\u5c40\u5f15\u5165\uff1a<\/p>\n
import { createApp } from 'vue'\nimport App from '.\/App.vue'\nimport router from \".\/router\";\nimport store from \".\/store\";\nimport 'vant\/lib\/index.css'; \/\/ \u5168\u5c40\u5f15\u5165\u6837\u5f0f\ncreateApp(App)\n.use(router)\n.use(store)\n.use(ant)\n.mount('#app')<\/code><\/pre>\n
\u79fb\u52a8\u7aef\u9002\u914d<\/h3>\n
\u5b89\u88c5 postcss-pxtorem\uff1a<\/p>\n
npm install postcss-pxtorem -D<\/code><\/pre>\n
\u6839\u76ee\u5f55 postcss.config.js\uff0crootValue \u4e0e Vant \u5b98\u65b9 37.5 \u5bf9\u9f50\uff1b.norem \u5f00\u5934\u7684 class \u4e0d\u8f6c rem\uff1a<\/p>\n
module.exports = {\n  \"plugins\": {\n    \"postcss-pxtorem\": {\n      rootValue: 37.5,\n      \/\/ Vant \u5b98\u65b9\u6839\u5b57\u4f53\u5927\u5c0f\u662f 37.5\n      propList: ['*'],\n      selectorBlackList: ['.norem']\n      \/\/ \u8fc7\u6ee4\u6389.norem-\u5f00\u5934\u7684class\uff0c\u4e0d\u8fdb\u884crem\u8f6c\u6362\n    }\n  }\n}<\/code><\/pre>\n
src\/util\/rem.ts\uff08\u539f\u6587\u8def\u5f84\uff1bmain \u91cc\u6309 utils \u5f15\u5165\uff09\uff1a<\/p>\n
\/\/ rem\u7b49\u6bd4\u9002\u914d\u914d\u7f6e\u6587\u4ef6\n\/\/ \u57fa\u51c6\u5927\u5c0f\nconst baseSize = 37.5\n\/\/ \u6ce8\u610f\u6b64\u503c\u8981\u4e0e postcss.config.js \u6587\u4ef6\u4e2d\u7684 rootValue\u4fdd\u6301\u4e00\u81f4\n\/\/ \u8bbe\u7f6e rem \u51fd\u6570\nfunction setRem () {\n  \/\/ \u5f53\u524d\u9875\u9762\u5bbd\u5ea6\u76f8\u5bf9\u4e8e 375\u5bbd\u7684\u7f29\u653e\u6bd4\u4f8b\uff0c\u53ef\u6839\u636e\u81ea\u5df1\u9700\u8981\u4fee\u6539,\u4e00\u822c\u8bbe\u8ba1\u7a3f\u90fd\u662f\u5bbd750(\u56fe\u65b9\u4fbf\u53ef\u4ee5\u62ff\u5230\u8bbe\u8ba1\u56fe\u540e\u6539\u8fc7\u6765)\u3002\n  const scale = document.documentElement.clientWidth \/ 375\n  \/\/ \u8bbe\u7f6e\u9875\u9762\u6839\u8282\u70b9\u5b57\u4f53\u5927\u5c0f\uff08\u201cMath.min(scale, 2)\u201d \u6307\u6700\u9ad8\u653e\u5927\u6bd4\u4f8b\u4e3a2\uff0c\u53ef\u6839\u636e\u5b9e\u9645\u4e1a\u52a1\u9700\u6c42\u8c03\u6574\uff09\n  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'\n}\n\/\/ \u521d\u59cb\u5316\nsetRem()\n\/\/ \u6539\u53d8\u7a97\u53e3\u5927\u5c0f\u65f6\u91cd\u65b0\u8bbe\u7f6e rem\nwindow.onresize = function () {\n  console.log(\"\u6211\u6267\u884c\u4e86\")\n  setRem()\n}<\/code><\/pre>\n
\u5728 main.ts \u5f15\u5165\uff1a<\/p>\n
import \".\/utils\/rem\"<\/code><\/pre>\n
\u56db\u3001Axios \u4e0e\u8bf7\u6c42\u4ee3\u7406<\/h2>\n
\u5b89\u88c5<\/h3>\n
npm i -s axios<\/code><\/pre>\n
\u914d\u7f6e axios<\/h3>\n
src\/utils\/request.ts\uff1a<\/p>\n
import axios from \"axios\";\nconst service = axios.create({\n  baseURL,\n  timeout: 5000 \/\/ request timeout\n});\n\/\/ \u53d1\u8d77\u8bf7\u6c42\u4e4b\u524d\u7684\u62e6\u622a\u5668\nservice.interceptors.request.use(\n  config => {\n    \/\/ \u5982\u679c\u6709token \u5c31\u643a\u5e26tokon\n    const token = window.localStorage.getItem(\"accessToken\");\n    if (token) {\n      config.headers.common.Authorization = token;\n    }\n    return config;\n  },\n  error => Promise.reject(error)\n);\n\/\/ \u54cd\u5e94\u62e6\u622a\u5668\nservice.interceptors.response.use(\n  response => {\n    const res = response.data;\n\n    if (response.status !== 200) {\n      return Promise.reject(new Error(res.message || \"Error\"));\n    } else {\n      return res;\n    }\n  },\n  error => {\n    return Promise.reject(error);\n  }\n);\nexport default service;<\/code><\/pre>\n
\u4f7f\u7528<\/h3>\n
import request from \"..\/utils\/request\";\nrequest({url: \"\/profile \",method: \"get\"})\n.then((res)=>{\n  console.log(res)\n})<\/code><\/pre>\n
\u914d\u7f6e\u8bf7\u6c42\u4ee3\u7406<\/h3>\n
vite.config.ts\uff1a<\/p>\n
import { defineConfig } from 'vite'\nimport vue from '@vitejs\/plugin-vue'\nimport path from 'path';\n\n\/\/ https:\/\/vitejs.dev\/config\/\nexport default defineConfig({\n  plugins: [vue()],\n  base:\".\/\",\/\/\u6253\u5305\u8def\u5f84\n  resolve: {\n    alias:{\n      '@': path.resolve(__dirname, '.\/src')\/\/\u8bbe\u7f6e\u522b\u540d\n    }\n  },\n  server: {\n    port:4000,\/\/\u542f\u52a8\u7aef\u53e3\n    open: true,\n    proxy: {\n      \/\/ \u9009\u9879\u5199\u6cd5\n      '\/api': 'http:\/\/123.56.85.24:5000'\/\/\u4ee3\u7406\u7f51\u5740\n    },\n    cors:true\n  }\n\n})<\/code><\/pre>\n
\u4ee5\u4e0a\uff0c\u4e00\u4e2a\u6700\u57fa\u672c\u7684\u79fb\u52a8\u7aef\u5f00\u53d1\u914d\u7f6e\u5b8c\u6210\u3002<\/p>\n
\u4e94\u3001script setup \u4e0e v-bind<\/h2>\n
vite \u5bf9 script setup \u548c CSS \u91cc v-bind \u652f\u6301\u683c\u5916\u53cb\u597d\u3002<\/p>\n
\u6b63\u5e38\u5199\u6cd5<\/h3>\n
<script lang=\"ts\">\nimport { defineComponent } from \"vue\";\nimport { useRouter } from \"vue-router\";\nexport default defineComponent({\n  setup() {\n    const router = useRouter();\n    const goLogin = () => {\n      router.push(\"\/\");\n    };\n    return { goLogin };\n  },\n});\n<\/script><\/code><\/pre>\n
setup \u5199\u6cd5<\/h3>\n
<script lang=\"ts\" setup=\"props\">\nimport { useRouter } from \"vue-router\";\nconst router = useRouter();\nconst goLogin = () => {\n  router.push(\"\/\");\n};\n<\/script><\/code><\/pre>\n
\u662f\u4e0d\u662f\u7b80\u6d01\u4e86\u5f88\u591a\u3002CSS \u53d8\u91cf\u7ed1\u5b9a\u4e5f\u53ef\u4ee5\u76f4\u63a5 v-bind\uff1a<\/p>\n
<script lang=\"ts\" setup=\"props\">\nconst state = reactive({\n  color: \"#ccc\",\n});\n<\/script>\n<style >\n.text {\n  color: v-bind(\"state.color\");\n}\n<\/style><\/code><\/pre>\n
\u5c31\u8fd9\u4e48\u7b80\u5355\u3002<\/p>\n
\u4ee3\u7801\u4e0e\u9884\u89c8<\/h3>\n
\u7ebf\u4e0a\u9884\u89c8\uff1ahttp:\/\/123.56.85.24\/vite\/#\/<\/a><\/p>\n
\u4ee3\u7801\u5730\u5740\uff1agithub.com\/huoqingzhu\/vue3-vite-ts-Vant<\/p>\n
vitejs \u4e2d\u6587\u7f51\uff1ahttps:\/\/cn.vitejs.dev\/<\/a><\/p>\n
\n
\u4e00\u53e5\u8bdd\u603b\u7ed3\uff1avite \u4e00\u884c\u62c9\u8d77 Vue3+TS\uff1b\u79fb\u52a8\u7aef\u518d\u8865 vue-router@4\u3001vuex@next\u3001Vant \u6837\u5f0f\u300137.5 rem \u548c axios \u4ee3\u7406\uff0cscript setup \u80fd\u5c11\u5199\u4e00\u5c42 defineComponent\u3002<\/strong><\/p>\n<\/blockquote>\n<\/section>\n","protected":false},"excerpt":{"rendered":"
\u7528\u4e86 Vue3 \u5927\u534a\u5e74\uff0c\u9879\u76ee\u4e00\u76f4\u662f vue-cli \u57fa\u4e8e webpack \u642d\u7684\u3002\u521a\u597d\u6709\u4e2a\u79fb\u52a8\u7aef\u9700\u6c42\uff0c\u6539\u7528 vi […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[106,105],"tags":[205,206],"_links":{"self":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3121"}],"collection":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3121"}],"version-history":[{"count":2,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3121\/revisions"}],"predecessor-version":[{"id":3124,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=\/wp\/v2\/posts\/3121\/revisions\/3124"}],"wp:attachment":[{"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3121"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3121"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ai.zhousir.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3121"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}