{"id":577,"date":"2023-12-29T11:06:41","date_gmt":"2023-12-29T03:06:41","guid":{"rendered":"http:\/\/ericw.top\/?p=577"},"modified":"2024-01-02T09:24:47","modified_gmt":"2024-01-02T01:24:47","slug":"%e5%b7%a5%e7%a8%8b%e5%8c%96%e5%bc%80%e5%8f%91-%e8%84%9a%e6%89%8b%e6%9e%b6-vue-cli","status":"publish","type":"post","link":"http:\/\/ericw.top\/?p=577","title":{"rendered":"\u5de5\u7a0b\u5316\u5f00\u53d1 &#038; \u811a\u624b\u67b6 Vue CLI"},"content":{"rendered":"\n<h1 class=\"wp-block-heading\" id=\"toc-0\">\u5de5\u7a0b\u5316\u5f00\u53d1 &amp; \u811a\u624b\u67b6 Vue CLI<\/h1>\n\n\n\n<p><strong>\u5f00\u53d1Vue\u7684\u4e24\u79cd\u65b9\u5f0f\uff1a<\/strong><\/p>\n\n\n\n<p>1\u3001<strong>\u6838\u5fc3\u5305\u4f20\u7edf\u5f00\u53d1\u6a21\u5f0f\uff1a<\/strong>\u57fa\u4e8ehtml \/ css \/ js \u6587\u4ef6\uff0c\u76f4\u63a5\u5f15\u5165\u6838\u5fc3\u5305\uff0c\u5f00\u53d1Vue<\/p>\n\n\n\n<p>2\u3001<strong>\u5de5\u7a0b\u5316\u5f00\u53d1\u6a21\u5f0f<\/strong>\uff1a\u57fa\u4e8e\u6784\u5efa\u5de5\u5177 \uff08\u4f8b\u5982webpack\uff09\u7684\u73af\u5883\u4e2d\u5f00\u53d1Vue<\/p>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img decoding=\"async\" width=\"1024\" height=\"281\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/1703812952108-1024x281.png\" alt=\"\" class=\"wp-image-586\" style=\"width:841px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/1703812952108-1024x281.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/1703812952108-300x82.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/1703812952108-768x211.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2024\/01\/1703812952108.png 1499w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-1\">Vue CLI<\/h2>\n\n\n\n<p>Vue CLI \u662f\u5b98\u65b9\u63d0\u4f9b\u7684\u4e00\u4e2a<strong>\u5168\u5c40\u547d\u4ee4\u5de5\u5177<\/strong><\/p>\n\n\n\n<p>\u53ef\u4ee5\u5e2e\u52a9\u6211\u4eec<strong>\u5feb\u901f\u521b\u5efa<\/strong>\u5f00\u53d1Vue\u9879\u76ee\u7684<strong>\u6807\u51c6\u5316\u57fa\u7840\u67b6\u5b50<\/strong><\/p>\n\n\n\n<p><strong>\u597d\u5904\uff1a<\/strong> <\/p>\n\n\n\n<ol>\n<li> <span style=\"font-size: revert;\">\u5f00\u7bb1\u5373\u7528\uff0c\u96f6\u914d\u7f6e <\/span> <\/li>\n\n\n\n<li> <span style=\"font-size: revert;\">\u5185\u7f6e babel \u7b49\u5de5\u5177 <\/span> <\/li>\n\n\n\n<li> <span style=\"font-size: revert;\">\u6807\u51c6\u5316 <\/span> <\/li>\n<\/ol>\n\n\n\n<p><strong>\u4f7f\u7528\u6b65\u9aa4\uff1a<\/strong> <\/p>\n\n\n\n<ol>\n<li> <span style=\"font-size: revert;\">\u5168\u5c40\u5b89\u88c5 (\u4e00\u6b21) \uff1a<\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">yarn global add @vue\/cli<\/code><span style=\"font-size: revert;\"> \u6216 <\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">npm i @vue\/cli -g <\/code> <\/li>\n\n\n\n<li> <span style=\"font-size: revert;\">\u67e5\u770b Vue \u7248\u672c\uff1a<\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">vue --version<\/code><span style=\"font-size: revert;\"> <\/span> <\/li>\n\n\n\n<li> <span style=\"font-size: revert;\">\u521b\u5efa\u9879\u76ee\u67b6\u5b50\uff1a<\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">vue create project-name<\/code><span style=\"font-size: revert;\">\uff08\u9879\u76ee\u540d-\u4e0d\u80fd\u7528\u4e2d\u6587\uff09<\/span><p> \uff08\u5728\u54ea\u91cc\u6267\u884c\u547d\u4ee4\uff0c\u5c31\u4f1a\u5728\u54ea\u91cc\u521b\u5efa\u547d\u4ee4\uff09<\/p><\/li>\n\n\n\n<li> <span style=\"font-size: revert;\">\u542f\u52a8\u9879\u76ee\uff1a <\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">yarn serve<\/code><span style=\"font-size: revert;\"> \u6216 <\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">npm run serve<\/code><span style=\"font-size: revert;\">\uff08\u627e<\/span><code class=\"prettyprint\"  style=\"font-size: revert; background-color: rgb(240, 240, 241);\">package.json<\/code><span style=\"font-size: revert;\">\uff09<\/span> <\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818508983-140x300.png\" alt=\"\" style=\"width:196px;height:auto\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-2\">\u811a\u624b\u67b6\u6587\u4ef6\u4ecb\u7ecd<\/h2>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img decoding=\"async\" width=\"932\" height=\"488\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818649857.png\" alt=\"\" class=\"wp-image-580\" style=\"width:655px;height:auto\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818649857.png 932w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818649857-300x157.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818649857-768x402.png 768w\" sizes=\"(max-width: 932px) 100vw, 932px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-3\">\u9879\u76ee\u8fd0\u884c\u6d41\u7a0b<\/h2>\n\n\n\n<figure class=\"wp-block-image size-large\"><img decoding=\"async\" width=\"1024\" height=\"421\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818672846-1024x421.png\" alt=\"\" class=\"wp-image-581\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818672846-1024x421.png 1024w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818672846-300x123.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818672846-768x316.png 768w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818672846.png 1348w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-4\">\u7ec4\u4ef6\u5316\u5f00\u53d1<\/h2>\n\n\n\n<p><strong>\u7ec4\u4ef6\u5316\uff1a<\/strong>\u4e00\u4e2a\u9875\u9762\u53ef\u4ee5\u62c6\u5206\u6210\u4e00\u4e2a\u4e2a\u7ec4\u4ef6\uff0c\u6bcf\u4e2a\u7ec4\u4ef6\u6709\u7740\u81ea\u5df1\u72ec\u7acb\u7684\u7ed3\u6784\u3001\u6837\u5f0f\u3001\u884c\u4e3a\u3002 <\/p>\n\n\n\n<p><strong>\u597d\u5904\uff1a<\/strong>\u4fbf\u4e8e\u7ef4\u62a4\uff0c\u5229\u4e8e\u590d\u7528 \u2192 \u63d0\u5347\u5f00\u53d1\u6548\u7387\u3002 <\/p>\n\n\n\n<p><strong>\u7ec4\u4ef6\u5206\u7c7b\uff1a<\/strong>\u666e\u901a\u7ec4\u4ef6\u3001\u6839\u7ec4\u4ef6\u3002 <\/p>\n\n\n\n<p><strong>\u6839\u7ec4\u4ef6\uff1a<\/strong>\u6574\u4e2a\u5e94\u7528\u6700\u4e0a\u5c42\u7684\u7ec4\u4ef6\uff0c\u5305\u88f9\u6240\u6709\u666e\u901a\u5c0f\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<figure class=\"wp-block-image is-resized\"><img decoding=\"async\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818742104-300x282.png\" alt=\"\" style=\"width:485px;height:auto\"\/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"848\" height=\"502\" src=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818758803.png\" alt=\"\" class=\"wp-image-583\" srcset=\"http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818758803.png 848w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818758803-300x178.png 300w, http:\/\/ericw.top\/wp-content\/uploads\/2023\/12\/1703818758803-768x455.png 768w\" sizes=\"(max-width: 848px) 100vw, 848px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-5\">APP.vue \u6587\u4ef6\u7684\u7ec4\u6210<\/h2>\n\n\n\n<p><strong>\u4e09\u90e8\u5206\u7ec4\u6210\uff1a<\/strong> <\/p>\n\n\n\n<p>template\uff1a<strong>\u7ed3\u6784<\/strong> \uff08\u6709\u4e14\u53ea\u80fd\u4e00\u4e2a\u6839\u5143\u7d20\uff09 <\/p>\n\n\n\n<p>script: <strong>js\u903b\u8f91<\/strong> <\/p>\n\n\n\n<p>style\uff1a <strong>\u6837\u5f0f<\/strong> (\u53ef\u652f\u6301less\uff0c\u9700\u8981\u88c5\u5305) <\/p>\n\n\n\n<p><strong>3. \u8ba9\u7ec4\u4ef6\u652f\u6301 less<\/strong> <\/p>\n\n\n\n<p>style\u6807\u7b7e\uff0clang=\"less\" \u5f00\u542fless\u529f\u80fd <\/p>\n\n\n\n<p>\u88c5\u5305: yarn add less less-loader<\/p>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"toc-6\">\u666e\u901a\u7ec4\u5efa\u7684\u6ce8\u518c\u548c\u4f7f\u7528<\/h2>\n\n\n\n<p><strong>\u7ec4\u4ef6\u6ce8\u518c\u7684\u4e24\u79cd\u65b9\u5f0f\uff1a<\/strong> <\/p>\n\n\n\n<ol>\n<li> <strong style=\"font-size: revert;\">\u5c40\u90e8\u6ce8\u518c\uff1a\u53ea\u80fd\u5728\u6ce8\u518c\u7684\u7ec4\u4ef6\u5185\u4f7f\u7528<\/strong><span style=\"font-size: revert;\"> <\/span> <\/li>\n\n\n\n<li> <strong style=\"font-size: revert;\">\u5168\u5c40\u6ce8\u518c\uff1a\u6240\u6709\u7ec4\u4ef6\u5185\u90fd\u80fd\u4f7f\u7528<\/strong><span style=\"font-size: revert;\"> <\/span> <p>\u2460 \u521b\u5efa .vue \u6587\u4ef6 (\u4e09\u4e2a\u7ec4\u6210\u90e8\u5206) <\/p><p>\u2461 main.js \u4e2d\u8fdb\u884c\u5168\u5c40\u6ce8\u518c <\/p> <\/li>\n<\/ol>\n\n\n\n<pre class=\"wp-block-code\"><code class=\"prettyprint\" >\/\/ \u5bfc\u5165\u9700\u8981\u5168\u5c40\u6ce8\u518c\u7684\u7ec4\u4ef6\nimport HmButton from &#039;.\/components\/HmButton&#039;\n\/\/ \u8c03\u7528 Vue.component \u8fdb\u884c\u5168\u5c40\u6ce8\u518c\n\/\/ Vue.component(&#039;\u7ec4\u4ef6\u540d&#039;, \u7ec4\u4ef6\u5bf9\u8c61)\nVue.component(&#039;HmButton&#039;, HmButton)<\/code><\/pre>\n\n\n\n<p><strong>\u4f7f\u7528\uff1a<\/strong> <\/p>\n\n\n\n<p>\u25c6 \u5f53\u6210 html \u6807\u7b7e\u4f7f\u7528 <code class=\"prettyprint\" >&lt;\u7ec4\u4ef6\u540d&gt;&lt;\/\u7ec4\u4ef6\u540d&gt;<\/code> <\/p>\n\n\n\n<p><strong>\u6ce8\u610f:<\/strong>  <\/p>\n\n\n\n<p>\u25c6 \u7ec4\u4ef6\u540d\u89c4\u8303 \u2192 \u5927\u9a7c\u5cf0\u547d\u540d\u6cd5\uff0c\u5982\uff1aHmHeader <\/p>\n\n\n\n<p><strong>\u6280\u5de7\uff1a<\/strong> <\/p>\n\n\n\n<p>\u25c6 \u4e00\u822c\u90fd\u7528\u5c40\u90e8\u6ce8\u518c\uff0c\u5982\u679c\u53d1\u73b0\u786e\u5b9e\u662f\u901a\u7528\u7ec4\u4ef6\uff0c\u518d\u5b9a\u4e49\u5230\u5168\u5c40\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5de5\u7a0b\u5316\u5f00\u53d1 &amp; \u811a\u624b\u67b6 Vue CLI \u5f00\u53d1Vue\u7684\u4e24\u79cd\u65b9\u5f0f\uff1a 1\u3001\u6838\u5fc3\u5305\u4f20\u7edf\u5f00\u53d1\u6a21\u5f0f\uff1a\u57fa\u4e8ehtml  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":582,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[17,5],"tags":[],"_links":{"self":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/577"}],"collection":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=577"}],"version-history":[{"count":3,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/577\/revisions"}],"predecessor-version":[{"id":588,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/posts\/577\/revisions\/588"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=\/wp\/v2\/media\/582"}],"wp:attachment":[{"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=577"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=577"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/ericw.top\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=577"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}