Vue.js \u5b89\u88c5<\/h1>\n<\/p><\/div>\n\u517c\u5bb9\u6027\u68c0\u67e5<\/h3>\n\n \u5728\u9879\u76ee\u4e2d\u5b89\u88c5\u548c\u4f7f\u7528Vue.js\u4e4b\u524d\uff0c\u5e94\u68c0\u67e5\u517c\u5bb9\u6027\u95ee\u9898\u3002 Vue\u4e0d\u652f\u6301IE8\u53ca\u66f4\u4f4e\u7248\u672c\u7684IE\uff0c\u56e0\u4e3a\u5b83\u4f7f\u7528\u4e86IE8\u4e0d\u652f\u6301\u7684ECMAScript 5\u529f\u80fd\u3002\u5b83\u652f\u6301\u6240\u6709\u7b26\u5408ECMAScript 5\u7684\u6d4f\u89c8\u5668\u3002\n <\/div>\n\u5982\u4f55\u5b89\u88c5Vue.js\uff1f<\/h3>\n\n \u6709\u51e0\u79cd\u4f7f\u7528Vue.js\u7684\u65b9\u6cd5\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u5176\u5b98\u65b9\u7f51\u7ad9\u8fdb\u884c\u5b89\u88c5\uff0c\u4e5f\u53ef\u4ee5\u4eceCDN\u5e93\u5f00\u59cb\u4f7f\u7528Vue.js\u6587\u4ef6\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u8ba8\u8bba\u6709\u5173\u5982\u4f55\u5728\u9879\u76ee\u4e2d\u5b89\u88c5\u548c\u4f7f\u7528Vue.js\u7684\u4e00\u4e9b\u65b9\u6cd5\u3002\n <\/div>\n\u901a\u8fc7\u76f4\u63a5\u5728HTML\u6587\u4ef6\u4e2d\u4f7f\u7528<script>\u6807\u8bb0<\/h3>\n\n \u5982\u679c\u8981\u76f4\u63a5\u5728HTML\u6587\u4ef6\u4e2d\u4f7f\u7528Vue.js\u7684<script>\u6807\u8bb0\uff0c\u5219\u5fc5\u987b\u4ece\u5b98\u65b9\u7f51\u7ad9\u4e0b\u8f7d\u5b83\u3002\n <\/div>\n\n <html><\/span>
<head><\/span>
<script type = \"text\/javascript\" src = \"vue.min.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span><\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8ba9\u6211\u4eec\u8fdb\u5165Vue.js\u7684\u5b98\u65b9\u7f51\u7ad9
\n https:\/\/vuejs.org\/v2\/guide\/installation.html \u5e76\u6839\u636e\u60a8\u7684\u8981\u6c42\u4e0b\u8f7d vue.js\u3002\u5728\u8fd9\u91cc\uff0c\u60a8\u5c06\u83b7\u5f97\u4e24\u4e2a\u7248\u672c\u7684Vue.js: \u5f00\u53d1\u7248\u672c\u548c\u751f\u4ea7\u7248\u672c\u3002\n <\/div>\n\n \u4e0b\u56fe\u663e\u793a\u4e86\u4e24\u4e2a\u7248\u672c: <\/strong>\n <\/div>\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c1\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-e0c4326aa2764f1c85fa5d55420ce733.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c1\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\n \u8be5\u5f00\u53d1\u7248\u672c\u6700\u597d\u5728\u60a8\u7684\u9879\u76ee\u4e2d\u4f7f\u7528\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u88ab\u6700\u5c0f\u5316\uff0c\u5e76\u4e14\u53ef\u4ee5\u5e2e\u52a9\u60a8\u89e3\u51b3\u8b66\u544a\u548c\u9879\u76ee\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7684\u8c03\u8bd5\u6a21\u5f0f\u3002\u53e6\u4e00\u65b9\u9762\uff0c\u5c06\u751f\u4ea7\u7248\u672c\u6700\u5c0f\u5316\uff0c\u5982\u4e0a\u9762\u7684\u5c4f\u5e55\u5feb\u7167\u6240\u793a\u3002\n <\/div>\n\n Vue.js\u5efa\u8bae\u60a8\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4e0d\u8981\u4f7f\u7528\u7f29\u5c0f\u7248\u672c\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u5728\u51fa\u73b0\u9519\u8bef\u65f6\u663e\u793a\u5e38\u89c1\u9519\u8bef\u7684\u8b66\u544a\u3002\n <\/div>\n\u901a\u8fc7\u4f7f\u7528CDN <\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528CDN\u5e93\u4e2d\u7684Vue.js\u6587\u4ef6\u3002\u5728\u5e94\u7528\u7a0b\u5e8f\u7684<script> \u5143\u7d20\u4e2d\u4f7f\u7528\u6b64\u94fe\u63a5
\n https:\/\/unpkg.com\/vue \uff0c\u60a8\u5c06\u83b7\u5f97\u6700\u65b0\u7248\u672c\u7684Vue.js\u3002\n <\/div>\n\n \u793a\u4f8b1: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/unpkg.com\/vue\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n CDN\u7684Vue.js\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728jsDelivr\u4e0a\u83b7\u53d6Vue.js(
\n https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js )\u548ccdnjs(
\n https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.4.0\/vue.js )\u3002\n <\/div>\n\n \u793a\u4f8b2: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js second example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n Vue.js CDN\u7684\u7b2c\u4e8c\u4e2a\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\u901a\u8fc7\u4f7f\u7528NPM <\/h3>\n\n \u5982\u679c\u8981\u4f7f\u7528VueJS\u8fdb\u884c\u5927\u578b\u5e94\u7528\u7a0b\u5e8f\uff0c\u5efa\u8bae\u4f7f\u7528NPM\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7npm\u8f6f\u4ef6\u5305\u5b89\u88c5Vue.js\u3002\u5b83\u5e26\u6709Browserify\u548cWebpack\u4ee5\u53ca\u5176\u4ed6\u4f7f\u5f00\u53d1\u53d8\u5f97\u5bb9\u6613\u7684\u5fc5\u8981\u5de5\u5177\u3002\n <\/div>\n\n npm install vue
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u6ce8\u610f: <\/span> \u5982\u679c\u60a8\u8fd8\u4e0d\u719f\u6089\u57fa\u4e8eNode.js\u7684\u6784\u5efa\u5de5\u5177\uff0c \u8bf7\u4e0d\u8981\u4f7f\u7528\u6b64\u65b9\u6cd5\u3002\n <\/div>\n\u4f7f\u7528CLI\u547d\u4ee4\u884c<\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528CLI\u5b89\u88c5Vue.js\u5e76\u5f00\u59cb\u6fc0\u6d3b\u670d\u52a1\u5668\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7CLI\u5b89\u88c5Vue.js:\n <\/div>\n\n npm install --global vue-cli
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c2\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-9cf2c0207fbf43b0a6a07bbca6cca17b.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c2\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\n \u5b89\u88c5Vue.js cli\u5c06\u9700\u8981\u51e0\u5206\u949f\u3002\u5b8c\u6210\u540e\uff0c\u5b83\u5c06\u663e\u793aVue.js\u7684CLI\u7248\u672c\u3002\n <\/div>\n\n + vue-cli@2.9.6
added 238 packages from 205 contributors in 346.282s
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c3\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-1d599d8d4ebd4a6ba50817e1c4c2057a.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c3\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee<\/h3>\n
\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a
\n \" my_project \"\u7684\u9879\u76ee\u3002<\/strong>\n <\/div>\n\n vue init webpack my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u5728\u6b64\u8fc7\u7a0b\u4e2d\uff0c\u7cfb\u7edf\u5c06\u8981\u6c42\u60a8\u8f93\u5165Y\/n\u3002 \u8f93\u5165Y\uff0c \u7136\u540e\u7ee7\u7eed\u3002 \u5b83\u5c06\u81ea\u52a8\u4e0b\u8f7d\u6a21\u677f\u548c\u6240\u6709\u4f9d\u8d56\u9879\u3002\n <\/div>\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c4\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-95b20e9effe94299a718d47364a04313.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c4\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\n \u6210\u529f\u521b\u5efa\u9879\u76ee\u540e\uff0c\u60a8\u5c06\u770b\u5230\u7c7b\u4f3c\u4ee5\u4e0b\u7684\u6d88\u606f\u5c4f\u5e55\u622a\u56fe\u3002\n <\/div>\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c5\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-eabc78cdd8674cd99203adcc3eaecddb.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c5\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\u542f\u52a8\u9879\u76ee\u548c\u670d\u52a1\u5668<\/h3>\n
\u73b0\u5728\uff0c \u521b\u5efa\u9879\u76ee\u3002 \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u8f6c\u5230\u9879\u76ee\u76ee\u5f55: <\/span> <\/p>\n\n cd my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8\u670d\u52a1\u5668: <\/span> <\/p>\n\n npm run dev
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c6\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-ab04723526584228b2c6a0b54cfe7951.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c6\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\n \u60a8\u53ef\u4ee5\u770b\u5230\uff0c\u5728\u8fd0\u884cnpm run dev\u547d\u4ee4\u4e4b\u540e\uff0c\u670d\u52a1\u5668\u5f00\u59cb\u3002\u73b0\u5728\uff0c\u6253\u5f00\u517c\u5bb9\u7684\u6d4f\u89c8\u5668\uff0c\u5373Google Chrome\uff0c\u7136\u540e\u8fd0\u884clocalhost http: \/\/localhost: 8080\/#\/\u6253\u5f00\u60a8\u7684\u9879\u76ee\u3002\n <\/div>\n ![Vue.js \u5b89\u88c5_https:\/\/bianchenghao6.com_\u3010vue\u6559\u7a0b\u3011_\u7b2c7\u5f20](\"https:\/\/img.mushiming.top\/app\/bianchenghao6_com\/2023-11-11-1a3f572234d041a29bbdfcde6ef64522.png\" "Vue.js \u5b89\u88c5_\u3010vue\u6559\u7a0b\u3011_\u7b2c7\u5f20_\u7f16\u7a0b\u597d6\u6587\u6863")
<\/p>\n
\n <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js \u5b89\u88c5zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[122],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","hentry","category-vuejc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u5982\u4f55\u5b89\u88c5Vue.js\uff1f<\/h3>\n\n \u6709\u51e0\u79cd\u4f7f\u7528Vue.js\u7684\u65b9\u6cd5\u3002\u60a8\u53ef\u4ee5\u901a\u8fc7\u5176\u5b98\u65b9\u7f51\u7ad9\u8fdb\u884c\u5b89\u88c5\uff0c\u4e5f\u53ef\u4ee5\u4eceCDN\u5e93\u5f00\u59cb\u4f7f\u7528Vue.js\u6587\u4ef6\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u8ba8\u8bba\u6709\u5173\u5982\u4f55\u5728\u9879\u76ee\u4e2d\u5b89\u88c5\u548c\u4f7f\u7528Vue.js\u7684\u4e00\u4e9b\u65b9\u6cd5\u3002\n <\/div>\n\u901a\u8fc7\u76f4\u63a5\u5728HTML\u6587\u4ef6\u4e2d\u4f7f\u7528<script>\u6807\u8bb0<\/h3>\n\n \u5982\u679c\u8981\u76f4\u63a5\u5728HTML\u6587\u4ef6\u4e2d\u4f7f\u7528Vue.js\u7684<script>\u6807\u8bb0\uff0c\u5219\u5fc5\u987b\u4ece\u5b98\u65b9\u7f51\u7ad9\u4e0b\u8f7d\u5b83\u3002\n <\/div>\n\n <html><\/span>
<head><\/span>
<script type = \"text\/javascript\" src = \"vue.min.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span><\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8ba9\u6211\u4eec\u8fdb\u5165Vue.js\u7684\u5b98\u65b9\u7f51\u7ad9
\n https:\/\/vuejs.org\/v2\/guide\/installation.html \u5e76\u6839\u636e\u60a8\u7684\u8981\u6c42\u4e0b\u8f7d vue.js\u3002\u5728\u8fd9\u91cc\uff0c\u60a8\u5c06\u83b7\u5f97\u4e24\u4e2a\u7248\u672c\u7684Vue.js: \u5f00\u53d1\u7248\u672c\u548c\u751f\u4ea7\u7248\u672c\u3002\n <\/div>\n\n \u4e0b\u56fe\u663e\u793a\u4e86\u4e24\u4e2a\u7248\u672c: <\/strong>\n <\/div>\n <\/p>\n
\n \u8be5\u5f00\u53d1\u7248\u672c\u6700\u597d\u5728\u60a8\u7684\u9879\u76ee\u4e2d\u4f7f\u7528\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u88ab\u6700\u5c0f\u5316\uff0c\u5e76\u4e14\u53ef\u4ee5\u5e2e\u52a9\u60a8\u89e3\u51b3\u8b66\u544a\u548c\u9879\u76ee\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7684\u8c03\u8bd5\u6a21\u5f0f\u3002\u53e6\u4e00\u65b9\u9762\uff0c\u5c06\u751f\u4ea7\u7248\u672c\u6700\u5c0f\u5316\uff0c\u5982\u4e0a\u9762\u7684\u5c4f\u5e55\u5feb\u7167\u6240\u793a\u3002\n <\/div>\n\n Vue.js\u5efa\u8bae\u60a8\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4e0d\u8981\u4f7f\u7528\u7f29\u5c0f\u7248\u672c\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u5728\u51fa\u73b0\u9519\u8bef\u65f6\u663e\u793a\u5e38\u89c1\u9519\u8bef\u7684\u8b66\u544a\u3002\n <\/div>\n\u901a\u8fc7\u4f7f\u7528CDN <\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528CDN\u5e93\u4e2d\u7684Vue.js\u6587\u4ef6\u3002\u5728\u5e94\u7528\u7a0b\u5e8f\u7684<script> \u5143\u7d20\u4e2d\u4f7f\u7528\u6b64\u94fe\u63a5
\n https:\/\/unpkg.com\/vue \uff0c\u60a8\u5c06\u83b7\u5f97\u6700\u65b0\u7248\u672c\u7684Vue.js\u3002\n <\/div>\n\n \u793a\u4f8b1: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/unpkg.com\/vue\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n CDN\u7684Vue.js\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728jsDelivr\u4e0a\u83b7\u53d6Vue.js(
\n https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js )\u548ccdnjs(
\n https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.4.0\/vue.js )\u3002\n <\/div>\n\n \u793a\u4f8b2: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js second example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n Vue.js CDN\u7684\u7b2c\u4e8c\u4e2a\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\u901a\u8fc7\u4f7f\u7528NPM <\/h3>\n\n \u5982\u679c\u8981\u4f7f\u7528VueJS\u8fdb\u884c\u5927\u578b\u5e94\u7528\u7a0b\u5e8f\uff0c\u5efa\u8bae\u4f7f\u7528NPM\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7npm\u8f6f\u4ef6\u5305\u5b89\u88c5Vue.js\u3002\u5b83\u5e26\u6709Browserify\u548cWebpack\u4ee5\u53ca\u5176\u4ed6\u4f7f\u5f00\u53d1\u53d8\u5f97\u5bb9\u6613\u7684\u5fc5\u8981\u5de5\u5177\u3002\n <\/div>\n\n npm install vue
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u6ce8\u610f: <\/span> \u5982\u679c\u60a8\u8fd8\u4e0d\u719f\u6089\u57fa\u4e8eNode.js\u7684\u6784\u5efa\u5de5\u5177\uff0c \u8bf7\u4e0d\u8981\u4f7f\u7528\u6b64\u65b9\u6cd5\u3002\n <\/div>\n\u4f7f\u7528CLI\u547d\u4ee4\u884c<\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528CLI\u5b89\u88c5Vue.js\u5e76\u5f00\u59cb\u6fc0\u6d3b\u670d\u52a1\u5668\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7CLI\u5b89\u88c5Vue.js:\n <\/div>\n\n npm install --global vue-cli
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\n \u5b89\u88c5Vue.js cli\u5c06\u9700\u8981\u51e0\u5206\u949f\u3002\u5b8c\u6210\u540e\uff0c\u5b83\u5c06\u663e\u793aVue.js\u7684CLI\u7248\u672c\u3002\n <\/div>\n\n + vue-cli@2.9.6
added 238 packages from 205 contributors in 346.282s
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee<\/h3>\n
\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a
\n \" my_project \"\u7684\u9879\u76ee\u3002<\/strong>\n <\/div>\n\n vue init webpack my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u5728\u6b64\u8fc7\u7a0b\u4e2d\uff0c\u7cfb\u7edf\u5c06\u8981\u6c42\u60a8\u8f93\u5165Y\/n\u3002 \u8f93\u5165Y\uff0c \u7136\u540e\u7ee7\u7eed\u3002 \u5b83\u5c06\u81ea\u52a8\u4e0b\u8f7d\u6a21\u677f\u548c\u6240\u6709\u4f9d\u8d56\u9879\u3002\n <\/div>\n <\/p>\n
\n \u6210\u529f\u521b\u5efa\u9879\u76ee\u540e\uff0c\u60a8\u5c06\u770b\u5230\u7c7b\u4f3c\u4ee5\u4e0b\u7684\u6d88\u606f\u5c4f\u5e55\u622a\u56fe\u3002\n <\/div>\n <\/p>\n
\u542f\u52a8\u9879\u76ee\u548c\u670d\u52a1\u5668<\/h3>\n
\u73b0\u5728\uff0c \u521b\u5efa\u9879\u76ee\u3002 \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u8f6c\u5230\u9879\u76ee\u76ee\u5f55: <\/span> <\/p>\n\n cd my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8\u670d\u52a1\u5668: <\/span> <\/p>\n\n npm run dev
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\n \u60a8\u53ef\u4ee5\u770b\u5230\uff0c\u5728\u8fd0\u884cnpm run dev\u547d\u4ee4\u4e4b\u540e\uff0c\u670d\u52a1\u5668\u5f00\u59cb\u3002\u73b0\u5728\uff0c\u6253\u5f00\u517c\u5bb9\u7684\u6d4f\u89c8\u5668\uff0c\u5373Google Chrome\uff0c\u7136\u540e\u8fd0\u884clocalhost http: \/\/localhost: 8080\/#\/\u6253\u5f00\u60a8\u7684\u9879\u76ee\u3002\n <\/div>\n <\/p>\n
\n <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js \u5b89\u88c5zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[122],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","hentry","category-vuejc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
\u901a\u8fc7\u76f4\u63a5\u5728HTML\u6587\u4ef6\u4e2d\u4f7f\u7528<script>\u6807\u8bb0<\/h3>\n\n \u5982\u679c\u8981\u76f4\u63a5\u5728HTML\u6587\u4ef6\u4e2d\u4f7f\u7528Vue.js\u7684<script>\u6807\u8bb0\uff0c\u5219\u5fc5\u987b\u4ece\u5b98\u65b9\u7f51\u7ad9\u4e0b\u8f7d\u5b83\u3002\n <\/div>\n\n <html><\/span>
<head><\/span>
<script type = \"text\/javascript\" src = \"vue.min.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span><\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8ba9\u6211\u4eec\u8fdb\u5165Vue.js\u7684\u5b98\u65b9\u7f51\u7ad9
\n https:\/\/vuejs.org\/v2\/guide\/installation.html \u5e76\u6839\u636e\u60a8\u7684\u8981\u6c42\u4e0b\u8f7d vue.js\u3002\u5728\u8fd9\u91cc\uff0c\u60a8\u5c06\u83b7\u5f97\u4e24\u4e2a\u7248\u672c\u7684Vue.js: \u5f00\u53d1\u7248\u672c\u548c\u751f\u4ea7\u7248\u672c\u3002\n <\/div>\n\n \u4e0b\u56fe\u663e\u793a\u4e86\u4e24\u4e2a\u7248\u672c: <\/strong>\n <\/div>\n <\/p>\n
\n \u8be5\u5f00\u53d1\u7248\u672c\u6700\u597d\u5728\u60a8\u7684\u9879\u76ee\u4e2d\u4f7f\u7528\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u88ab\u6700\u5c0f\u5316\uff0c\u5e76\u4e14\u53ef\u4ee5\u5e2e\u52a9\u60a8\u89e3\u51b3\u8b66\u544a\u548c\u9879\u76ee\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7684\u8c03\u8bd5\u6a21\u5f0f\u3002\u53e6\u4e00\u65b9\u9762\uff0c\u5c06\u751f\u4ea7\u7248\u672c\u6700\u5c0f\u5316\uff0c\u5982\u4e0a\u9762\u7684\u5c4f\u5e55\u5feb\u7167\u6240\u793a\u3002\n <\/div>\n\n Vue.js\u5efa\u8bae\u60a8\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4e0d\u8981\u4f7f\u7528\u7f29\u5c0f\u7248\u672c\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u5728\u51fa\u73b0\u9519\u8bef\u65f6\u663e\u793a\u5e38\u89c1\u9519\u8bef\u7684\u8b66\u544a\u3002\n <\/div>\n\u901a\u8fc7\u4f7f\u7528CDN <\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528CDN\u5e93\u4e2d\u7684Vue.js\u6587\u4ef6\u3002\u5728\u5e94\u7528\u7a0b\u5e8f\u7684<script> \u5143\u7d20\u4e2d\u4f7f\u7528\u6b64\u94fe\u63a5
\n https:\/\/unpkg.com\/vue \uff0c\u60a8\u5c06\u83b7\u5f97\u6700\u65b0\u7248\u672c\u7684Vue.js\u3002\n <\/div>\n\n \u793a\u4f8b1: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/unpkg.com\/vue\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n CDN\u7684Vue.js\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728jsDelivr\u4e0a\u83b7\u53d6Vue.js(
\n https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js )\u548ccdnjs(
\n https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.4.0\/vue.js )\u3002\n <\/div>\n\n \u793a\u4f8b2: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js second example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n Vue.js CDN\u7684\u7b2c\u4e8c\u4e2a\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\u901a\u8fc7\u4f7f\u7528NPM <\/h3>\n\n \u5982\u679c\u8981\u4f7f\u7528VueJS\u8fdb\u884c\u5927\u578b\u5e94\u7528\u7a0b\u5e8f\uff0c\u5efa\u8bae\u4f7f\u7528NPM\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7npm\u8f6f\u4ef6\u5305\u5b89\u88c5Vue.js\u3002\u5b83\u5e26\u6709Browserify\u548cWebpack\u4ee5\u53ca\u5176\u4ed6\u4f7f\u5f00\u53d1\u53d8\u5f97\u5bb9\u6613\u7684\u5fc5\u8981\u5de5\u5177\u3002\n <\/div>\n\n npm install vue
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u6ce8\u610f: <\/span> \u5982\u679c\u60a8\u8fd8\u4e0d\u719f\u6089\u57fa\u4e8eNode.js\u7684\u6784\u5efa\u5de5\u5177\uff0c \u8bf7\u4e0d\u8981\u4f7f\u7528\u6b64\u65b9\u6cd5\u3002\n <\/div>\n\u4f7f\u7528CLI\u547d\u4ee4\u884c<\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528CLI\u5b89\u88c5Vue.js\u5e76\u5f00\u59cb\u6fc0\u6d3b\u670d\u52a1\u5668\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7CLI\u5b89\u88c5Vue.js:\n <\/div>\n\n npm install --global vue-cli
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\n \u5b89\u88c5Vue.js cli\u5c06\u9700\u8981\u51e0\u5206\u949f\u3002\u5b8c\u6210\u540e\uff0c\u5b83\u5c06\u663e\u793aVue.js\u7684CLI\u7248\u672c\u3002\n <\/div>\n\n + vue-cli@2.9.6
added 238 packages from 205 contributors in 346.282s
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee<\/h3>\n
\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a
\n \" my_project \"\u7684\u9879\u76ee\u3002<\/strong>\n <\/div>\n\n vue init webpack my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u5728\u6b64\u8fc7\u7a0b\u4e2d\uff0c\u7cfb\u7edf\u5c06\u8981\u6c42\u60a8\u8f93\u5165Y\/n\u3002 \u8f93\u5165Y\uff0c \u7136\u540e\u7ee7\u7eed\u3002 \u5b83\u5c06\u81ea\u52a8\u4e0b\u8f7d\u6a21\u677f\u548c\u6240\u6709\u4f9d\u8d56\u9879\u3002\n <\/div>\n <\/p>\n
\n \u6210\u529f\u521b\u5efa\u9879\u76ee\u540e\uff0c\u60a8\u5c06\u770b\u5230\u7c7b\u4f3c\u4ee5\u4e0b\u7684\u6d88\u606f\u5c4f\u5e55\u622a\u56fe\u3002\n <\/div>\n <\/p>\n
\u542f\u52a8\u9879\u76ee\u548c\u670d\u52a1\u5668<\/h3>\n
\u73b0\u5728\uff0c \u521b\u5efa\u9879\u76ee\u3002 \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u8f6c\u5230\u9879\u76ee\u76ee\u5f55: <\/span> <\/p>\n\n cd my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8\u670d\u52a1\u5668: <\/span> <\/p>\n\n npm run dev
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\n \u60a8\u53ef\u4ee5\u770b\u5230\uff0c\u5728\u8fd0\u884cnpm run dev\u547d\u4ee4\u4e4b\u540e\uff0c\u670d\u52a1\u5668\u5f00\u59cb\u3002\u73b0\u5728\uff0c\u6253\u5f00\u517c\u5bb9\u7684\u6d4f\u89c8\u5668\uff0c\u5373Google Chrome\uff0c\u7136\u540e\u8fd0\u884clocalhost http: \/\/localhost: 8080\/#\/\u6253\u5f00\u60a8\u7684\u9879\u76ee\u3002\n <\/div>\n <\/p>\n
\n <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js \u5b89\u88c5zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[122],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","hentry","category-vuejc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
<html><\/span>
<head><\/span>
<script type = \"text\/javascript\" src = \"vue.min.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span><\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8ba9\u6211\u4eec\u8fdb\u5165Vue.js\u7684\u5b98\u65b9\u7f51\u7ad9
\n https:\/\/vuejs.org\/v2\/guide\/installation.html \u5e76\u6839\u636e\u60a8\u7684\u8981\u6c42\u4e0b\u8f7d vue.js\u3002\u5728\u8fd9\u91cc\uff0c\u60a8\u5c06\u83b7\u5f97\u4e24\u4e2a\u7248\u672c\u7684Vue.js: \u5f00\u53d1\u7248\u672c\u548c\u751f\u4ea7\u7248\u672c\u3002\n <\/div>\n\n \u4e0b\u56fe\u663e\u793a\u4e86\u4e24\u4e2a\u7248\u672c: <\/strong>\n <\/div>\n <\/p>\n
\n \u8be5\u5f00\u53d1\u7248\u672c\u6700\u597d\u5728\u60a8\u7684\u9879\u76ee\u4e2d\u4f7f\u7528\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u88ab\u6700\u5c0f\u5316\uff0c\u5e76\u4e14\u53ef\u4ee5\u5e2e\u52a9\u60a8\u89e3\u51b3\u8b66\u544a\u548c\u9879\u76ee\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u7684\u8c03\u8bd5\u6a21\u5f0f\u3002\u53e6\u4e00\u65b9\u9762\uff0c\u5c06\u751f\u4ea7\u7248\u672c\u6700\u5c0f\u5316\uff0c\u5982\u4e0a\u9762\u7684\u5c4f\u5e55\u5feb\u7167\u6240\u793a\u3002\n <\/div>\n\n Vue.js\u5efa\u8bae\u60a8\u5728\u5f00\u53d1\u8fc7\u7a0b\u4e2d\u4e0d\u8981\u4f7f\u7528\u7f29\u5c0f\u7248\u672c\uff0c\u56e0\u4e3a\u5b83\u4e0d\u4f1a\u5728\u51fa\u73b0\u9519\u8bef\u65f6\u663e\u793a\u5e38\u89c1\u9519\u8bef\u7684\u8b66\u544a\u3002\n <\/div>\n\u901a\u8fc7\u4f7f\u7528CDN <\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728\u5e94\u7528\u7a0b\u5e8f\u4e2d\u4f7f\u7528CDN\u5e93\u4e2d\u7684Vue.js\u6587\u4ef6\u3002\u5728\u5e94\u7528\u7a0b\u5e8f\u7684<script> \u5143\u7d20\u4e2d\u4f7f\u7528\u6b64\u94fe\u63a5
\n https:\/\/unpkg.com\/vue \uff0c\u60a8\u5c06\u83b7\u5f97\u6700\u65b0\u7248\u672c\u7684Vue.js\u3002\n <\/div>\n\n \u793a\u4f8b1: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/unpkg.com\/vue\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n CDN\u7684Vue.js\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\n \u60a8\u8fd8\u53ef\u4ee5\u5728jsDelivr\u4e0a\u83b7\u53d6Vue.js(
\n https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js )\u548ccdnjs(
\n https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/vue\/2.4.0\/vue.js )\u3002\n <\/div>\n\n \u793a\u4f8b2: <\/strong>\n <\/div>\n\n <!DOCTYPE html>
<html><\/span>
<head><\/span>
<title><\/span>My first Vue app<\/title><\/span>
<script src=\"https:\/\/cdn.jsdelivr.net\/npm\/vue\/dist\/vue.js\"><\/script><\/span>
<\/head><\/span>
<body><\/span>
<div id=\"app\">
{{ message }}
<\/div><\/span>
<script><\/span>
var app = new Vue({
el: '#app',
data: {
message: 'Vue.js second example with CDN'
}
})
<\/script><\/span>
<\/body><\/span>
<\/html><\/span>
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u8f93\u51fa: <\/strong>\n <\/div>\n\n\n Vue.js CDN\u7684\u7b2c\u4e8c\u4e2a\u793a\u4f8b
<\/span><\/code><\/pre>\n<\/p><\/div>\n<\/p><\/div>\n\u901a\u8fc7\u4f7f\u7528NPM <\/h3>\n\n \u5982\u679c\u8981\u4f7f\u7528VueJS\u8fdb\u884c\u5927\u578b\u5e94\u7528\u7a0b\u5e8f\uff0c\u5efa\u8bae\u4f7f\u7528NPM\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7npm\u8f6f\u4ef6\u5305\u5b89\u88c5Vue.js\u3002\u5b83\u5e26\u6709Browserify\u548cWebpack\u4ee5\u53ca\u5176\u4ed6\u4f7f\u5f00\u53d1\u53d8\u5f97\u5bb9\u6613\u7684\u5fc5\u8981\u5de5\u5177\u3002\n <\/div>\n\n npm install vue
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u6ce8\u610f: <\/span> \u5982\u679c\u60a8\u8fd8\u4e0d\u719f\u6089\u57fa\u4e8eNode.js\u7684\u6784\u5efa\u5de5\u5177\uff0c \u8bf7\u4e0d\u8981\u4f7f\u7528\u6b64\u65b9\u6cd5\u3002\n <\/div>\n\u4f7f\u7528CLI\u547d\u4ee4\u884c<\/h3>\n\n \u60a8\u8fd8\u53ef\u4ee5\u4f7f\u7528CLI\u5b89\u88c5Vue.js\u5e76\u5f00\u59cb\u6fc0\u6d3b\u670d\u52a1\u5668\u3002\u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u901a\u8fc7CLI\u5b89\u88c5Vue.js:\n <\/div>\n\n npm install --global vue-cli
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\n \u5b89\u88c5Vue.js cli\u5c06\u9700\u8981\u51e0\u5206\u949f\u3002\u5b8c\u6210\u540e\uff0c\u5b83\u5c06\u663e\u793aVue.js\u7684CLI\u7248\u672c\u3002\n <\/div>\n\n + vue-cli@2.9.6
added 238 packages from 205 contributors in 346.282s
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee<\/h3>\n
\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u4f7f\u7528Webpack\u521b\u5efa\u9879\u76ee\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u521b\u5efa\u4e00\u4e2a\u540d\u4e3a
\n \" my_project \"\u7684\u9879\u76ee\u3002<\/strong>\n <\/div>\n\n vue init webpack my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n\n \u5728\u6b64\u8fc7\u7a0b\u4e2d\uff0c\u7cfb\u7edf\u5c06\u8981\u6c42\u60a8\u8f93\u5165Y\/n\u3002 \u8f93\u5165Y\uff0c \u7136\u540e\u7ee7\u7eed\u3002 \u5b83\u5c06\u81ea\u52a8\u4e0b\u8f7d\u6a21\u677f\u548c\u6240\u6709\u4f9d\u8d56\u9879\u3002\n <\/div>\n <\/p>\n
\n \u6210\u529f\u521b\u5efa\u9879\u76ee\u540e\uff0c\u60a8\u5c06\u770b\u5230\u7c7b\u4f3c\u4ee5\u4e0b\u7684\u6d88\u606f\u5c4f\u5e55\u622a\u56fe\u3002\n <\/div>\n <\/p>\n
\u542f\u52a8\u9879\u76ee\u548c\u670d\u52a1\u5668<\/h3>\n
\u73b0\u5728\uff0c \u521b\u5efa\u9879\u76ee\u3002 \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u8f6c\u5230\u9879\u76ee\u76ee\u5f55: <\/span> <\/p>\n\n cd my_project
<\/span><\/code><\/pre>\n<\/p><\/div>\n \u4f7f\u7528\u4ee5\u4e0b\u547d\u4ee4\u542f\u52a8\u670d\u52a1\u5668: <\/span> <\/p>\n\n npm run dev
<\/span><\/code><\/pre>\n<\/p><\/div>\n
\n <\/p>\n
\n \u60a8\u53ef\u4ee5\u770b\u5230\uff0c\u5728\u8fd0\u884cnpm run dev\u547d\u4ee4\u4e4b\u540e\uff0c\u670d\u52a1\u5668\u5f00\u59cb\u3002\u73b0\u5728\uff0c\u6253\u5f00\u517c\u5bb9\u7684\u6d4f\u89c8\u5668\uff0c\u5373Google Chrome\uff0c\u7136\u540e\u8fd0\u884clocalhost http: \/\/localhost: 8080\/#\/\u6253\u5f00\u60a8\u7684\u9879\u76ee\u3002\n <\/div>\n <\/p>\n
\n <\/body>
\n<\/html><\/p>\n","protected":false},"excerpt":{"rendered":"Vue.js \u5b89\u88c5zh-cn","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[122],"tags":[],"class_list":["post-969","post","type-post","status-publish","format-standard","hentry","category-vuejc"],"_links":{"self":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969"}],"collection":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/comments?post=969"}],"version-history":[{"count":0,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/posts\/969\/revisions"}],"wp:attachment":[{"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/media?parent=969"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/categories?post=969"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bianchenghao6.com\/wp-json\/wp\/v2\/tags?post=969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}