{"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":"2021-03-19T08:58:28","modified_gmt":"2021-03-19T00:58:28","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":"<h2>\u00a0<a href=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/03\/image-20210319085246646.png\" rel=\"fancybox\"><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-3123\" src=\"https:\/\/ai.zhousir.top\/wp-content\/uploads\/2021\/03\/image-20210319085246646.png\" alt=\"image-20210319085246646\" width=\"654\" height=\"275\" \/><\/a><\/h2>\n<h3>\u7528\u4e86vue3\u5927\u534a\u5e74\u4e86\uff0c\u4e00\u76f4\u90fd\u662f\u7528vue cli \u57fa\u4e8ewebpack\u6765\u642d\u5efa\u7684\u9879\u76ee\uff0c\u521a\u597d\u6709\u4e2a\u79fb\u52a8\u7aef\u7684\u9879\u76ee\uff0c\u6211\u60f3\u7528vite\u7248\u672c\u7684vue3\u6765\u505a\uff0c\u8fd9\u91cc\u8bb0\u5f55\u4e00\u4e0b\u9879\u76ee\u642d\u5efa\u7684\u8fc7\u7a0b<\/h3>\n<h3>\u4e00.\u6d89\u53ca\u6280\u672f\u70b9<\/h3>\n<ul>\n<li>vite\u7248\u672c<\/li>\n<li>vue3<\/li>\n<li>ts<\/li>\n<li>\u96c6\u6210\u8def\u7531<\/li>\n<li>\u96c6\u6210vuex<\/li>\n<li>\u96c6\u6210axios<\/li>\n<li>\u914d\u7f6eVant3<\/li>\n<li>\u79fb\u52a8\u7aef\u9002\u914d<\/li>\n<li>\u8bf7\u6c42\u4ee3\u7406<\/li>\n<\/ul>\n<h3>\u4e8c.\u6b65\u9aa4<\/h3>\n<blockquote><p>vite+ts+vue3\u53ea\u9700\u8981\u4e00\u884c\u547d\u4ee4<\/p><\/blockquote>\n<pre><code class=\"language-javascript\" lang=\"javascript\">npm init @vitejs\/app my-vue-app --template vue-ts\r\n<\/code><\/pre>\n<h3>\u914d\u7f6e\u8def\u7531<\/h3>\n<pre><code class=\"language-javascript\" lang=\"javascript\">npm install vue-router@4 --save\r\n<\/code><\/pre>\n<blockquote><p>\u5728src\u4e0b\u65b0\u5efarouter\u76ee\u5f55\uff0c\u65b0\u5efaindex.ts\u6587\u4ef6<\/p><\/blockquote>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import { createRouter, createWebHashHistory, RouteRecordRaw } from \"vue-router\";\r\nconst routes: Array&lt;RouteRecordRaw&gt; = [\r\n  {\r\n    path: \"\/\",\r\n    name: \"Home\",\r\n    meta: {\r\n      title: \"\u9996\u9875\",\r\n      keepAlive: true\r\n    },\r\n    component: () =&gt; import(\"..\/views\/Home\/index.vue\"),\r\n  },\r\n  {\r\n    path: \"\/login\",\r\n    name: \"Login\",\r\n    meta: {\r\n      title: \"\u767b\u5f55\",\r\n      keepAlive: true\r\n    },\r\n    component: () =&gt; import(\"..\/views\/Login\/index.vue\"),\r\n  },\r\n];\r\nconst router = createRouter({\r\n  history: createWebHashHistory(),\r\n  routes\r\n});\r\nexport default router;\r\n<\/code><\/pre>\n<p>\u5728main.ts\u6302\u8f7d\u8def\u7531<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import { createApp } from 'vue'\r\nimport App from '.\/App.vue'\r\nimport router from \".\/router\";createApp(App)\r\n.use(router)\r\n.mount('#app')\r\n<\/code><\/pre>\n<h3>\u914d\u7f6e\u6570\u636e\u4e2d\u5fc3vuex\uff084.x\uff09<\/h3>\n<h4>\u5b89\u88c5<\/h4>\n<pre><code class=\"language-javascript\" lang=\"javascript\">npm i vuex@next --save\r\n<\/code><\/pre>\n<h4>\u914d\u7f6e<\/h4>\n<p>\u5728src\u4e0b\u521b\u5efastore\u76ee\u5f55\uff0c\u5e76\u5728store\u4e0b\u521b\u5efaindex.ts<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import { createStore } from \"vuex\";\r\nexport default createStore({\r\n  state: {\r\n    listData:{1:10},\r\n    num:10\r\n  },\r\n  mutations: {\r\n    setData(state,value){\r\n        state.listData=value\r\n    },\r\n    addNum(state){\r\n      state.num=state.num+10\r\n    }\r\n  },\r\n  actions: {\r\n    setData(context,value){\r\n      context.commit('setData',value)\r\n    },\r\n  },\r\n  modules: {}\r\n});\r\n<\/code><\/pre>\n<h4>\u6302\u8f7d<\/h4>\n<p>\u5728main.ts\u6302\u8f7d\u6570\u636e\u4e2d\u5fc3<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import { createApp } from 'vue'\r\nimport App from '.\/App.vue'\r\nimport router from \".\/router\";\r\nimport store from \".\/store\";\r\ncreateApp(App)\r\n.use(router)\r\n.use(store)\r\n.mount('#app')\r\n<\/code><\/pre>\n<h3>Vant3<\/h3>\n<h4>\u5b89\u88c5<\/h4>\n<pre><code>npm i vant@next -S\r\n<\/code><\/pre>\n<blockquote><p>vite\u7248\u672c\u4e0d\u9700\u8981\u914d\u7f6e\u7ec4\u4ef6\u7684\u6309\u9700\u52a0\u8f7d\uff0c\u56e0\u4e3aVant 3.0 \u5185\u90e8\u6240\u6709\u6a21\u5757\u90fd\u662f\u57fa\u4e8e ESM \u7f16\u5199\u7684\uff0c\u5929\u7136\u5177\u5907\u6309\u9700\u5f15\u5165\u7684\u80fd\u529b\uff0c\u4f46\u662f\u6837\u5f0f\u5fc5\u987b\u5168\u90e8\u5f15\u5165137.2k<\/p><\/blockquote>\n<p>\u5728main.ts\u5168\u5c40\u5f15\u5165\u6837\u5f0f<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import { createApp } from 'vue'\r\nimport App from '.\/App.vue'\r\nimport router from \".\/router\";\r\nimport store from \".\/store\";\r\nimport 'vant\/lib\/index.css'; \/\/ \u5168\u5c40\u5f15\u5165\u6837\u5f0f\r\ncreateApp(App)\r\n.use(router)\r\n.use(store)\r\n.use(ant)\r\n.mount('#app')\r\n<\/code><\/pre>\n<h3>\u79fb\u52a8\u7aef\u9002\u914d<\/h3>\n<p>\u5b89\u88c5postcss-pxtorem<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">npm install postcss-pxtorem -D\r\n<\/code><\/pre>\n<p>\u5728\u6839\u76ee\u5f55\u4e0b\u521b\u5efapostcss.config.js<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">module.exports = {\r\n  \"plugins\": {\r\n    \"postcss-pxtorem\": {\r\n      rootValue: 37.5, \r\n      \/\/ Vant \u5b98\u65b9\u6839\u5b57\u4f53\u5927\u5c0f\u662f 37.5\r\n      propList: ['*'],\r\n      selectorBlackList: ['.norem'] \r\n      \/\/ \u8fc7\u6ee4\u6389.norem-\u5f00\u5934\u7684class\uff0c\u4e0d\u8fdb\u884crem\u8f6c\u6362\r\n    }\r\n  }\r\n}\r\n<\/code><\/pre>\n<p>\u5728\u6839\u76ee\u5f55src\u4e2d\u65b0\u5efautil\u76ee\u5f55\u4e0b\u65b0\u5efarem.ts\u7b49\u6bd4\u9002\u914d\u6587\u4ef6<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">\/\/ rem\u7b49\u6bd4\u9002\u914d\u914d\u7f6e\u6587\u4ef6\r\n\/\/ \u57fa\u51c6\u5927\u5c0f\r\nconst baseSize = 37.5 \r\n\/\/ \u6ce8\u610f\u6b64\u503c\u8981\u4e0e postcss.config.js \u6587\u4ef6\u4e2d\u7684 rootValue\u4fdd\u6301\u4e00\u81f4\r\n\/\/ \u8bbe\u7f6e rem \u51fd\u6570\r\nfunction setRem () {\r\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\r\n  const scale = document.documentElement.clientWidth \/ 375\r\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\r\n  document.documentElement.style.fontSize = baseSize * Math.min(scale, 2) + 'px'\r\n}\r\n\/\/ \u521d\u59cb\u5316\r\nsetRem()\r\n\/\/ \u6539\u53d8\u7a97\u53e3\u5927\u5c0f\u65f6\u91cd\u65b0\u8bbe\u7f6e rem\r\nwindow.onresize = function () {\r\n  console.log(\"\u6211\u6267\u884c\u4e86\")\r\n  setRem()\r\n}\r\n<\/code><\/pre>\n<p>\u5728mian.ts\u5f15\u5165<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import \".\/utils\/rem\"\r\n<\/code><\/pre>\n<h3>\u914d\u7f6e\u7f51\u7edc\u8bf7\u6c42axios<\/h3>\n<h3>\u5b89\u88c5<\/h3>\n<pre><code class=\"language-javascript\" lang=\"javascript\">npm i -s axios\r\n<\/code><\/pre>\n<h3>\u914d\u7f6eaxios<\/h3>\n<p>\u5728src\u521b\u5efautils\u6587\u4ef6\u5939,\u5e76\u5728utils\u4e0b\u521b\u5efarequest.ts<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import axios from \"axios\";\r\nconst service = axios.create({\r\n  baseURL,\r\n  timeout: 5000 \/\/ request timeout\r\n});\r\n\/\/ \u53d1\u8d77\u8bf7\u6c42\u4e4b\u524d\u7684\u62e6\u622a\u5668\r\nservice.interceptors.request.use(\r\n  config =&gt; {\r\n    \/\/ \u5982\u679c\u6709token \u5c31\u643a\u5e26tokon\r\n    const token = window.localStorage.getItem(\"accessToken\");\r\n    if (token) {\r\n      config.headers.common.Authorization = token;\r\n    }\r\n    return config;\r\n  },\r\n  error =&gt; Promise.reject(error)\r\n);\r\n\/\/ \u54cd\u5e94\u62e6\u622a\u5668\r\nservice.interceptors.response.use(\r\n  response =&gt; {\r\n    const res = response.data;\r\n\r\n    if (response.status !== 200) {\r\n      return Promise.reject(new Error(res.message || \"Error\"));\r\n    } else {\r\n      return res;\r\n    }\r\n  },\r\n  error =&gt; {\r\n    return Promise.reject(error);\r\n  }\r\n);\r\nexport default service;\r\n<\/code><\/pre>\n<h3>\u4f7f\u7528<\/h3>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import request from \"..\/utils\/request\";\r\nrequest({url: \"\/profile \",method: \"get\"})\r\n.then((res)=&gt;{\r\n  console.log(res)\r\n})\r\n<\/code><\/pre>\n<h3>\u914d\u7f6e\u8bf7\u6c42\u4ee3\u7406<\/h3>\n<p>vite.config.ts<\/p>\n<pre><code class=\"language-javascript\" lang=\"javascript\">import { defineConfig } from 'vite'\r\nimport vue from '@vitejs\/plugin-vue'\r\nimport path from 'path';\r\n\r\n\/\/ https:\/\/vitejs.dev\/config\/\r\nexport default defineConfig({\r\n  plugins: [vue()],\r\n  base:\".\/\",\/\/\u6253\u5305\u8def\u5f84\r\n  resolve: {\r\n    alias:{\r\n      '@': path.resolve(__dirname, '.\/src')\/\/\u8bbe\u7f6e\u522b\u540d\r\n    }\r\n  },\r\n  server: {\r\n    port:4000,\/\/\u542f\u52a8\u7aef\u53e3\r\n    open: true,\r\n    proxy: {\r\n      \/\/ \u9009\u9879\u5199\u6cd5\r\n      '\/api': 'http:\/\/123.56.85.24:5000'\/\/\u4ee3\u7406\u7f51\u5740\r\n    },\r\n    cors:true\r\n  }\r\n\r\n})\r\n<\/code><\/pre>\n<p>\u4ee5\u4e0a\uff0c\u4e00\u4e2a\u6700\u57fa\u672c\u7684\u79fb\u52a8\u7aef\u5f00\u53d1\u914d\u7f6e\u5b8c\u6210\u3002<\/p>\n<h3>\u4e09. vite\u5bf9<code>\u548c<\/code>\u7684\u652f\u6301\u683c\u5916\u53cb\u597d<\/h3>\n<h4>\u6b63\u5e38\u5199\u6cd5<\/h4>\n<pre><code class=\"language-javascript\" lang=\"javascript\">&lt;script lang=\"ts\"&gt;\r\nimport { defineComponent } from \"vue\";\r\nimport { useRouter } from \"vue-router\";\r\nexport default defineComponent({\r\n  setup() {\r\n    const router = useRouter();\r\n    const goLogin = () =&gt; {\r\n      router.push(\"\/\");\r\n    };\r\n    return { goLogin };\r\n  },\r\n});\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<h4>\u5199\u6cd5<\/h4>\n<pre><code class=\"language-javascript\" lang=\"javascript\">&lt;script lang=\"ts\" setup=\"props\"&gt;\r\nimport { useRouter } from \"vue-router\";\r\nconst router = useRouter();\r\nconst goLogin = () =&gt; {\r\n  router.push(\"\/\");\r\n};\r\n&lt;\/script&gt;\r\n<\/code><\/pre>\n<blockquote><p>\u662f\u4e0d\u662f\u7b80\u6d01\u4e86\u5f88\u591a<\/p><\/blockquote>\n<h3>\u5982\u4f55\u7528\uff1f<\/h3>\n<pre><code class=\"language-javascript\" lang=\"javascript\">&lt;script lang=\"ts\" setup=\"props\"&gt;\r\nconst state = reactive({\r\n  color: \"#ccc\",\r\n});\r\n&lt;\/script&gt;\r\n&lt;style &gt;\r\n.text {\r\n  color: v-bind(\"state.color\");\r\n}\r\n&lt;\/style&gt;\r\n<\/code><\/pre>\n<p>\u5c31\u8fd9\u4e48\u7b80\u5355\uff01<\/p>\n<h3>\u4ee3\u7801<\/h3>\n<p>\u7ebf\u4e0a\u9884\u89c8\uff1a<a class=\"url\" href=\"http:\/\/123.56.85.24\/vite\/#\/\" target=\"_blank\">http:\/\/123.56.85.24\/vite\/#\/<\/a><\/p>\n<p>\u4ee3\u7801\u5730\u5740\uff1agithub.com\/huoqingzhu\/vue3-vite-ts-Vant<\/p>\n<p>vitejs\u4e2d\u6587\u7f51:<a class=\"url\" href=\"https:\/\/cn.vitejs.dev\/\" target=\"_blank\">https:\/\/cn.vitejs.dev\/<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u00a0 \u7528\u4e86vue3\u5927\u534a\u5e74\u4e86\uff0c\u4e00\u76f4\u90fd\u662f\u7528vue cli \u57fa\u4e8ewebpack\u6765\u642d\u5efa\u7684\u9879\u76ee\uff0c\u521a\u597d\u6709\u4e2a\u79fb\u52a8\u7aef\u7684\u9879\u76ee\uff0c\u6211\u60f3 [&hellip;]<\/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":[],"_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}]}}