![](\"https:\/\/i.yimenyun.net\/2023-03\/21\/15\/26985896549.jpg\")
<\/figure>\n<\/p>\n\u5177\u548c\u5e93\uff0c\u4f7f\u5f00\u53d1\u4eba\u5458\u80fd\u591f\u5feb\u901f\u6709\u6548\u5730\u6784\u5efa\u5e94\u7528\u7a0b\u5e8f\u3002\u5728\u672c\u6587\u4e2d\uff0c\u6211\u4eec\u5c06\u4ecb\u7ecd\u5982\u4f55\u4f7f\u7528Vue\u642d\u5efa\u4e00\u4e2aapp\u3002<\/p>\n
1. \u51c6\u5907\u5de5\u4f5c<\/p>\n
\u5728\u5f00\u59cb\u4e4b\u524d\uff0c\u60a8\u9700\u8981\u5b89\u88c5Vue CLI\u3002Vue CLI\u662f\u4e00\u4e2a\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u53ef\u5e2e\u52a9\u60a8\u5feb\u901f\u521b\u5efaVue\u9879\u76ee\uff0c\u5e76\u63d0\u4f9b\u4e86\u4e00\u4e9b\u6709\u7528\u7684\u5de5\u5177\u548c\u5e93\uff0c\u5982webpack\u548cbabel\u3002\u8981\u5b89\u88c5Vue CLI\uff0c\u8bf7\u6253\u5f00\u7ec8\u7aef\u5e76\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
“`<\/p>\n
npm install -g @vue\/cli<\/p>\n
“`<\/p>\n
2. \u521b\u5efa\u4e00\u4e2a\u65b0\u7684Vue\u9879\u76ee<\/p>\n
\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Vue\u9879\u76ee\u975e\u5e38\u7b80\u5355\u3002\u53ea\u9700\u6253\u5f00\u7ec8\u7aef\u5e76\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
“`<\/p>\n
vue create my-app<\/p>\n
“`<\/p>\n
\u5176\u4e2d\uff0c”my-app”\u662f\u60a8\u7684\u9879\u76ee\u540d\u79f0\u3002\u6b64\u547d\u4ee4\u5c06\u4e3a\u60a8\u521b\u5efa\u4e00\u4e2a\u65b0\u7684Vue\u9879\u76ee\uff0c\u5e76\u5728\u5176\u4e2d\u5b89\u88c5\u6240\u9700\u7684\u4f9d\u8d56\u9879\u548c\u5e93\u3002<\/p>\n
3. \u6dfb\u52a0\u79fb\u52a8\u7aef\u652f\u6301<\/p>\n
\u8981\u5728Vue\u9879\u76ee\u4e2d\u6dfb\u52a0\u79fb\u52a8\u7aef\u652f\u6301\uff0c\u60a8\u9700\u8981\u5b89\u88c5Vue\u7684\u79fb\u52a8\u7aef\u5e93\u3002\u5728\u7ec8\u7aef\u4e2d\uff0c\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
“`<\/p>\n
npm install vant -S<\/p>\n
“`<\/p>\n
\u8fd9\u5c06\u5b89\u88c5Vant\u5e93\u3002Vant\u662f\u4e00\u4e2a\u57fa\u4e8eVue\u7684\u79fb\u52a8\u7aefUI\u7ec4\u4ef6\u5e93\uff0c\u63d0\u4f9b\u4e86\u8bb8\u591a\u6709\u7528\u7684\u7ec4\u4ef6\uff0c\u5982\u6309\u94ae\uff0c\u6807\u7b7e\uff0c\u5217\u8868\u7b49\u7b49\u3002\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u60a8\u9700\u8981\u5728\u60a8\u7684Vue\u9879\u76ee\u4e2d\u5bfc\u5165Vant\u7ec4\u4ef6\u3002\u8981\u505a\u5230\u8fd9\u4e00\u70b9\uff0c\u8bf7\u6253\u5f00\u60a8\u7684main.js\u6587\u4ef6\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a<\/p>\n
“`<\/p>\n
import Vue from ‘vue’<\/p>\n
import Vant from ‘vant’<\/p>\n
import ‘vant\/lib\/index.css’<\/p>\n
Vue.use(Vant)<\/p>\n
“`<\/p>\n
\u8fd9\u5c06\u5bfc\u5165Vant\u7ec4\u4ef6\uff0c\u5e76\u5728\u60a8\u7684Vue\u9879\u76ee\u4e2d\u542f\u7528\u5b83\u4eec\u3002<\/p>\n
4. \u521b\u5efa\u9875\u9762<\/p>\n
\u73b0\u5728\uff0c\u60a8\u5df2\u7ecf\u51c6\u5907\u597d\u5f00\u59cb\u521b\u5efa\u60a8\u7684app\u9875\u9762\u4e86\u3002\u8981\u521b\u5efa\u4e00\u4e2a\u65b0\u9875\u9762\uff0c\u8bf7\u5728\u60a8\u7684Vue\u9879\u76ee\u4e2d\u521b\u5efa\u4e00\u4e2a\u65b0\u7684.vue\u6587\u4ef6\u3002\u4f8b\u5982\uff0c\u5982\u679c\u60a8\u8981\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a”home”\u7684\u9875\u9762\uff0c\u8bf7\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a”Home.vue”\u7684\u6587\u4ef6\u3002<\/p>\n
\u5728\u60a8\u7684.vue\u6587\u4ef6\u4e2d\uff0c\u60a8\u53ef\u4ee5\u4f7f\u7528Vue\u7684\u6a21\u677f\u8bed\u6cd5\u6765\u7f16\u5199HTML\u548cCSS\u4ee3\u7801\u3002\u4f8b\u5982\uff0c\u4ee5\u4e0b\u4ee3\u7801\u4f1a\u5728\u60a8\u7684\u9875\u9762\u4e0a\u663e\u793a\u4e00\u4e2a\u6807\u9898\u548c\u4e00\u4e9b\u6587\u672c\uff1a<\/p>\n
“`<\/p>\n
\n
\n
\u6b22\u8fce\u6765\u5230\u6211\u7684app<\/p>\n
\u8fd9\u662f\u6211\u7684\u7b2c\u4e00\u4e2aVue app\u9875\u9762<\/p>\n<\/p>\n<\/p>\n
h1 {<\/p>\n
font-size: 24px;<\/p>\n
color: #333;<\/p>\n
}<\/p>\n
p {<\/p>\n
font-size: 16px;<\/p>\n
color: #666;<\/p>\n
}<\/p>\n<\/p>\n
“`<\/p>\n
5. \u521b\u5efa\u8def\u7531<\/p>\n
\u8981\u5728\u60a8\u7684Vue app\u4e2d\u5bfc\u822a\u5230\u4e0d\u540c\u7684\u9875\u9762\uff0c\u60a8\u9700\u8981\u4f7f\u7528Vue\u7684\u8def\u7531\u5668\u3002\u5728\u7ec8\u7aef\u4e2d\uff0c\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\u6765\u5b89\u88c5Vue\u8def\u7531\u5668\uff1a<\/p>\n
“`<\/p>\n
npm install vue-router -S<\/p>\n
“`<\/p>\n
\u5b89\u88c5\u5b8c\u6210\u540e\uff0c\u60a8\u9700\u8981\u5728\u60a8\u7684Vue\u9879\u76ee\u4e2d\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u8def\u7531\u5668\u3002\u8981\u505a\u5230\u8fd9\u4e00\u70b9\uff0c\u8bf7\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a”router.js”\u7684\u65b0\u6587\u4ef6\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a<\/p>\n
“`<\/p>\n
import Vue from ‘vue’<\/p>\n
import Router from ‘vue-router’<\/p>\n
Vue.use(Router)<\/p>\n
export default new Router({<\/p>\n
routes: [<\/p>\n
{<\/p>\n
path: ‘\/’,<\/p>\n
name: ‘home’,<\/p>\n
component: () => import(‘.\/views\/Home.vue’)<\/p>\n
}<\/p>\n
]<\/p>\n
})<\/p>\n
“`<\/p>\n
\u8fd9\u5c06\u521b\u5efa\u4e00\u4e2a\u65b0\u7684\u8def\u7531\u5668\uff0c\u5e76\u5b9a\u4e49\u4e00\u4e2a\u540d\u4e3a”home”\u7684\u8def\u7531\u3002\u8be5\u8def\u7531\u5c06\u6307\u5411\u60a8\u521a\u521a\u521b\u5efa\u7684Home.vue\u9875\u9762\u3002\u8981\u5728\u60a8\u7684Vue\u9879\u76ee\u4e2d\u4f7f\u7528\u6b64\u8def\u7531\u5668\uff0c\u8bf7\u6253\u5f00\u60a8\u7684main.js\u6587\u4ef6\uff0c\u5e76\u6dfb\u52a0\u4ee5\u4e0b\u4ee3\u7801\uff1a<\/p>\n
“`<\/p>\n
import Vue from ‘vue’<\/p>\n
import App from ‘.\/App.vue’<\/p>\n
import router from ‘.\/router’<\/p>\n
Vue.config.productionTip = false<\/p>\n
new Vue({<\/p>\n
router,<\/p>\n
render: h => h(App),<\/p>\n
}).$mount(‘#app’)<\/p>\n
“`<\/p>\n
6. \u8fd0\u884c\u60a8\u7684Vue app<\/p>\n
\u73b0\u5728\uff0c\u60a8\u5df2\u7ecf\u51c6\u5907\u597d\u8fd0\u884c\u60a8\u7684Vue app\u4e86\u3002\u8981\u505a\u5230\u8fd9\u4e00\u70b9\uff0c\u8bf7\u5728\u7ec8\u7aef\u4e2d\u8f93\u5165\u4ee5\u4e0b\u547d\u4ee4\uff1a<\/p>\n
“`<\/p>\n
npm run serve<\/p>\n
“`<\/p>\n
\u8fd9\u5c06\u542f\u52a8\u4e00\u4e2a\u672c\u5730\u5f00\u53d1\u670d\u52a1\u5668\uff0c\u5e76\u5728\u60a8\u7684\u6d4f\u89c8\u5668\u4e2d\u6253\u5f00\u60a8\u7684Vue app\u3002\u73b0\u5728\uff0c\u60a8\u53ef\u4ee5\u5bfc\u822a\u5230\u60a8\u7684app\u7684\u4e3b\u9875\uff0c\u5e76\u67e5\u770b\u60a8\u521a\u5b66\u4e60\u642d\u5efaapp<\/a>\u521a\u521b\u5efa\u7684\u9875\u9762\u3002<\/p>\n \u603b\u7ed3<\/p>\n