{"id":355,"date":"2017-08-11T14:30:50","date_gmt":"2017-08-11T06:30:50","guid":{"rendered":"https:\/\/blog.jsjs.org\/?p=355"},"modified":"2017-08-11T14:30:50","modified_gmt":"2017-08-11T06:30:50","slug":"vue2-0-%e6%96%b0%e6%89%8b%e5%85%a5%e9%97%a8-%e4%bb%8e%e7%8e%af%e5%a2%83%e6%90%ad%e5%bb%ba%e5%88%b0%e5%8f%91%e5%b8%83","status":"publish","type":"post","link":"https:\/\/blog.jsjs.org\/?p=355","title":{"rendered":"Vue2.0 \u65b0\u624b\u5165\u95e8 \u2014 \u4ece\u73af\u5883\u642d\u5efa\u5230\u53d1\u5e03"},"content":{"rendered":"<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476689796-1178-854231-d682f0bb3d8eee9c.png\" \/><\/p>\n<blockquote><p>Jinkey\u539f\u521b<br \/>\n\u611f\u8c22\u00a0<a href=\"https:\/\/github.com\/showonne\" target=\"_blank\" rel=\"noopener\">showonne<\/a>\u3001<a href=\"https:\/\/github.com\/yubang\" target=\"_blank\" rel=\"noopener\">yubang<\/a>\u00a0\u6280\u672f\u6307\u5bfc<br \/>\n<strong>Demo \u5730\u5740:<\/strong><br \/>\n<a href=\"http:\/\/demo.jinkey.io\/vue2\" target=\"_blank\" rel=\"noopener\">http:\/\/demo.jinkey.io\/vue2<\/a><br \/>\n<strong>\u6e90\u7801:<\/strong><br \/>\n<a href=\"https:\/\/github.com\/Jinkeycode\/vue2-example\" target=\"_blank\" rel=\"noopener\">https:\/\/github.com\/Jinkeycode\/vue2-example<\/a><\/p><\/blockquote>\n<hr \/>\n<h2>\u4ec0\u4e48\u662f Vue<\/h2>\n<p>Vue \u662f\u4e00\u4e2a\u524d\u7aef\u6846\u67b6\uff0c\u7279\u70b9\u662f<br \/>\n<strong>\u6570\u636e\u7ed1\u5b9a<\/strong><\/p>\n<blockquote><p>\u6bd4\u5982\u4f60\u6539\u53d8\u4e00\u4e2a\u8f93\u5165\u6846 Input \u6807\u7b7e\u7684\u503c\uff0c\u4f1a<strong>\u81ea\u52a8\u540c\u6b65<\/strong>\u66f4\u65b0\u5230\u9875\u9762\u4e0a\u5176\u4ed6\u7ed1\u5b9a\u8be5\u8f93\u5165\u6846\u7684\u7ec4\u4ef6\u7684\u503c<br \/>\n\ufffc<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476690131-6882-854231-4a2d31db6bc25a1a.png\" \/><\/p><\/blockquote>\n<h3>\u7ec4\u4ef6\u5316<\/h3>\n<blockquote><p>\u9875\u9762\u4e0a\u5c0f\u5230\u4e00\u4e2a\u6309\u94ae\u90fd\u53ef\u4ee5\u662f\u4e00\u4e2a\u5355\u72ec\u7684\u6587\u4ef6.vue\uff0c\u8fd9\u4e9b\u5c0f\u7ec4\u4ef6\u76f4\u63a5\u53ef\u4ee5\u50cf\u4e50\u9ad8\u79ef\u6728\u4e00\u6837\u901a\u8fc7\u4e92\u76f8\u5f15\u7528\u800c\u7ec4\u88c5\u8d77\u6765<\/p><\/blockquote>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476690177-7476-854231-5eeceaec4c7e80ed.jpg\" \/><\/p>\n<hr \/>\n<h2>Vue2.0 \u63a8\u8350\u5f00\u53d1\u73af\u5883<\/h2>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476690217-1155-854231-1d2947692fba4957.png\" \/><\/p>\n<p>Homebrew 1.0.6(Mac)\u3001Node.js 6.7.0\u3001npm 3.10.3\u3001webpack 1.13.2\u3001vue-cli 2.4.0\u3001Atom 1.10.2<\/p>\n<hr \/>\n<h2>\u73af\u5883\u5b89\u88c5<\/h2>\n<h3>Mac OS\u7cfb\u7edf\u5b89\u88c5 brew<\/h3>\n<p>\u6253\u5f00\u7ec8\u7aef\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4:<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"str\">\/usr\/<\/span><span class=\"pln\">bin<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">ruby <\/span><span class=\"pun\">-<\/span><span class=\"pln\">e <\/span><span class=\"str\">\"$(curl -fsSL https:\/\/raw.githubusercontent.com\/Homebrew\/install\/master\/install)\"<\/span><\/pre>\n<h3>Mac OS\u7cfb\u7edf\u5b89\u88c5 nodejs<\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">brew install nodejs<\/span><\/pre>\n<p>\u7528 npm install npm@3.10.3 \u66f4\u65b0 npm \u7248\u672c\u62a5\u9519:<\/p>\n<blockquote><p>(node:42) fs: re-evaluating native module sources is not supported.<\/p><\/blockquote>\n<p>\u89e3\u51b3\u529e\u6cd5:<br \/>\n\u5728\u5b98\u7f51\u4e0b\u8f7d6.70\u7684\u5b89\u88c5\u5305\u518d\u5b89\u88c5\u4e00\u6b21(\u521a\u521a\u76f8\u5f53\u4e8e\u5e2e\u4f60\u914d\u7f6e\u597d\u73af\u5883\u53d8\u91cf\uff0c\u73b0\u5728\u518d\u5b89\u88c5\u4e00\u6b21\u5347\u7ea7\u5230\u6700\u65b0\u7684 npm)<\/p>\n<blockquote>\n<ul>\n<li>\u597d\u50cf\u4ee5\u524d\u5b98\u7f51\u7684\u5b89\u88c5\u5305\u4e0d\u4f1a\u81ea\u52a8\u914d\u7f6e\u73af\u5883\u53d8\u91cf\u7684\uff0c\u7531\u4e8e\u6211\u7535\u8111\u4e0a\u4e4b\u524d\u5b89\u88c5\u8fc7 nodejs \u6240\u4ee5\u73af\u5883\u53d8\u91cf\u5df2\u7ecf\u914d\u7f6e\u597d\u4e86\uff0c\u4e0d\u77e5\u9053\u73b0\u5728\u7684\u5b89\u88c5\u5305\u4f1a\u4e0d\u4f1a\u81ea\u52a8\u914d\u7f6e\u73af\u5883\u53d8\u91cf\u3002<\/li>\n<\/ul>\n<\/blockquote>\n<p>Windows \u4e0b\u76f4\u63a5\u4e0b\u8f7d\u5b89\u88c5\u5305\u5373\u53ef<\/p>\n<p>linux \u4e0b\u53ef\u4ee5\u4f7f\u7528 apt-get\uff08ubuntu\uff09 \u6216 yum\uff08centos\uff09 \u547d\u4ee4\u5b89\u88c5\u3002<\/p>\n<p>\u5177\u4f53\u53ef\u53c2\u8003\uff1a<a href=\"http:\/\/www.runoob.com\/nodejs\/nodejs-install-setup.html\" target=\"_blank\" rel=\"noopener\">http:\/\/www.runoob.com\/nodejs\/nodejs-install-setup.html<\/a><\/p>\n<h3>\u83b7\u53d6nodejs\u6a21\u5757\u5b89\u88c5\u76ee\u5f55\u8bbf\u95ee\u6743\u9650<\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">sudo chmod <\/span><span class=\"pun\">-<\/span><span class=\"pln\">R <\/span><span class=\"lit\">777<\/span> <span class=\"pun\">\/<\/span><span class=\"pln\">usr<\/span><span class=\"pun\">\/<\/span><span class=\"kwd\">local<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">lib<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">node_modules<\/span><span class=\"pun\">\/<\/span><\/pre>\n<p>\u5b89\u88c5\u6dd8\u5b9d\u955c\u50cf<\/p>\n<p>\u5927\u5bb6\u90fd\u77e5\u9053\u56fd\u5185\u76f4\u63a5\u4f7f\u7528 npm \u7684\u5b98\u65b9\u955c\u50cf\u662f\u975e\u5e38\u6162\u7684\uff0c\u8fd9\u91cc\u63a8\u8350\u4f7f\u7528\u6dd8\u5b9d NPM \u955c\u50cf\u3002<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm install <\/span><span class=\"pun\">-<\/span><span class=\"pln\">g cnpm <\/span><span class=\"pun\">--<\/span><span class=\"pln\">registry<\/span><span class=\"pun\">=<\/span><span class=\"pln\">https<\/span><span class=\"pun\">:<\/span><span class=\"com\">\/\/registry.npm.taobao.org<\/span><\/pre>\n<p>\u8fd9\u6837\u5c31\u53ef\u4ee5\u4f7f\u7528 cnpm \u547d\u4ee4\u6765\u5b89\u88c5\u6a21\u5757\u4e86\uff1a<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install <\/span><span class=\"pun\">[<\/span><span class=\"pln\">name<\/span><span class=\"pun\">]<\/span><\/pre>\n<h3>\u5b89\u88c5webpack<\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install webpack <\/span><span class=\"pun\">-<\/span><span class=\"pln\">g<\/span><\/pre>\n<h3>\u5b89\u88c5vue\u811a\u624b\u67b6<\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm install vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">cli <\/span><span class=\"pun\">-<\/span><span class=\"pln\">g<\/span><\/pre>\n<h3>\u5728\u786c\u76d8\u4e0a\u627e\u4e00\u4e2a\u6587\u4ef6\u5939\u653e\u5de5\u7a0b\u7528\u7684\uff0c\u5728\u7ec8\u7aef\u4e2d\u8fdb\u5165\u8be5\u76ee\u5f55<\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cd <\/span><span class=\"pun\">\u76ee\u5f55\u8def\u5f84<\/span><\/pre>\n<h3>\u6839\u636e\u6a21\u677f\u521b\u5efa\u9879\u76ee<\/h3>\n<blockquote><p>vue init webpack-simple \u5de5\u7a0b\u540d\u5b57&lt;\u5de5\u7a0b\u540d\u5b57\u4e0d\u80fd\u7528\u4e2d\u6587&gt;<br \/>\n\u6216\u8005\u521b\u5efa vue1.0 \u7684\u9879\u76ee<br \/>\nvue init webpack-simple#1.0 \u5de5\u7a0b\u540d\u5b57&lt;\u5de5\u7a0b\u540d\u5b57\u4e0d\u80fd\u7528\u4e2d\u6587&gt;<\/p><\/blockquote>\n<p>\u4f1a\u6709\u4e00\u4e9b\u521d\u59cb\u5316\u7684\u8bbe\u7f6e\uff0c\u5982\u4e0b\u8f93\u5165:<br \/>\n<code>Target directory exists. Continue? (Y\/n)<\/code>\u76f4\u63a5\u56de\u8f66\u9ed8\u8ba4(\u7136\u540e\u4f1a\u4e0b\u8f7d vue2.0\u6a21\u677f\uff0c\u8fd9\u91cc\u53ef\u80fd\u9700\u8981\u8fde\u4ee3\u7406)<br \/>\n<code>Project name (vue-test)<\/code>\u76f4\u63a5\u56de\u8f66\u9ed8\u8ba4<br \/>\n<code>Project description (A Vue.js project)<\/code>\u00a0\u76f4\u63a5\u56de\u8f66\u9ed8\u8ba4<br \/>\n<code>Author<\/code>\u00a0\u5199\u4f60\u81ea\u5df1\u7684\u540d\u5b57<\/p>\n<h3>cd \u547d\u4ee4\u8fdb\u5165\u521b\u5efa\u7684\u5de5\u7a0b\u76ee\u5f55<\/h3>\n<p>\u5de5\u7a0b\u76ee\u5f55\u5982\u56fe\u6240\u793a:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476690721-1278-854231-ea029fb82e865d5d.jpg\" \/><\/p>\n<hr \/>\n<h2>\u5b89\u88c5\u9879\u76ee\u4f9d\u8d56<\/h2>\n<p>\u4e00\u5b9a\u8981\u4ece\u5b98\u65b9\u4ed3\u5e93\u5b89\u88c5\uff0cnpm \u670d\u52a1\u5668\u5728\u56fd\u5916\u6240\u4ee5\u8fd9\u4e00\u6b65\u5b89\u88c5\u901f\u5ea6\u4f1a\u5f88\u6162\u3002<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm install<\/span><\/pre>\n<p><strong>\u4e0d\u8981\u4ece\u56fd\u5185\u955c\u50cfcnpm\u5b89\u88c5<\/strong>(\u4f1a\u5bfc\u81f4\u540e\u9762\u7f3a\u4e86\u5f88\u591a\u4f9d\u8d56\u5e93)<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install<\/span><\/pre>\n<h3>\u5b89\u88c5 vue \u8def\u7531\u6a21\u5757<code>vue-router<\/code>\u548c\u7f51\u7edc\u8bf7\u6c42\u6a21\u5757<code>vue-resource<\/code><\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">router vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">resource <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><\/pre>\n<h3>\u542f\u52a8\u9879\u76ee<\/h3>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm run dev<\/span><\/pre>\n<h3>\u586b\u5751(\u4ee5\u4e0b\u5751\u53ef\u80fd\u7531\u4e8e vue2.0 \u5bfc\u81f4\u5176\u4ed6\u76f8\u5173\u7f16\u8bd1\u6253\u5305\u5de5\u5177\u6ca1\u66f4\u65b0\u5bfc\u81f4\u7684)<\/h3>\n<blockquote><p><strong>\u3010\u91cd\u70b9\u3011\u540e\u6765\u53d1\u73b0\u8fd9\u4e9b\u5751\u662f\u7531\u4e8e npm \u4e0d\u662f\u6700\u65b0\u7684\u7248\u672c3.10.2\uff0c \u7528 npm 3.9.5\u5c31\u4f1a\u51fa\u73b0\u4ee5\u4e0b\u5751<\/strong><br \/>\n\u89e3\u51b3\u529e\u6cd5: \u8bf7\u8fd0\u884c\u4ee5\u4e0b\u547d\u4ee4<br \/>\n<strong>npm update -g<\/strong><\/p><\/blockquote>\n<p>\u62a5\u9519<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'opn'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'webpack-dev-middleware'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'express'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'compression'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'sockjs'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'spdy'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'http-proxy-middleware'<\/span>\n<span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'serve-index'<\/span><\/pre>\n<p>\u5982\u679c\u4f60\u7528\u7684\u662f\u8001\u7248\u672c\u7684 vue-cli \u8fd8\u53ef\u80fd\u62a5\u5176\u4ed6\u9519\u8bef\uff0c\u9700\u8981\u66f4\u65b0\u4e00\u4e0b vue-cli<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm update vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">cli<\/span><\/pre>\n<p>\u7136\u540e\u53ef\u4ee5\u67e5\u770b\u4e00\u4e0b\u5f53\u524d\u5168\u5c40 vue-cli \u7684\u7248\u672c<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm view vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">cli<\/span><\/pre>\n<p>\u5b89\u88c5\u4e00\u4e0b\u8fd9\u4e2a\u4f9d\u8d56\u5230\u5de5\u7a0b\u5f00\u53d1\u73af\u5883<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install opn <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install webpack<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev<\/span><span class=\"pun\">-<\/span><span class=\"pln\">middleware <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install express <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install compression <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install sockjs <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install spdy <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install http<\/span><span class=\"pun\">-<\/span><span class=\"pln\">proxy<\/span><span class=\"pun\">-<\/span><span class=\"pln\">middleware <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install serve<\/span><span class=\"pun\">-<\/span><span class=\"pln\">index <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install connect<\/span><span class=\"pun\">-<\/span><span class=\"pln\">history<\/span><span class=\"pun\">-<\/span><span class=\"pln\">api<\/span><span class=\"pun\">-<\/span><span class=\"pln\">fallback <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev<\/span><\/pre>\n<p>\u518d\u542f\u52a8\u9879\u76ee\uff0c\u62a5\u9519<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">ERROR <\/span><span class=\"kwd\">in<\/span> <span class=\"pun\">.\/<\/span><span class=\"pln\">src<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">main<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js\n<\/span><span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'babel-runtime\/helpers\/typeof'<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Function<\/span><span class=\"pun\">.<\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">_resolveFilename <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">440<\/span><span class=\"pun\">:<\/span><span class=\"lit\">15<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Function<\/span><span class=\"pun\">.<\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">_load <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">388<\/span><span class=\"pun\">:<\/span><span class=\"lit\">25<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"kwd\">require<\/span> <span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">468<\/span><span class=\"pun\">:<\/span><span class=\"lit\">17<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"kwd\">require<\/span> <span class=\"pun\">(<\/span><span class=\"kwd\">internal<\/span><span class=\"pun\">\/<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">20<\/span><span class=\"pun\">:<\/span><span class=\"lit\">19<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Object<\/span><span class=\"pun\">.&lt;<\/span><span class=\"pln\">anonymous<\/span><span class=\"pun\">&gt;<\/span> <span class=\"pun\">(<\/span><span class=\"str\">\/Volumes\/<\/span><span class=\"typ\">MacStorage<\/span><span class=\"pun\">\/<\/span><span class=\"typ\">Coding<\/span><span class=\"pun\">\/<\/span><span class=\"typ\">Web<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">test<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">node_modules<\/span><span class=\"pun\">\/.<\/span><span class=\"lit\">6.17<\/span><span class=\"pun\">.<\/span><span class=\"lit\">0@babel<\/span><span class=\"pun\">-<\/span><span class=\"pln\">core<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">lib<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">transformation<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">file<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">index<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">6<\/span><span class=\"pun\">:<\/span><span class=\"lit\">16<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">_compile <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">541<\/span><span class=\"pun\">:<\/span><span class=\"lit\">32<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Object<\/span><span class=\"pun\">.<\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">_extensions<\/span><span class=\"pun\">..<\/span><span class=\"pln\">js <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">550<\/span><span class=\"pun\">:<\/span><span class=\"lit\">10<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">load <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">458<\/span><span class=\"pun\">:<\/span><span class=\"lit\">32<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat tryModuleLoad <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">417<\/span><span class=\"pun\">:<\/span><span class=\"lit\">12<\/span><span class=\"pun\">)<\/span><span class=\"pln\">\nat <\/span><span class=\"typ\">Function<\/span><span class=\"pun\">.<\/span><span class=\"typ\">Module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">_load <\/span><span class=\"pun\">(<\/span><span class=\"kwd\">module<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">409<\/span><span class=\"pun\">:<\/span><span class=\"lit\">3<\/span><span class=\"pun\">)<\/span>\n<span class=\"pun\">@<\/span><span class=\"pln\"> multi main\nERROR <\/span><span class=\"kwd\">in<\/span> <span class=\"pun\">.\/~<\/span><span class=\"str\">\/.2.1.0-beta.8@webpack-dev-server\/<\/span><span class=\"pln\">client<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">socket<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js\n<\/span><span class=\"typ\">Module<\/span> <span class=\"kwd\">not<\/span><span class=\"pln\"> found<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Can<\/span><span class=\"str\">'t resolve '<\/span><span class=\"pln\">sockjs<\/span><span class=\"pun\">-<\/span><span class=\"pln\">client<\/span><span class=\"str\">' in '<\/span><span class=\"pun\">\/<\/span><span class=\"typ\">Volumes<\/span><span class=\"pun\">\/<\/span><span class=\"typ\">MacStorage<\/span><span class=\"pun\">\/<\/span><span class=\"typ\">Coding<\/span><span class=\"pun\">\/<\/span><span class=\"typ\">Web<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">test<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">node_modules<\/span><span class=\"pun\">\/.<\/span><span class=\"lit\">2.1<\/span><span class=\"pun\">.<\/span><span class=\"lit\">0<\/span><span class=\"pun\">-<\/span><span class=\"pln\">beta<\/span><span class=\"pun\">.<\/span><span class=\"lit\">8@webpack<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev<\/span><span class=\"pun\">-<\/span><span class=\"pln\">server<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">client<\/span><span class=\"str\">'\n@ .\/~\/.2.1.0-beta.8@webpack-dev-server\/client\/socket.js 1:13-37\n@ .\/~\/.2.1.0-beta.8@webpack-dev-server\/client?http:\/\/localhost:8080<\/span><\/pre>\n<p>\u5b89\u88c5\u4e00\u4e0b babel-runtime<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install babel<\/span><span class=\"pun\">-<\/span><span class=\"pln\">helpers <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev<\/span><\/pre>\n<p>\u542f\u52a8\u9879\u76ee\uff0c\u518d\u6b21\u62a5\u9519<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'babel-helpers'<\/span>\n<span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'babel-traverse'<\/span>\n<span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'json5'<\/span>\n<span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'babel-generator'<\/span>\n<span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'detect-indent'<\/span>\n<span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'jsesc'<\/span><\/pre>\n<p>\u627e\u4e0d\u5230\u4f9d\u8d56\u90a3\u5c31\u518d\u5b89\u88c5\u4e00\u4e0b<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install babel<\/span><span class=\"pun\">-<\/span><span class=\"pln\">helpers <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install babel<\/span><span class=\"pun\">-<\/span><span class=\"pln\">traverse <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install json5 <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\n<\/span><span class=\"pun\">...\u4e0d\u5199\u4e86\uff0c\u8bf7\u628a\u5168\u90e8\u628a\u65e7\u7684\u73af\u5883\u5168\u90e8\u6e05\u9664\uff0c\u66f4\u65b0\u5230\u6700\u65b0\u7248\u672c<\/span><\/pre>\n<hr \/>\n<h2>\u89e3\u51b3\u529e\u6cd5\u6982\u8ff0<\/h2>\n<p>\u9047\u5230<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"typ\">Module<\/span><span class=\"pln\"> build failed<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Cannot<\/span><span class=\"pln\"> find <\/span><span class=\"kwd\">module<\/span> <span class=\"str\">'\u6a21\u5757\u540d'<\/span><\/pre>\n<p>\u90a3\u5c31\u5b89\u88c5<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install <\/span><span class=\"pun\">\u6a21\u5757\u540d<\/span> <span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev<\/span><span class=\"pun\">(\u5173\u4e8e\u73af\u5883\u7684\uff0c\u8868\u73b0\u4e3a<\/span><span class=\"pln\">npm run dev <\/span><span class=\"pun\">\u542f\u52a8\u4e0d\u4e86)<\/span><span class=\"pln\">\ncnpm install <\/span><span class=\"pun\">\u6a21\u5757\u540d<\/span> <span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">(\u5173\u4e8e\u9879\u76ee\u7684\uff0c\u6bd4\u5982<\/span><span class=\"pln\">main<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">\uff0c\u8868\u73b0\u4e3a<\/span><span class=\"pln\">npm run dev <\/span><span class=\"pun\">\u6210\u529f\u4e4b\u540e\u63a7\u5236\u53f0\u62a5\u9519)<\/span>\n<span class=\"pun\">\u6bd4\u5982<\/span><span class=\"pln\">escape<\/span><span class=\"pun\">-<\/span><span class=\"kwd\">string<\/span><span class=\"pun\">-<\/span><span class=\"pln\">regexp<\/span><span class=\"pun\">\u3001<\/span><span class=\"pln\">strip<\/span><span class=\"pun\">-<\/span><span class=\"pln\">ansi<\/span><span class=\"pun\">\u3001<\/span><span class=\"pln\">has<\/span><span class=\"pun\">-<\/span><span class=\"pln\">ansi<\/span><span class=\"pun\">\u3001<\/span><span class=\"kwd\">is<\/span><span class=\"pun\">-<\/span><span class=\"pln\">finite<\/span><span class=\"pun\">\u3001<\/span><span class=\"pln\">emojis<\/span><span class=\"pun\">-<\/span><span class=\"pln\">list<\/span><\/pre>\n<h3>\u7ec8\u4e8e\u53ef\u4ee5\u542f\u52a8\u9879\u76ee\u4e86<\/h3>\n<p>\u8f93\u5165\u5b8c\u547d\u4ee4\u4f1a\u81ea\u52a8\u542f\u52a8\u6d4f\u89c8\u5668\uff0c\u5982\u679c\u9ed8\u8ba4\u6253\u5f00 IE \u4e0d\u884c<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm run dev<\/span><\/pre>\n<p>\u81ea\u52a8\u542f\u52a8\u6d4f\u89c8\u5668\u5c31\u4f1a\u770b\u5230\u8fd9\u4e2a\u754c\u9762\u4e86\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691152-5858-854231-1f208cb27858c8ec.png\" \/><\/p>\n<hr \/>\n<h2>\u5f00\u59cb Vue \u4e4b\u65c5<\/h2>\n<h3>\u6253\u5f00 IDE<\/h3>\n<p>\u63a8\u8350 Atom \u6253\u5f00\u9879\u76ee\uff0c\u9700\u8981\u5b89\u88c5 Vue \u8bed\u6cd5\u9ad8\u4eae\u7684\u63d2\u4ef6<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691201-9307-854231-bc9565e738d4d41e.jpg\" \/><\/p>\n<h3>\u4f7f\u7528\u5b98\u7f51\u6587\u6863\u5b66\u4e60\u57fa\u7840<\/h3>\n<p>\u6211\u4eec\u6765\u770b\u5b98\u7f51\u7684\u4e00\u4e2a\u4f8b\u5b50\uff0c(\u4e2d\u6587\u6587\u6863\u8bf7\u81ea\u884c\u4e0a\u7f51\u641c\u7d22)<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691245-3231-854231-00c7dced26f9c972.jpg\" \/><\/p>\n<p>\u6253\u5f00 \u5de5\u7a0b\u76ee\u5f55\u4e0b\u7684 App.vue<\/p>\n<p>template \u5199 html\uff0cscript\u5199 js\uff0cstyle\u5199\u6837\u5f0f<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691280-8912-854231-22ac84c532a7be20.jpg\" \/><\/p>\n<p>\u4e3a\u4e86\u65b9\u4fbf\u53d9\u8ff0\uff0c\u6211\u4eec\u628a\u5b98\u7f51\u4f8b\u5b50\u5199\u5728\u540c\u4e00\u4e2a\u7ec4\u4ef6\u5185<br \/>\n\u8fd9\u91cc\u6709\u4e24\u4e2a\u5751:<br \/>\n<strong>\u7b2c\u4e00<\/strong>\u3002\u4e00\u4e2a\u7ec4\u4ef6\u4e0b\u53ea\u80fd\u6709\u4e00\u4e2a\u5e76\u5217\u7684 div\uff0c\u53ef\u4ee5\u8fd9\u4e48\u5199\uff0c\u6240\u4ee5\u590d\u5236\u5b98\u7f51\u793a\u4f8b\u7684\u65f6\u5019\u53ea\u8981\u590d\u5236 div \u91cc\u9762\u7684\u5185\u5bb9\u5c31\u597d\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691313-1110-854231-b219f2ef37474fe1.jpg\" \/><\/p>\n<p>\u4f46\u662f\u4e0d\u80fd\u8fd9\u6837\u5199:\ufffc<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691340-5135-854231-4343b062c2b504aa.jpg\" \/><\/p>\n<p><strong>\u7b2c\u4e8c<\/strong>\u3002\u6570\u636e\u8981\u5199\u5728 return \u91cc\u9762\u800c\u4e0d\u662f\u50cf\u6587\u6863\u90a3\u6837\u5b50\u5199<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691387-6051-854231-5da5ffe18910e72f.jpg\" \/><\/p>\n<p>\u9519\u8bef\u7684\u5199\u6cd5:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691429-8316-854231-9b78747081a19c39.jpg\" \/><\/p>\n<p>\u8fd9\u6837\u5b50\u53ef\u4ee5\u81ea\u5df1\u5543\u5b8c\u5b98\u7f51\u6587\u6863\u7ec4\u4ef6\u4e4b\u524d\u7684\u90e8\u5206\u4e86\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691463-8515-854231-55342acee9153c98.png\" \/><\/p>\n<hr \/>\n<h2>\u6765\u73a9\u73a9\u7ec4\u4ef6<\/h2>\n<p>\u524d\u9762\u8bb2\u5f97\u57fa\u672c\u4e0a\u90fd\u662f\u5404\u79cd\u5e38\u7528\u7ec4\u4ef6\u7684\u6570\u636e\u7ed1\u5b9a\uff0c\u4e0b\u9762\u8fd8\u5f97\u8bf4\u8bf4\u7684\u662f Vue \u7684\u7ec4\u4ef6\u7684\u4f7f\u7528\u3002<br \/>\n\u5728\u5de5\u7a0b\u76ee\u5f55<code>\/src<\/code>\u4e0b\u521b\u5efa<code>component<\/code>\u6587\u4ef6\u5939\uff0c\u5e76\u5728<code>component<\/code>\u6587\u4ef6\u5939\u4e0b\u521b\u5efa\u4e00\u4e2a\u00a0<code>firstcomponent.vue<\/code>\u5e76\u5199\u4eff\u7167 App.vue \u7684\u683c\u5f0f\u548c\u524d\u9762\u5b66\u5230\u7684\u77e5\u8bc6\u5199\u4e00\u4e2a\u7ec4\u4ef6\u3002<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">template<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">div<\/span> <span class=\"hl-var\">id<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">firstcomponent<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">h1<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\">I am a title.<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">h1<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">a<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\"> written by {{ author }} <\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">a<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">div<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">template<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">script<\/span> <span class=\"hl-var\">type<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">text\/javascript<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\"> export default { data () { return { author: &#8220;\u5fae\u4fe1\u516c\u4f17\u53f7 jinkey-love&#8221; } } } <\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">script<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">style<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">style<\/span><span class=\"hl-brackets\">&gt;<\/span><\/div>\n<\/div>\n<\/div>\n<p>duang&#8230; \u4e0d\u80fd\u6309\u5b98\u7f51\u6587\u6863\u90a3\u6837\u5b50\u53eb\u6211\u505a\u5c31\u505a\uff0c\u6211\u5f97\u5148\u8bd5\u8bd5\u518d\u544a\u8bc9\u4f60\uff0c\u6211\u505a\u5b8c\u6548\u679c\u662f\u8fd9\u6837\u5b50\u7684\uff0c\u5e0c\u671b\u89c2\u4f17\u505a\u5b8c\u4e5f\u662f\u8fd9\u6837\u5b50\u3002(\u8ff7\u4e4b\u5fae\u7b11 )<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691520-7423-854231-bb5a6ba776b17a94.jpg\" \/><\/p>\n<p>\u7136\u540e\u5728 App.vue \u4f7f\u7528\u7ec4\u4ef6 ( \u56e0\u4e3a\u5728\u00a0<code>index.html<\/code>\u00a0\u91cc\u9762\u5b9a\u4e49\u4e86&lt;div id=&#8221;app&#8221;&gt;&lt;\/div&gt;\u6240\u4ee5\u5c31\u4ee5\u8fd9\u4e2a\u7ec4\u4ef6\u4f5c\u4e3a\u4e3b\u5165\u53e3\uff0c\u65b9\u4fbf )<br \/>\n<strong>\u7b2c\u4e00\u6b65\uff0c\u5f15\u5165<\/strong>\u3002\u5728<code>&lt;script&gt;&lt;\/script&gt;<\/code>\u6807\u7b7e\u5185\u7684\u7b2c\u4e00\u884c\u5199<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"kwd\">import<\/span><span class=\"pln\"> firstcomponent <\/span><span class=\"kwd\">from<\/span> <span class=\"str\">'.\/component\/firstcomponent.vue'<\/span><\/pre>\n<p><strong>\u7b2c\u4e8c\u6b65\uff0c\u6ce8\u518c<\/strong>\u3002\u5728<code>&lt;script&gt;&lt;\/script&gt;<\/code>\u6807\u7b7e\u5185\u7684 data \u4ee3\u7801\u5757\u540e\u9762\u52a0\u4e0a components: { firstcomponent }\u3002<strong>\u8bb0\u5f97\u4e2d\u95f4\u52a0\u82f1\u6587\u9017\u53f7!!!<\/strong><\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"kwd\">export<\/span> <span class=\"kwd\">default<\/span> <span class=\"pun\">{<\/span><span class=\"pln\">\n  data <\/span><span class=\"pun\">()<\/span> <span class=\"pun\">{<\/span>\n    <span class=\"kwd\">return<\/span> <span class=\"pun\">{<\/span><span class=\"pln\">\n      msg<\/span><span class=\"pun\">:<\/span> <span class=\"str\">'Hello Vue!'<\/span>\n    <span class=\"pun\">}<\/span>\n  <span class=\"pun\">},<\/span><span class=\"pln\">\n  components<\/span><span class=\"pun\">:<\/span> <span class=\"pun\">{<\/span><span class=\"pln\"> firstcomponent <\/span><span class=\"pun\">}<\/span>\n<span class=\"pun\">}<\/span><\/pre>\n<p><strong>\u7b2c\u4e09\u6b65\uff0c\u4f7f\u7528<\/strong>\u3002<br \/>\n\u5728<code>&lt;template&gt;&lt;\/template&gt;<\/code>\u5185\u52a0\u4e0a&lt;firstcomponent&gt;&lt;\/firstcomponent&gt;<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">template<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">div<\/span> <span class=\"hl-var\">id<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">app<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">img<\/span> <span class=\"hl-var\">src<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">.\/assets\/logo.png<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">h1<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\">{{ msg }}<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">h1<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">firstcomponent<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">firstcomponent<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">div<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">template<\/span><span class=\"hl-brackets\">&gt;<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u5b8c\u6210\u540e\u7684\u4ee3\u7801\uff1a<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691599-4231-854231-9151330e194eef69.jpg\" \/><\/p>\n<p>\u8fd9\u65f6\u5019\u770b\u770b\u6d4f\u89c8\u5668\u4e0a\u7684\u00a0<code>http:\/\/localhost:8080\/<\/code>\u00a0\u9875\u9762(\u4e4b\u524d\u6253\u5f00\u8fc7\u5c31\u4f1a\u81ea\u52a8\u5237\u65b0)\uff0c\u5982\u679c\u4f60\u6ca1\u770b\u5230\u6548\u679c\u662f\u56e0\u4e3a\u4f60\u6ca1\u6709\u5bf9\u00a0<code>App.vue<\/code>\u00a0\u548c\u00a0<code>firstcomponent.vue<\/code>\u00a0\u8fdb\u884c\u4fdd\u5b58\u64cd\u4f5c\uff0c\u4fdd\u5b58\u540e\u9875\u9762\u4f1a\u81ea\u52a8\u5237\u65b0\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691628-6951-854231-03fd1e86031881e6.png\" \/><\/p>\n<hr \/>\n<h2>\u4f7f\u7528\u8def\u7531\u642d\u5efa\u5355\u9875\u5e94\u7528<\/h2>\n<p>\u4e4b\u524d\u5df2\u7ecf\u901a\u8fc7\u547d\u4ee4\u5b89\u88c5\u4e86vue-router<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">router <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><\/pre>\n<p>\u5728webpack.config.js\u52a0\u5165\u522b\u540d<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">resolve<\/span><span class=\"pun\">:<\/span> <span class=\"pun\">{<\/span>\n\t<span class=\"kwd\">alias<\/span><span class=\"pun\">:<\/span> <span class=\"pun\">{<\/span><span class=\"pln\">vue<\/span><span class=\"pun\">:<\/span> <span class=\"str\">'vue\/dist\/vue.js'<\/span><span class=\"pun\">}<\/span>\n<span class=\"pun\">}<\/span><\/pre>\n<p>\u4e3a\u4ec0\u4e48\u8981\u52a0 alias \u914d\u7f6e\u9879\uff1f\u5176\u4f5c\u7528\u53ef\u4ee5\u5728\u6587\u6863\u4e2d\u6709\u76f8\u5e94\u7684\u63cf\u8ff0:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691751-9448-854231-3fb25f5fd8b8c8d2.jpg\" \/><\/p>\n<p>\u4fee\u6539\u5b8c\u4e4b\u540e\u7684<code>webpack.config.js<\/code>\u662f\u8fd9\u6837\u5b50\u7684:<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-reserved\">var<\/span> <span class=\"hl-identifier\">path<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-identifier\">require<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">path<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-reserved\">var<\/span> <span class=\"hl-identifier\">webpack<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-identifier\">require<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">webpack<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">entry<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">.\/src\/main.js<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">output<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">resolve<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">__dirname<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">.\/dist<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">publicPath<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">\/dist\/<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">filename<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">build.js<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">resolveLoader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">root<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">join<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">__dirname<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">node_modules<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">loaders<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">[<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-identifier\">vue<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">vue<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-identifier\">js<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">babel<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">exclude<\/span><span class=\"hl-code\">: \/<\/span><span class=\"hl-identifier\">node_modules<\/span><span class=\"hl-code\">\/ <\/span><span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">png<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">jpg<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">gif<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">svg<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">file<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">query<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">name<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">[name].[ext]?[hash]<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">]<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">resolve<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">alias<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span><span class=\"hl-identifier\">vue<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">vue\/dist\/vue.js<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">devServer<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">historyApiFallback<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">true<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">noInfo<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">true<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">devtool<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">#eval-source-map<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-reserved\">if<\/span> <span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">process<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">env<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">NODE_ENV<\/span><span class=\"hl-code\"> === <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">production<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">devtool<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">#source-map<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-comment\">\/\/<\/span> <span class=\"hl-url\">http:\/\/vue-loader.vuejs.org\/en\/workflow\/production.html<\/span> <span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">plugins<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">plugins<\/span><span class=\"hl-code\"> || <\/span><span class=\"hl-brackets\">[<\/span><span class=\"hl-brackets\">]<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">concat<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">[<\/span> <span class=\"hl-reserved\">new<\/span> <span class=\"hl-identifier\">webpack<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">DefinePlugin<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">process.env<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">: <\/s\npan><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">NODE_ENV<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">&#8220;production&#8221;<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-reserved\">new<\/span> <span class=\"hl-identifier\">webpack<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">optimize<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">UglifyJsPlugin<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">compress<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">warnings<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">false<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">]<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">}<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u518d\u6309\u4e4b\u524d\u7684\u65b9\u6cd5\u5199\u4e00\u4e2a\u7ec4\u4ef6 secondcomponent.vue<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">template<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">div<\/span> <span class=\"hl-var\">id<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">secondcomponent<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">h1<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\">I am another page<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">h1<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">a<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\"> written by {{ author }} <\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">a<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">p<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\"> \u611f\u8c22 <\/span><span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">a<\/span> <span class=\"hl-var\">href<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">https:\/\/github.com\/showonne<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\">showonne<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">a<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\">\u5927\u795e\u7684\u6280\u672f\u6307\u5bfc<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">p<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">div<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">template<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">script<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\"> export default { data() { return { author: &#8220;\u5fae\u4fe1\u516c\u4f17\u53f7 jinkey-love&#8221;, articles: [], } } } } <\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">script<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">style<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">style<\/span><span class=\"hl-brackets\">&gt;<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u8fd9\u65f6\u5019\u4fee\u6539 main.js\uff0c\u5f15\u5165\u5e76\u6ce8\u518c\u00a0<code>vue-router<\/code><\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"kwd\">import<\/span> <span class=\"typ\">VueRouter<\/span> <span class=\"kwd\">from<\/span> <span class=\"str\">\"vue-router\"<\/span><span class=\"pun\">;<\/span>\n<span class=\"typ\">Vue<\/span><span class=\"pun\">.<\/span><span class=\"kwd\">use<\/span><span class=\"pun\">(<\/span><span class=\"typ\">VueRouter<\/span><span class=\"pun\">);<\/span><\/pre>\n<p>\u5e76\u4e14\u914d\u7f6e\u8def\u7531\u89c4\u5219\u548c app \u542f\u52a8\u914d\u7f6e\u9879\u52a0\u4e0a router\uff0c\u65e7\u7248\u7684 router.map \u65b9\u6cd5\u5728\u00a0<code>vue-router 2.0<\/code>\u00a0\u5df2\u7ecf\u4e0d\u80fd\u7528\u4e86\u3002\u4fee\u6539\u540e\u7684<code>main.js<\/code>\u5982\u4e0b:<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-reserved\">import<\/span> <span class=\"hl-identifier\">Vue<\/span> <span class=\"hl-identifier\">from<\/span> <span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">vue<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-reserved\">import<\/span> <span class=\"hl-identifier\">App<\/span> <span class=\"hl-identifier\">from<\/span> <span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">.\/App.vue<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-reserved\">import<\/span> <span class=\"hl-identifier\">VueRouter<\/span> <span class=\"hl-identifier\">from<\/span> <span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">vue-router<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-code\">; <\/span><span class=\"hl-reserved\">import<\/span> <span class=\"hl-identifier\">VueResource<\/span> <span class=\"hl-identifier\">from<\/span> <span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">vue-resource<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\">\u5f00\u542fdebug\u6a21\u5f0f<\/span> <span class=\"hl-identifier\">Vue<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">config<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">debug<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-reserved\">true<\/span><span class=\"hl-code\">; <\/span><span class=\"hl-identifier\">Vue<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">use<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">VueRouter<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">; <\/span><span class=\"hl-identifier\">Vue<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">use<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">VueResource<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">; <\/span><span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u5b9a\u4e49\u7ec4\u4ef6, \u4e5f\u53ef\u4ee5\u50cf\u6559\u7a0b\u4e4b\u524d\u6559\u7684\u65b9\u6cd5\u4ece\u522b\u7684\u6587\u4ef6\u5f15\u5165<\/span> <span class=\"hl-reserved\">const<\/span> <span class=\"hl-identifier\">First<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">template<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">&lt;div&gt;&lt;h2&gt;\u6211\u662f\u7b2c 1 \u4e2a\u5b50\u9875\u9762&lt;\/h2&gt;&lt;\/div&gt;<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-reserved\">import<\/span> <span class=\"hl-identifier\">secondcomponent<\/span> <span class=\"hl-identifier\">from<\/span> <span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">.\/component\/secondcomponent.vue<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u521b\u5efa\u4e00\u4e2a\u8def\u7531\u5668\u5b9e\u4f8b<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u5e76\u4e14\u914d\u7f6e\u8def\u7531\u89c4\u5219<\/span> <span class=\"hl-reserved\">const<\/span> <span class=\"hl-identifier\">router<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-reserved\">new<\/span> <span class=\"hl-identifier\">VueRouter<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">mode<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">history<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">base<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">__dirname<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">routes<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">[<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">\/first<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">component<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">First<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">\/second<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">component<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">secondcomponent<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">]<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u73b0\u5728\u6211\u4eec\u53ef\u4ee5\u542f\u52a8\u5e94\u7528\u4e86\uff01<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u8def\u7531\u5668\u4f1a\u521b\u5efa\u4e00\u4e2a App \u5b9e\u4f8b\uff0c\u5e76\u4e14\u6302\u8f7d\u5230\u9009\u62e9\u7b26 #app \u5339\u914d\u7684\u5143\u7d20\u4e0a\u3002<\/span> <span class=\"hl-reserved\">const<\/span> <span class=\"hl-identifier\">app<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-reserved\">new<\/span> <span class=\"hl-identifier\">Vue<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">router<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">router<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">render<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">h<\/span><span class=\"hl-code\"> =&gt; <\/span><span class=\"hl-identifier\">h<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">App<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">.$<\/span><span class=\"hl-identifier\">mount<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">#app<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u8fd9\u6837\u5b50\u6539\u5b8c\u518d\u6253\u5f00\u6d4f\u89c8\u5668\u770b\u770b\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691880-5461-854231-cf956a57f849e8c3.png\" \/><\/p>\n<p>\u70b9\u51fb\u90a3\u4e24\u4e2a\u94fe\u63a5\u8bd5\u8bd5\uff0c\u4f1a\u53d1\u73b0<code>&lt;router-view class=\"view\"&gt;&lt;\/router-view&gt;<\/code>\u7684\u5185\u5bb9\u5df2\u7ecf\u5c55\u793a\u51fa\u6765\uff0c\u540c\u65f6\u6ce8\u610f<strong>\u6d4f\u89c8\u5668\u5730\u5740\u5df2\u7ecf\u53d8\u66f4<\/strong>\u3002<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691907-2400-854231-958ea2c6a5933db6.png\" \/><\/p>\n<p>\u53e6\u5916\uff0c\u4e5f\u53ef\u4ee5\u628a App.vue \u7684\u5185\u5bb9\u5199\u5728 main.js \u4e5f\u662f\u53ef\u4ee5\u7684\u4e0d\u8fc7\u4e0d\u5efa\u8bae\u8fd9\u4e48\u505a<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476691937-2753-854231-6139d6fbb1cbcb69.jpg\" \/><\/p>\n<p>\u5982\u679c\u4f60\u4f7f\u7528 vue1.0\u548c0.7\u7248\u672c\u7684 vue-router\uff0c\u8bf7\u53c2\u7167\u4e0b\u9762\u8fd9\u4e2a\u6559\u7a0b, \u4ed6\u6574\u4e2a\u7cfb\u5217\u90fd\u4e0d\u9519\u7684\uff0c\u5f53\u7136\u4ec5\u9650\u4e8e vue1.0 :<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">http<\/span><span class=\"pun\">:<\/span><span class=\"com\">\/\/guowenfh.github.io\/2016\/03\/28\/vue-webpack-06-router\/<\/span><\/pre>\n<hr \/>\n<h2>\u7ed9\u9875\u9762\u52a0\u70b9\u52a8\u6001\u6570\u636e<\/h2>\n<p>\u8fd9\u65f6\u5019\u7684\u9875\u9762\u90fd\u662f\u9759\u6001\u7684(\u6570\u636e\u5728\u5199\u7a0b\u5e8f\u7684\u65f6\u5019\u5df2\u7ecf\u56fa\u5b9a\u4e86\u4e0d\u80fd\u4fee\u6539)\uff0c\u800c\u6bcf\u4e2a\u5e94\u7528\u57fa\u672c\u4e0a\u90fd\u4f1a\u8bf7\u6c42\u5916\u90e8\u6570\u636e\u4ee5\u52a8\u6001\u6539\u53d8\u9875\u9762\u5185\u5bb9\u3002\u5bf9\u5e94\u6709\u4e00\u4e2a\u5e93\u53eb\u00a0<code>vue-resource<\/code>\u00a0\u5e2e\u6211\u4eec\u89e3\u51b3\u8fd9\u4e2a\u95ee\u9898\u3002<br \/>\n\u4f7f\u7528\u547d\u4ee4\u884c\u5b89\u88c5<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install vue<\/span><span class=\"pun\">-<\/span><span class=\"pln\">resource <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><\/pre>\n<p>\u5728 main.js \u5f15\u5165\u5e76\u6ce8\u518c\u00a0<code>vue-resource<\/code>:<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"kwd\">import<\/span> <span class=\"typ\">VueResource<\/span> <span class=\"kwd\">from<\/span> <span class=\"str\">'vue-resource'<\/span>\n<span class=\"typ\">Vue<\/span><span class=\"pun\">.<\/span><span class=\"kwd\">use<\/span><span class=\"pun\">(<\/span><span class=\"typ\">VueResource<\/span><span class=\"pun\">);<\/span><\/pre>\n<p>\u6211\u4eec\u5728 secondcomponent.vue \u4e0a\u6765\u52a8\u6001\u52a0\u8f7d\u6570\u636e<br \/>\n\u6dfb\u52a0\u4e00\u4e2a\u5217\u8868:<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"tag\">&lt;ul&gt;<\/span>\n  <span class=\"tag\">&lt;li<\/span> <span class=\"atn\">v-for<\/span><span class=\"pun\">=<\/span><span class=\"atv\">\"article in articles\"<\/span><span class=\"tag\">&gt;<\/span><span class=\"pln\">\n    {{article.title}}\n  <\/span><span class=\"tag\">&lt;\/li&gt;<\/span>\n<span class=\"tag\">&lt;\/ul&gt;<\/span><\/pre>\n<p>\u5728 data \u91cc\u9762\u52a0\u5165\u6570\u7ec4 articles \u5e76\u8d4b\u503c\u4e3a[]<br \/>\n\u7136\u540e\u5728 data \u540e\u9762\u52a0\u5165\u52a0\u5165\u94a9\u5b50\u51fd\u6570\u00a0<code>mounted<\/code>(\u8be6\u7ec6\u8bf7\u53c2\u7167\u5b98\u65b9\u6587\u6863\u5173\u4e8e vue \u751f\u547d\u5468\u671f\u7684\u89e3\u6790)\uff0c<strong>data \u548c mount \u4e2d\u95f4\u8bb0\u5f97\u8bb0\u5f97\u52a0\u9017\u53f7<\/strong><\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-identifier\">mounted<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">function<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-reserved\">this<\/span><span class=\"hl-code\">.$<\/span><span class=\"hl-identifier\">http<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">jsonp<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">https:\/\/api.douban.com\/v2\/movie\/top250?count=10<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span><span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">headers<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">emulateJSON<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">true<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">then<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-reserved\">function<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">response<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u8fd9\u91cc\u662f\u5904\u7406\u6b63\u786e\u7684\u56de\u8c03<\/span> <span class=\"hl-reserved\">this<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">articles<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-identifier\">response<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">data<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">subjects<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> this.articles = response.data[&#8220;subjects&#8221;] \u4e5f\u53ef\u4ee5<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-reserved\">function<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">response<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-comment\">\/\/<\/span><span class=\"hl-comment\"> \u8fd9\u91cc\u662f\u5904\u7406\u9519\u8bef\u7684\u56de\u8c03<\/span> <span class=\"hl-identifier\">console<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">log<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">response<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">; <\/span><span class=\"hl-brackets\">}<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u8fd9\u91cc\u4f7f\u7528\u7684\u662f\u8c46\u74e3\u7684\u516c\u5f00 GET \u63a5\u53e3\uff0c\u5982\u679c\u63a5\u53e3\u662f\u8de8\u57df\u7684 POST \u8bf7\u6c42\uff0c\u5219\u9700\u8981\u5728\u670d\u52a1\u5668\u7aef\u914d\u7f6e:<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"typ\">Access<\/span><span class=\"pun\">-<\/span><span class=\"typ\">Control<\/span><span class=\"pun\">-<\/span><span class=\"typ\">Allow<\/span><span class=\"pun\">-<\/span><span class=\"typ\">Origin<\/span><span class=\"pun\">:<\/span> <span class=\"pun\">*<\/span><\/pre>\n<p>\u8fd9\u65f6\u5019\u8fd0\u884c\u770b\u770b\u3002\u7b49\u4e00\u4f1a\u63a5\u53e3\u8fd4\u56de\u6570\u636e\uff0c\u54a6\uff0c\u6570\u636e\u52a0\u8f7d\u51fa\u6765\u4e86\uff0c\u68d2\u68d2\u54d2 !<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476692090-4577-854231-4871af2f1af20ca5.png\" \/><\/p>\n<p>\u66f4\u591a vue-router \u7684\u4f7f\u7528\u65b9\u6cd5\u53ef\u4ee5\u770b<\/p>\n<blockquote><p><strong>vue-router 0.7<\/strong><br \/>\n<a href=\"http:\/\/m.doc00.com\/doc\/1001004eg\" target=\"_blank\" rel=\"noopener\">http:\/\/m.doc00.com\/doc\/1001004eg<\/a><br \/>\n<strong>vue-router 2.0<\/strong><br \/>\n<a href=\"http:\/\/router.vuejs.org\/zh-cn\/index.html\" target=\"_blank\" rel=\"noopener\">http:\/\/router.vuejs.org\/zh-cn\/index.html<\/a><\/p><\/blockquote>\n<hr \/>\n<h2>\u6765\u62ef\u6551\u5982\u6b64\u96be\u770b\u7684\u754c\u9762<\/h2>\n<p>\u7ec4\u4ef6\u3001\u53cc\u5411\u7ed1\u5b9a\u3001\u8def\u7531\u3001\u6570\u636e\u8bf7\u6c42\u7b49\u57fa\u672c\u7279\u6027\u90fd\u80fd\u7528\u4e86\uff0c\u5199\u5230\u8fd9\u91cc\u4e00\u4e2a\u5355\u9875\u5e94\u7528\u57fa\u672c\u4e0a\u6210\u578b\u4e86\u3002\u4f46\u662f\uff0c\u8fd9\u754c\u9762\u4e5f\u592a TM \u96be\u770b\u4e86\u5427\u3002\u81ea\u5df1\u5199 UI \u6846\u67b6\u592a\u8d39\u52b2\uff1f\u90a3\u5c31\u4e0a\u7f51\u627e\u4e00\u4e2a\u5427\u3002<br \/>\n\u672c\u6765\u60f3\u7ed9\u5927\u5bb6\u4ecb\u7ecd Vux \u7684\uff0c\u56e0\u4e3a\u4ed6\u7528\u7684\u662f\u5fae\u4fe1\u7684 WeUI \u8bbe\u8ba1\u89c4\u8303\uff0c\u5bf9\u4e8e\u5f00\u53d1\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u6216\u8005\u5fae\u4fe1\u5185\u7684\u7f51\u9875\u975e\u5e38\u548c\u8c10\uff0c\u4f46\u7531\u4e8e\u5199\u8fd9\u7bc7\u6587\u7ae0\u7684\u65f6\u5019 Vux \u8fd8\u4e0d\u652f\u6301 vue2.0\uff0c\u53ea\u80fd\u7528\u522b\u7684\u6846\u67b6\u4e86\u3002<br \/>\n\u547d\u4ee4\u884c\u5b89\u88c5 ElementUI (\u6b64\u5904\u67d0\u516c\u53f8\u7684\u4eba\u5e94\u8be5\u53d1\u7ea2\u5305\u4e86&#8230;)<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install element<\/span><span class=\"pun\">-<\/span><span class=\"pln\">ui@next <\/span><span class=\"pun\">-<\/span><span class=\"pln\">S<\/span><\/pre>\n<p>\u7136\u540e\u5728 main.js \u5f15\u5165\u5e76\u6ce8\u518c<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"kwd\">import<\/span> <span class=\"typ\">Element<\/span> <span class=\"kwd\">from<\/span> <span class=\"str\">'element-ui'<\/span>\n<span class=\"kwd\">import<\/span> <span class=\"str\">'element-ui\/lib\/theme-default\/index.css'<\/span>\n<span class=\"typ\">Vue<\/span><span class=\"pun\">.<\/span><span class=\"kwd\">use<\/span><span class=\"pun\">(<\/span><span class=\"typ\">Element<\/span><span class=\"pun\">)<\/span><\/pre>\n<p>\u4fdd\u5b58\uff0c\u8fd9\u65f6\u5019\u7a0b\u5e8f\u62a5\u9519<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"typ\">Uncaught<\/span> <span class=\"typ\">Error<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Module<\/span><span class=\"pln\"> parse failed<\/span><span class=\"pun\">:<\/span> <span class=\"str\">\/Users\/<\/span><span class=\"pun\">**<\/span><span class=\"str\">\/Desktop\/<\/span><span class=\"pln\">vue2<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">node_modules<\/span><span class=\"pun\">\/.<\/span><span class=\"lit\">1.0<\/span><span class=\"pun\">.<\/span><span class=\"lit\">0<\/span><span class=\"pun\">-<\/span><span class=\"pln\">rc<\/span><span class=\"pun\">.<\/span><span class=\"lit\">5@element<\/span><span class=\"pun\">-<\/span><span class=\"pln\">ui<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">lib<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">theme<\/span><span class=\"pun\">-<\/span><span class=\"kwd\">default<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">index<\/span><span class=\"pun\">.<\/span><span class=\"pln\">css <\/span><span class=\"typ\">Unexpected<\/span><span class=\"pln\"> character <\/span><span class=\"str\">'@'<\/span> <span class=\"pun\">(<\/span><span class=\"lit\">1<\/span><span class=\"pun\">:<\/span><span class=\"lit\">0<\/span><span class=\"pun\">)<\/span>\n<span class=\"typ\">You<\/span><span class=\"pln\"> may need an appropriate loader to handle <\/span><span class=\"kwd\">this<\/span><span class=\"pln\"> file type<\/span><span class=\"pun\">.<\/span><\/pre>\n<p>\u5b98\u7f51\u6587\u6863\u53c8\u6709\u5751\u4e86\uff0c\u5b89\u88c5\u6559\u7a0b\u4e5f\u4e0d\u8ddf\u6211\u4eec\u8bf4\u8fd9\u4e00\u6b65\uff0c\u5f53\u6211\u4eec\u90fd\u662f\u9ad8\u624b\u4e86&#8230;<br \/>\n\u62a5\u9519\u662f\u7531\u4e8e\u6211\u4eec\u5f15\u5165\u4e86<code>index.css<\/code>\u8fd9\u4e2a CSS \u6587\u4ef6\uff0c\u4f46\u662f webpack \u6253\u5305\u7684\u65f6\u5019\u65e0\u6cd5\u8bc6\u522b\u5e76\u8f6c\u6362\u6210 js\uff0c\u6240\u4ee5\u5c31\u9700\u8981\u914d\u7f6e\u624d\u80fd\u8bfb\u53d6 css \u548c\u5b57\u4f53\u6587\u4ef6\uff0c\u8fd0\u884c\u547d\u4ee4\u5b89\u88c5\u4e0b\u9762\u4e09\u4e2a\u4e1c\u897f(\u5982\u679c\u4e4b\u524d\u5b89\u88c5\u8fc7\u5c31\u4e0d\u9700\u8981\u4e86)<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">cnpm install style<\/span><span class=\"pun\">-<\/span><span class=\"pln\">loader <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install css<\/span><span class=\"pun\">-<\/span><span class=\"pln\">loader <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev\ncnpm install file<\/span><span class=\"pun\">-<\/span><span class=\"pln\">loader <\/span><span class=\"pun\">--<\/span><span class=\"pln\">save<\/span><span class=\"pun\">-<\/span><span class=\"pln\">dev<\/span><\/pre>\n<p>\u5728 webpack.config.js \u4e2d\u7684 loaders \u6570\u7ec4\u52a0\u5165\u4ee5\u4e0b\u914d\u7f6e\uff0c\u8bb0\u5f97\u8be5\u52a0\u9017\u53f7\u7684\u5730\u65b9\u52a0\u9017\u53f7!<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-identifier\">css<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">style!css<\/span><span class=\"hl-quotes\">&#8220;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">eot<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">woff<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">woff2<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">ttf<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">[<\/span><span class=\"hl-code\">\\\\\\\\\\\\\\\\?<\/span><span class=\"hl-brackets\">]<\/span><span class=\"hl-code\">?.*<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">file<\/span><span class=\"hl-quotes\">&#8220;<\/span> <span class=\"hl-brackets\">}<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u4fee\u6539\u5b8c\u7684 webpack.config.js \u5982\u4e0b<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-reserved\">var<\/span> <span class=\"hl-identifier\">path<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-identifier\">require<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">path<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-reserved\">var<\/span> <span class=\"hl-identifier\">webpack<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-identifier\">require<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">webpack<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">entry<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">.\/src\/main.js<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">output<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">resolve<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">__dirname<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">.\/dist<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">publicPath<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">\/dist\/<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">filename<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">build.js<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">resolveLoader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">root<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-identifier\">path<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">join<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">__dirname<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">node_modules<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">loaders<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">[<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-identifier\">vue<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">vue<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-identifier\">js<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">babel<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">exclude<\/span><span class=\"hl-code\">: \/<\/span><span class=\"hl-identifier\">node_modules<\/span><span class=\"hl-code\">\/ <\/span><span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-identifier\">css<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">style!css<\/span><span class=\"hl-quotes\">&#8220;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">eot<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">woff<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">woff2<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">ttf<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">[<\/span><span class=\"hl-code\">\\\\\\\\\\\\\\\\?<\/span><span class=\"hl-brackets\">]<\/span><span class=\"hl-code\">?.*<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">file<\/span><span class=\"hl-quotes\">&#8220;<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">test<\/span><span class=\"hl-code\">: \/\\\\\\\\\\\\\\\\.<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">png<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">jpg<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">gif<\/span><span class=\"hl-code\">|<\/span><span class=\"hl-identifier\">svg<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">$\/, <\/span><span class=\"hl-identifier\">loader<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">file<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">query<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">name<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">[name].[ext]?[hash]<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">]<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">resolve<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">alias<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span><span class=\"hl-identifier\">vue<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">vue\/dist\/vue.js<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">devServer<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">historyApiFallback<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">true<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">noInfo<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">true<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-identifier\">devtool<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">#eval-source-map<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-reserved\">if<\/span> <span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">process<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">env<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">NODE_ENV<\/span><span class=\"hl-code\"> === <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">production<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">devtool<\/\nspan><span class=\"hl-code\"> = <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">#source-map<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-comment\">\/\/<\/span> <span class=\"hl-url\">http:\/\/vue-loader.vuejs.org\/en\/workflow\/production.html<\/span> <span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">plugins<\/span><span class=\"hl-code\"> = <\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-identifier\">module<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">exports<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">plugins<\/span><span class=\"hl-code\"> || <\/span><span class=\"hl-brackets\">[<\/span><span class=\"hl-brackets\">]<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">concat<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">[<\/span> <span class=\"hl-reserved\">new<\/span> <span class=\"hl-identifier\">webpack<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">DefinePlugin<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">process.env<\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">NODE_ENV<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-quotes\">&#8216;<\/span><span class=\"hl-string\">&#8220;production&#8221;<\/span><span class=\"hl-quotes\">&#8216;<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span><span class=\"hl-code\">, <\/span><span class=\"hl-reserved\">new<\/span> <span class=\"hl-identifier\">webpack<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">optimize<\/span><span class=\"hl-code\">.<\/span><span class=\"hl-identifier\">UglifyJsPlugin<\/span><span class=\"hl-brackets\">(<\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">compress<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-brackets\">{<\/span> <span class=\"hl-identifier\">warnings<\/span><span class=\"hl-code\">: <\/span><span class=\"hl-reserved\">false<\/span> <span class=\"hl-brackets\">}<\/span> <span class=\"hl-brackets\">}<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">]<\/span><span class=\"hl-brackets\">)<\/span> <span class=\"hl-brackets\">}<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u7ed9\u8c46\u74e3\u7684\u7535\u5f71\u5217\u8868\u5957\u4e2a\u8863\u670d(\u6837\u5f0f) :<\/p>\n<div class=\"example\">\n<div class=\"example_code\">\n<div class=\"hl-main\"><span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">el-card<\/span> <span class=\"hl-var\">class<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">box-card<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">div<\/span> <span class=\"hl-var\">slot<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">header<\/span><span class=\"hl-quotes\">&#8220;<\/span> <span class=\"hl-var\">class<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">clearfix<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">h1<\/span> <span class=\"hl-var\">style<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">line-height: 36px; color: #20A0FF<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\">\u8c46\u74e3\u7535\u5f71\u6392\u884c\u699c<\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">h2<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">div<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;<\/span><span class=\"hl-reserved\">div<\/span> <span class=\"hl-var\">v-for<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">article in articles<\/span><span class=\"hl-quotes\">&#8220;<\/span> <span class=\"hl-var\">class<\/span><span class=\"hl-code\">=<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-string\">text item<\/span><span class=\"hl-quotes\">&#8220;<\/span><span class=\"hl-brackets\">&gt;<\/span><span class=\"hl-code\"> {{article.title}} <\/span><span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">div<\/span><span class=\"hl-brackets\">&gt;<\/span> <span class=\"hl-brackets\">&lt;\/<\/span><span class=\"hl-reserved\">el-card<\/span><span class=\"hl-brackets\">&gt;<\/span><\/div>\n<\/div>\n<\/div>\n<p>\u6253\u5f00\u6d4f\u89c8\u5668,\u8f93\u5165\u7f51\u5740:http:\/\/localhost:8080\/second<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/www.runoob.com\/wp-content\/uploads\/2016\/10\/1476692273-6825-854231-0f8758be535e7ccd.png\" \/><\/p>\n<p>\u5217\u8868\u6bd4\u4e4b\u524d\u6f02\u4eae\u591a\u4e86\uff0c\u4f60\u8fd8\u53ef\u4ee5\u53c2\u7167 ElementUI \u7684\u6587\u6863\u4f7f\u7528\u66f4\u591a\u7ec4\u4ef6\u6837\u5f0f<\/p>\n<blockquote><p><a href=\"http:\/\/element.eleme.io\/#\/component\/layout\" target=\"_blank\" rel=\"noopener\">http:\/\/element.eleme.io\/#\/component\/layout<\/a><\/p><\/blockquote>\n<p>h3&gt;\u7f16\u8bd1<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">npm run build<\/span><\/pre>\n<p>\u53c8\u62a5\u9519\u4e86&#8230;orz<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">ERROR <\/span><span class=\"kwd\">in<\/span><span class=\"pln\"> build<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js <\/span><span class=\"kwd\">from<\/span> <span class=\"typ\">UglifyJs<\/span>\n<span class=\"typ\">SyntaxError<\/span><span class=\"pun\">:<\/span> <span class=\"typ\">Unexpected<\/span><span class=\"pln\"> token punc <\/span><span class=\"pun\">\u00ab(\u00bb,<\/span><span class=\"pln\"> expected punc <\/span><span class=\"pun\">\u00ab:\u00bb<\/span> <span class=\"pun\">[<\/span><span class=\"pln\">build<\/span><span class=\"pun\">.<\/span><span class=\"pln\">js<\/span><span class=\"pun\">:<\/span><span class=\"lit\">32001<\/span><span class=\"pun\">,<\/span><span class=\"lit\">6<\/span><span class=\"pun\">]<\/span>\n<span class=\"pun\">\u628a<\/span><span class=\"pln\">node_modules<\/span><span class=\"pun\">\/.<\/span><span class=\"pln\">bin<\/span><span class=\"pun\">\/<\/span><span class=\"pln\">cross<\/span><span class=\"pun\">-<\/span><span class=\"pln\">env<\/span><span class=\"pun\">\u91cc\u7684<\/span>\n<span class=\"kwd\">require<\/span><span class=\"pun\">(<\/span><span class=\"str\">'..\/dist'<\/span><span class=\"pun\">)(<\/span><span class=\"pln\">process<\/span><span class=\"pun\">.<\/span><span class=\"pln\">argv<\/span><span class=\"pun\">.<\/span><span class=\"pln\">slice<\/span><span class=\"pun\">(<\/span><span class=\"lit\">2<\/span><span class=\"pun\">));<\/span><\/pre>\n<p>\u540e\u6765\u53d1\u73b0\u76f4\u63a5\u8fd0\u884c webpack \u547d\u4ee4\u5c31\u53ef\u4ee5\u6253\u5305\u4e86<\/p>\n<pre class=\"prettyprint prettyprinted\"><span class=\"pln\">webpack <\/span><span class=\"pun\">--<\/span><span class=\"pln\">color <\/span><span class=\"pun\">--<\/span><span class=\"pln\">progress<\/span><\/pre>\n<p>\u63a5\u7740\u628a index.html \u548c\u6574\u4e2a dist \u76ee\u5f55\u4e22\u5230\u670d\u52a1\u5668\u5c31\u53ef\u4ee5\u4e86\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Jinkey\u539f\u521b \u611f\u8c22\u00a0showonne\u3001yubang\u00a0\u6280\u672f\u6307\u5bfc Demo \u5730\u5740: http:\/\/demo.jinkey.io\/vue2 \u6e90\u7801: https:\/\/github.com\/Jinkeycode\/vue2-example \u4ec0\u4e48\u662f Vue Vue \u662f\u4e00\u4e2a\u524d\u7aef\u6846\u67b6\uff0c\u7279\u70b9\u662f \u6570\u636e\u7ed1\u5b9a \u6bd4\u5982\u4f60\u6539\u53d8\u4e00\u4e2a\u8f93\u5165\u6846 Input \u6807\u7b7e\u7684\u503c\uff0c\u4f1a\u81ea\u52a8\u540c\u6b65\u66f4\u65b0\u5230\u9875\u9762\u4e0a\u5176\u4ed6\u7ed1\u5b9a\u8be5\u8f93\u5165\u6846\u7684\u7ec4\u4ef6\u7684\u503c \ufffc \u7ec4\u4ef6\u5316 \u9875\u9762\u4e0a\u5c0f\u5230\u4e00\u4e2a\u6309\u94ae\u90fd\u53ef\u4ee5\u662f\u4e00\u4e2a\u5355\u72ec\u7684\u6587\u4ef6.vue\uff0c\u8fd9\u4e9b\u5c0f\u7ec4\u4ef6\u76f4\u63a5\u53ef\u4ee5\u50cf\u4e50\u9ad8\u79ef\u6728\u4e00\u6837\u901a\u8fc7\u4e92\u76f8\u5f15\u7528\u800c\u7ec4\u88c5\u8d77\u6765 Vue2.0 \u63a8\u8350\u5f00\u53d1\u73af\u5883 [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[1],"tags":[],"class_list":["post-355","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=\/wp\/v2\/posts\/355","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=355"}],"version-history":[{"count":0,"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=\/wp\/v2\/posts\/355\/revisions"}],"wp:attachment":[{"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=355"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=355"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jsjs.org\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=355"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}