{"id":84,"date":"2024-12-01T09:47:01","date_gmt":"2024-12-01T01:47:01","guid":{"rendered":"https:\/\/note.yuncrown.com\/?p=84"},"modified":"2025-04-19T11:34:04","modified_gmt":"2025-04-19T03:34:04","slug":"vue","status":"publish","type":"post","link":"https:\/\/note.yuncrown.com\/index.php\/2024\/12\/01\/vue\/","title":{"rendered":"VUE"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><strong>\u5b89\u88c5<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># \u5b89\u88c5vue-cli\uff08\u5168\u5c40\u5b89\u88c5\uff0c\u53ea\u5b89\u88c5\u4e00\u6b21\uff09\nnpm install -g @vue\/cli\n# OR\nyarn global add @vue\/cli\n\n# \u5b89\u88c5\u9879\u76ee\n# macos\u4fee\u6539\u6743\u9650\n# sudo chown -R 501:20 \"\/Users\/chen\/.npm\"\n(sudo) vue create my-project\n<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5b89\u88c5web3<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>sudo npm install web3<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5feb\u6377\u751f\u6210vue\u6a21\u677f<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;v \u6309Tab\u952e<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5b89\u88c5vue-router<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code># \u4f7f\u7528vue2\u65f6\uff0cvue-router\u4f7f\u75283\u7248\u672c\nsudo npm install vue-router@3\n# main.js\u6587\u4ef6\u6ce8\u518c\u8def\u7531\nimport Vue from 'vue'\nimport App from '.\/App.vue'\nimport VueRouter from 'vue-router'\nimport router from '.\/router'\n\nVue.config.productionTip = false\nVue.use(VueRouter)\n\nnew Vue({\n  render: h =&gt; h(App),\n  router: router\n}).$mount('#app')\n\n<strong>\u4f7f\u7528vue-router<\/strong>\n\nsrc\u76ee\u5f55\u4e0b\u521b\u5efarouter\u6587\u4ef6\u5939\uff0c\u521b\u5efaindex.js\u6587\u4ef6<\/code><\/pre>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/\u8be5\u6587\u4ef6\u4e13\u95e8\u7528\u4e8e\u521b\u5efa\u6574\u4e2a\u5e94\u7528\u7684\u8def\u7531\u5668\n\nimport VueRouter from 'vue-router'\n\nimport Home from '@\/components\/Home.vue'\nimport Token from '..\/pages\/Token.vue'\nimport Swap from '..\/pages\/Swap.vue'\n\n\/\/\u521b\u5efa\u5e76\u66b4\u9732\u4e00\u4e2a\u8def\u7531\u5668\nexport default new VueRouter({\n    routes: &#91;\n        {\n            path: '\/',\n            component: Home, \/\/ Home.vue\n        }\n        ,{\n            path: '\/token',\n            component: Token,\n        }\n        ,{\n            path: '\/token',\n            component: Swap,\n        }\n    ]\n})<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">App.vue\u6587\u4ef6\uff1a<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>&lt;template&gt;\n  &lt;div id=\"app\"&gt;\n    <strong>&lt;router-view&gt;&lt;\/router-view&gt;<\/strong>\n  &lt;\/div&gt;\n&lt;\/template&gt;\n\n&lt;script&gt;\n\/\/ import HelloWorld from '.\/components\/HelloWorld.vue'\n\nexport default {\n  name: 'App',\n  \/\/ components: {\n  \/\/   HelloWorld\n  \/\/ }\n}\n&lt;\/script&gt;<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5b89\u88c5axios<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install axios --save<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>\u5b89\u88c5element-ui<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>npm install element-ui -S<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">\u4f7f\u7528<strong>element-ui<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/\/main.js\u52a0\u5165\u4ee5\u4e0b\u4ee3\u7801\nimport ElementUI from 'element-ui'\nimport 'element-ui\/lib\/theme-chalk\/index.css'\n\nVue.use(ElementUI)<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5 \u5b89\u88c5web3 \u5feb\u6377\u751f\u6210vue\u6a21\u677f \u5b89\u88c5vue-router App.vue\u6587\u4ef6\uff1a \u5b89\u88c5axios \u5b89\u88c5e [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[11,12],"class_list":["post-84","post","type-post","status-publish","format-standard","hentry","category-6","tag-11","tag-12"],"_links":{"self":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts\/84","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/comments?post=84"}],"version-history":[{"count":16,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions"}],"predecessor-version":[{"id":139,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/posts\/84\/revisions\/139"}],"wp:attachment":[{"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/media?parent=84"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/categories?post=84"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/note.yuncrown.com\/index.php\/wp-json\/wp\/v2\/tags?post=84"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}