{"id":4731,"date":"2022-03-27T20:19:29","date_gmt":"2022-03-27T12:19:29","guid":{"rendered":"https:\/\/egonlin.com\/?p=4731"},"modified":"2022-03-27T20:19:29","modified_gmt":"2022-03-27T12:19:29","slug":"%e7%ac%ac%e4%ba%94%e8%8a%82%ef%bc%9avue%e9%a1%b9%e7%9b%ae%e6%90%ad%e5%bb%ba","status":"publish","type":"post","link":"https:\/\/egonlin.com\/?p=4731","title":{"rendered":"\u7b2c\u4e94\u8282\uff1aVue\u9879\u76ee\u642d\u5efa"},"content":{"rendered":"<h1>Vue-CLI \u9879\u76ee\u642d\u5efa<\/h1>\n<h2>1\u3001\u73af\u5883\u642d\u5efa<\/h2>\n<ul>\n<li>\u5b89\u88c5node<\/li>\n<\/ul>\n<pre><code>\u5b98\u7f51\u4e0b\u8f7d\u5b89\u88c5\u5305\uff0c\u50bb\u74dc\u5f0f\u5b89\u88c5\uff1ahttps:\/\/nodejs.org\/zh-cn\/<\/code><\/pre>\n<ul>\n<li>\u5b89\u88c5cnpm<\/li>\n<\/ul>\n<pre><code>npm install -g cnpm --registry=https:\/\/registry.npm.taobao.org<\/code><\/pre>\n<ul>\n<li>\u5b89\u88c5\u811a\u624b\u67b6<\/li>\n<\/ul>\n<pre><code>cnpm install -g @vue\/cli<\/code><\/pre>\n<ul>\n<li>\u6e05\u7a7a\u7f13\u5b58\u5904\u7406<\/li>\n<\/ul>\n<pre><code>npm cache clean --force<\/code><\/pre>\n<h2>2\u3001\u9879\u76ee\u7684\u521b\u5efa<\/h2>\n<ul>\n<li>\u521b\u5efa\u9879\u76ee<\/li>\n<\/ul>\n<pre><code class=\"language-js\">vue create \u9879\u76ee\u540d\n\/\/ \u8981\u63d0\u524d\u8fdb\u5165\u76ee\u6807\u76ee\u5f55(\u9879\u76ee\u5e94\u8be5\u521b\u5efa\u5728\u54ea\u4e2a\u76ee\u5f55\u4e0b)\n\/\/ \u9009\u62e9\u81ea\u5b9a\u4e49\u65b9\u5f0f\u521b\u5efa\u9879\u76ee\uff0c\u9009\u53d6Router, Vuex\u63d2\u4ef6<\/code><\/pre>\n<ul>\n<li>\u542f\u52a8\/\u505c\u6b62\u9879\u76ee<\/li>\n<\/ul>\n<pre><code class=\"language-js\">npm run serve \/ ctrl+c\n\/\/ \u8981\u63d0\u524d\u8fdb\u5165\u9879\u76ee\u6839\u76ee\u5f55<\/code><\/pre>\n<ul>\n<li>\u6253\u5305\u9879\u76ee<\/li>\n<\/ul>\n<pre><code class=\"language-js\">npm run build\n\/\/ \u8981\u5728\u9879\u76ee\u6839\u76ee\u5f55\u4e0b\u8fdb\u884c\u6253\u5305\u64cd\u4f5c<\/code><\/pre>\n<h2>3\u3001\u8ba4\u8bc6\u9879\u76ee<\/h2>\n<ul>\n<li>\u9879\u76ee\u76ee\u5f55<\/li>\n<\/ul>\n<pre><code>dist: \u6253\u5305\u7684\u9879\u76ee\u76ee\u5f55(\u6253\u5305\u540e\u4f1a\u751f\u6210)\nnode_modules: \u9879\u76ee\u4f9d\u8d56\npublic: \u5171\u7528\u8d44\u6e90\nsrc: \u9879\u76ee\u76ee\u6807,\u4e66\u5199\u4ee3\u7801\u7684\u5730\u65b9\n    -- assets:\u8d44\u6e90\n    -- components:\u7ec4\u4ef6\n    -- views:\u89c6\u56fe\u7ec4\u4ef6\n    -- App.vue:\u6839\u7ec4\u4ef6\n    -- main.js: \u5165\u53e3js\n    -- router.js: \u8def\u7531\u6587\u4ef6\n    -- store.js: \u72b6\u6001\u5e93\u6587\u4ef6\nvue.config.js: \u9879\u76ee\u914d\u7f6e\u6587\u4ef6(\u6ca1\u6709\u53ef\u4ee5\u81ea\u5df1\u65b0\u5efa)<\/code><\/pre>\n<ul>\n<li>\u914d\u7f6e\u6587\u4ef6\uff1avue.config.js<\/li>\n<\/ul>\n<pre><code class=\"language-typescript\">module.exports={\n    devServer: {\n        port: 8888\n    }\n}\n\/\/ \u4fee\u6539\u7aef\u53e3,\u9009\u505a<\/code><\/pre>\n<ul>\n<li>main.js<\/li>\n<\/ul>\n<pre><code class=\"language-js\">new Vue({\n    el: &quot;#app&quot;,\n    router: router,\n    store: store,\n    render: function (h) {\n        return h(App)\n    }\n})<\/code><\/pre>\n<ul>\n<li>.vue\u6587\u4ef6<\/li>\n<\/ul>\n<pre><code class=\"language-html\">&lt;template&gt;\n    &lt;!-- \u6a21\u677f\u533a\u57df --&gt;\n&lt;\/template&gt;\n&lt;script&gt;\n    \/\/ \u903b\u8f91\u4ee3\u7801\u533a\u57df\n    \/\/ \u8be5\u8bed\u6cd5\u548cscript\u7ed1\u5b9a\u51fa\u73b0\n    export default {\n\n    }\n&lt;\/script&gt;\n&lt;style scoped&gt;\n    \/* \u6837\u5f0f\u533a\u57df *\/\n    \/* scoped\u8868\u793a\u8fd9\u91cc\u7684\u6837\u5f0f\u53ea\u9002\u7528\u4e8e\u7ec4\u4ef6\u5185\u90e8, scoped\u4e0estyle\u7ed1\u5b9a\u51fa\u73b0 *\/\n&lt;\/style&gt;<\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"<p>Vue-CLI \u9879\u76ee\u642d\u5efa 1\u3001\u73af\u5883\u642d\u5efa \u5b89\u88c5node \u5b98\u7f51\u4e0b\u8f7d\u5b89\u88c5\u5305\uff0c\u50bb\u74dc\u5f0f\u5b89\u88c5\uff1ahttps:\/\/nodejs [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[361,362],"tags":[],"_links":{"self":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4731"}],"collection":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4731"}],"version-history":[{"count":0,"href":"https:\/\/egonlin.com\/index.php?rest_route=\/wp\/v2\/posts\/4731\/revisions"}],"wp:attachment":[{"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4731"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4731"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/egonlin.com\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4731"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}