{"id":1555,"date":"2020-04-30T17:12:03","date_gmt":"2020-04-30T09:12:03","guid":{"rendered":"https:\/\/www.strongd.net\/?p=1555"},"modified":"2020-04-30T17:12:03","modified_gmt":"2020-04-30T09:12:03","slug":"%e5%be%9e%e9%9b%b6%e9%96%8b%e5%a7%8b%e5%bb%ba%e9%80%a0%e4%b8%80%e5%80%8bvue%e9%a0%85%e7%9b%ae","status":"publish","type":"post","link":"https:\/\/www.strongd.net\/?p=1555","title":{"rendered":"\u5f9e\u96f6\u958b\u59cb\u5efa\u9020\u4e00\u500bvue\u9805\u76ee"},"content":{"rendered":"<div>\n<div>\n<h3 data-id=\"heading-0\"><span>\u6e96\u5099\u5de5\u4f5c<\/span><\/h3>\n<p><span>\u74b0\u5883\u4f9d\u8cf4\uff1a<\/span><a href=\"https:\/\/nodejs.org\/en\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>Node.js<\/span><\/a><span>\uff1b vue\u5b98\u65b9\u8173\u624b\u67b6\uff1a\u00a0 <\/span><a href=\"https:\/\/www.npmjs.com\/package\/vue-cli\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>vue-cli<\/span><\/a><span>\uff1b<\/span><\/p>\n<p><span>\u5177\u9ad4\u600e\u9ebc\u5b89\u88ddnodejs\u548cvue-cli\u7684\u90e8\u5206\u5c31\u4e0d\u518d\u5177\u9ad4\u8aaa\u660e\u4e86\uff0c\u8acb\u67e5\u770b\u5b98\u65b9\u6587\u6a94\u6309\u6b65\u9a5f\u57f7\u884c\u5373\u53ef\uff08\u5b89\u88ddnodejs\u6703\u5b89\u88ddnpm\uff08\u5305\u7ba1\u7406\u5de5\u5177\uff09\uff0cvue-cli\u4f9d\u8cf4npm\u4f86\u5b89\u88dd\uff0c\u6ce8\u610f\u9019\u500b\u5148\u5f8c\u95dc\u4fc2\uff09\u3002<\/span><\/p>\n<h3 data-id=\"heading-1\"><span>\u80cc\u666f\u77e5\u8b58<\/span><\/h3>\n<p><a href=\"https:\/\/cn.vuejs.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>vue.js\u6838\u5fc3<\/span><\/a><span> \u00a0\u6846\u67b6<\/span><\/p>\n<p><a href=\"https:\/\/doc.webpack-china.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>webpack<\/span><\/a><span> \u00a0\u6253\u5305\u5de5\u5177\uff0c\u4f7f\u7528vue-cli\u521d\u59cb\u5316\u9805\u76ee\u7684\u6642\u5019\uff0c\u6211\u5011\u9078\u64c7webpack\u4f5c\u70ba\u6211\u5011\u7684\u6a21\u584a\u6253\u5305\u5de5\u5177<\/span><\/p>\n<h3 data-id=\"heading-2\"><span>\u958b\u59cb\u52d5\u624b<\/span><\/h3>\n<p><span>\u521d\u59cb\u5316\u9805\u76ee\uff0c\u9078\u64c7webpack\u4f5c\u70ba\u6253\u5305\u5de5\u5177\uff0c\u9805\u76ee\u540d\u7a31\u662fmy-project\uff0c\u7136\u5f8c\u6309\u7167\u63d0\u793a\u9032\u884c\u4e00\u4e9b\u914d\u7f6e\uff0c\u904e\u7a0b\u4e2d\u53ef\u4ee5\u9078\u64c7\u4f7f\u7528<\/span><a href=\"https:\/\/router.vuejs.org\/zh-cn\/essentials\/getting-started.html\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>vue-router<\/span><\/a><span>\uff08\u63a8\u85a6\u4f7f\u7528\uff09\uff1b\u9019\u4e9b\u914d\u7f6e\u6700\u7d42\u6703\u5beb\u5230\u9805\u76ee\u7684package.json\u4e2d\u548c\u5b89\u88dd\u76f8\u61c9\u7684\u6a21\u584a<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">vue init webpack my-project\r\n<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<p><span>\u63a5\u4e0b\u4f86\u4f7f\u7528\u81ea\u5df1\u719f\u6089\u7684\u7de8\u8f2f\u5668\u6253\u958b\u9805\u76ee\uff0c\u76ee\u9304\u7d50\u69cb\u5927\u81f4\u662f\u9019\u6a23\u7684<\/span><\/p>\n<p><img decoding=\"async\" class=\"lazyload inited loaded\" src=\"https:\/\/user-gold-cdn.xitu.io\/2018\/2\/8\/1617508d61f4d3d2?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-src=\"https:\/\/user-gold-cdn.xitu.io\/2018\/2\/8\/1617508d61f4d3d2?imageView2\/0\/w\/1280\/h\/960\/format\/webp\/ignore-error\/1\" data-width=\"424\" data-height=\"329\" \/><\/p>\n<p><span>\u69cb\u5efa\u548c\u914d\u7f6e\u76ee\u9304\uff1awebpack\u6253\u5305\u7684\u76f8\u95dc\u914d\u7f6e\u6587\u4ef6<\/span><\/p>\n<p><span>src\u76ee\u9304\uff1a\u6211\u5011\u6700\u7d42\u7de8\u5beb\u696d\u52d9\u4ee3\u78bc\u7684\u5730\u65b9<\/span><\/p>\n<p><span>static\u76ee\u9304\uff1a\u6211\u4e5f\u4e0d\u77e5\u9053\u5e79\u561b\u7528\u7684<\/span><\/p>\n<h3 data-id=\"heading-3\"><span>package.json<\/span><\/h3>\n<p><span>package.json\u662f\u9805\u76ee\u6700\u57fa\u790e\u7684\u914d\u7f6e\u6587\u4ef6\u3002\u53ef\u4ee5\u767c\u73fe\u88e1\u9762\u7684\u5f88\u591a\u5167\u5bb9\uff0c\u4f8b\u5982\u540d\u7a31\uff0c\u4f5c\u8005\uff0c\u63cf\u8ff0\u7b49\u5c31\u662f\u525b\u624d\u521d\u59cb\u5316\u9805\u76ee\u6642\u6211\u5011\u586b\u5145\u7684\u503c\uff1b dependencies\u548cdevDependencies\u662f\u9805\u76ee\u4f9d\u8cf4\u7684\u5305\uff0c\u904b\u884c\u9805\u76ee\u4e4b\u524d\u9700\u8981\u5148\u57f7\u884cnpm install\u4f86\u5b89\u88dd\u9805\u76ee\u6240\u4f9d\u8cf4\u7684\u5305<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">npm install<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<p><span>\u7136\u5f8c\u6211\u5011\u4f86\u91cd\u9ede\u95dc\u8a3b\u4e00\u4e0bscripts<\/span><\/p>\n<p><span>npm\u5141\u8a31\u5728<\/span><code>package.json<\/code><span>\u6587\u4ef6\u88e1\u9762\uff0c\u4f7f\u7528<\/span><code>scripts<\/code><span>\u5206\u5340\u5b9a\u7fa9\u8173\u672c\u547d\u4ee4\u3002\u5176\u4e2ddev\u548cstart\u90fd\u662f\u555f\u52d5\u672c\u5730\u958b\u767c\u74b0\u5883\u7684\uff0clint\u662f\u505a\u8a9e\u6cd5\u6821\u6b63\u7684\uff0cbuild\u662f\u6253\u5305\u6700\u7d42\u5728\u7dda\u4ee3\u78bc\u7684<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">{\r\n  <span class=\"hljs-string\">\"name\"<\/span>: <span class=\"hljs-string\">\"my-project\"<\/span>,\r\n  <span class=\"hljs-string\">\"version\"<\/span>: <span class=\"hljs-string\">\"1.0.0\"<\/span>,\r\n  <span class=\"hljs-string\">\"description\"<\/span>: <span class=\"hljs-string\">\"A Vue.js project\"<\/span>,\r\n  <span class=\"hljs-string\">\"author\"<\/span>: <span class=\"hljs-string\">\"ideagay &lt;xxxx@163.com&gt;\"<\/span>,\r\n  <span class=\"hljs-string\">\"private\"<\/span>: <span class=\"hljs-literal\">true<\/span>,\r\n  <span class=\"hljs-string\">\"scripts\"<\/span>: {\r\n    <span class=\"hljs-string\">\"dev\"<\/span>: <span class=\"hljs-string\">\"webpack-dev-server --inline --progress --config build\/webpack.dev.conf.js\"<\/span>,\r\n    <span class=\"hljs-string\">\"start\"<\/span>: <span class=\"hljs-string\">\"npm run dev\"<\/span>,\r\n    <span class=\"hljs-string\">\"lint\"<\/span>: <span class=\"hljs-string\">\"eslint --ext .js,.vue src\"<\/span>,\r\n    <span class=\"hljs-string\">\"build\"<\/span>: <span class=\"hljs-string\">\"node build\/build.js\"<\/span>\r\n  },\r\n  <span class=\"hljs-string\">\"dependencies\"<\/span>: {\r\n    <span class=\"hljs-string\">\"vue\"<\/span>: <span class=\"hljs-string\">\"^2.5.2\"<\/span>,\r\n    <span class=\"hljs-string\">\"vue-router\"<\/span>: <span class=\"hljs-string\">\"^3.0.1\"<\/span>\r\n  },\r\n  <span class=\"hljs-string\">\"devDependencies\"<\/span>: {...},\r\n  <span class=\"hljs-string\">\"engines\"<\/span>: {\r\n    <span class=\"hljs-string\">\"node\"<\/span>: <span class=\"hljs-string\">\"&gt;= 6.0.0\"<\/span>,\r\n    <span class=\"hljs-string\">\"npm\"<\/span>: <span class=\"hljs-string\">\"&gt;= 3.0.0\"<\/span>\r\n  },\r\n  <span class=\"hljs-string\">\"browserslist\"<\/span>: [\r\n    <span class=\"hljs-string\">\"&gt; 1%\"<\/span>,\r\n    <span class=\"hljs-string\">\"last 2 versions\"<\/span>,\r\n    <span class=\"hljs-string\">\"not ie &lt;= 8\"<\/span>\r\n  ]\r\n}\r\n\r\n<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<p><span>\u70ba\u4e86\u7d71\u4e00\u5718\u968a\u5167\u7684\u4ee3\u78bc\u98a8\u683c\uff0c\u6211\u5011\u4e00\u822c\u6703\u9078\u64c7\u4e00\u4e9b\u8a9e\u6cd5\u6821\u9a57\u63d2\u4ef6\u4f86\u5be6\u73fe\u4ee3\u78bc\u98a8\u683c\u7684\u7d71\u4e00\u3002\u9019\u88e1\u6211\u5011\u9078\u64c7eslint\u4f5c\u70ba\u6211\u5011\u7684\u4ee3\u78bc\u6aa2\u67e5\u63d2\u4ef6\u3002\u9996\u5148\u6211\u5011\u4f86\u6539\u4e00\u4e0b<\/span><a href=\"https:\/\/eslint.org\/\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>eslint<\/span><\/a><span>\uff08\u8a9e\u6cd5\u6821\u9a57\uff09\u7684\u76f8\u95dc\u914d\u7f6e\uff0c \uff1a\u6839\u76ee\u9304\u4e0b\u7684.eslintrc.js\uff0c\u5728\u898f\u5247\u4e0b\u9762\u52a0\u4e00\u500b\u7d50\u5c3e\u5206\u865f\u7684\u914d\u7f6e\uff0c\u5f37\u5236\u672b\u5c3e\u8981\u52a0\u5206\u865f\uff0c\u990a\u6210\u597d\u7fd2\u6163\uff1b\u7136\u5f8c\u628asrc\u4e0b\u9762\u6240\u6709\u6587\u4ef6\u88e1\u7684\u4ee3\u78bc\u6240\u5728\u5206\u865f\u7684\u88dc\u5168\uff0c\u4e0d\u7136\u7de8\u8b6f\u6703\u4e0d\u901a\u904e\uff1b\u5176\u4ed6\u98a8\u683c\u6839\u64da\u7fd2\u6163\u81ea\u5df1\u914d\u7f6e\u5427\u3002<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\"><span class=\"hljs-string\">\"semi\"<\/span>: [\r\n  2,\r\n  <span class=\"hljs-string\">\"always\"<\/span>\r\n]<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<h3 data-id=\"heading-4\"><span>\u904b\u884c\u9805\u76ee\u770b\u4e0b\u6548\u679c<\/span><\/h3>\n<p><span>\uff1a\u547d\u4ee4\u884c\u5de5\u5177\uff0c\u5728\u7576\u524d\u76ee\u9304\u4e0b\u57f7\u884c\u4ee5\u4e0b\u547d\u4ee4\uff0c\u4e00\u5207\u9806\u5229\u7684\u8a71\uff0c\u6703\u81ea\u52d5\u6253\u958b\u5728\u700f\u89bd\u5668\u4e0a\u6253\u958blocalhost\uff1a8080<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\"><span class=\"hljs-comment\"># \u9ed8\u8ba48080\u7aef\u53e3<\/span>\r\nnpm run dev\r\n\r\n<span class=\"hljs-comment\"># \u4e5f\u53ef\u4ee5\u6307\u5b9a\u7aef\u53e3<\/span>\r\nPORT=8090 npm run dev<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<h3 data-id=\"heading-5\"><span>\u6dfb\u52a0\u696d\u52d9\u4ee3\u78bc<\/span><\/h3>\n<p><span>src\u76ee\u9304\u662f\u6211\u5011\u4e3b\u8981\u7de8\u5beb\u696d\u52d9\u4ee3\u78bc\u7684\u5730\u65b9\uff0c\u53ef\u53c3\u8003\u4ee5\u4e0b\u76ee\u9304\u7d50\u69cb\u914d\u7f6e<\/span><\/p>\n<p><span>\u8cc7\u7522js\uff0ccss\uff0c\u5716\u7247\u7b49\u8cc7\u6e90\u76ee\u9304<\/span><\/p>\n<p><span>\u7d44\u4ef6\u516c\u5171\u7d44\u4ef6\u76ee\u9304<\/span><\/p>\n<p><span>\u8def\u7531\u5668vue-router\u914d\u7f6e\u76ee\u9304<\/span><\/p>\n<p><span>views\u9801\u9762\u7d44\u4ef6\u76ee\u9304<\/span><\/p>\n<p><span>main.js\u7a0b\u5e8f\u4e3b\u5165\u53e3\uff0c\u4e00\u822c\u5728\u9019\u88e1\u6dfb\u52a0\u63d2\u4ef6\uff0c\u5982\u5410\u53f8\uff0c\u88dd\u8f09\u7b49\uff0c\u53ef\u81ea\u5df1\u7de8\u5beb\u6216\u4f7f\u7528\u7b2c\u4e09\u65b9\uff0c\u5982<\/span><a href=\"http:\/\/element.eleme.io\/#\/zh-CN\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>ui<\/span><\/a><\/p>\n<p><span>App.vue\u6839\u7d44\u4ef6<\/span><\/p>\n<h3 data-id=\"heading-6\"><span>main.js<\/span><\/h3>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">import Vue from <span class=\"hljs-string\">'vue'<\/span>;\r\nimport App from <span class=\"hljs-string\">'.\/App'<\/span>;\r\nimport ElementUI from <span class=\"hljs-string\">'element-ui'<\/span>;\r\nimport <span class=\"hljs-string\">'element-ui\/lib\/theme-chalk\/index.css'<\/span>;\r\nimport router from <span class=\"hljs-string\">'.\/router'<\/span>;\r\n\r\nVue.config.productionTip = <span class=\"hljs-literal\">false<\/span>;\r\n\r\nVue.use(ElementUI);\r\n\r\n\/* eslint-disable no-new *\/\r\nnew Vue({\r\n  el: <span class=\"hljs-string\">'#app'<\/span>,\r\n  router,\r\n  components: { App },\r\n  template: <span class=\"hljs-string\">'&lt;App\/&gt;'<\/span>\r\n});<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<h3 data-id=\"heading-7\"><span>\u8def\u7531<\/span><\/h3>\n<p><span>\u5f80router \/ index.js\u88e1\u6dfb\u52a0\u9996\u9801\u7684\u914d\u7f6e<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">import Vue from <span class=\"hljs-string\">'vue'<\/span>;\r\nimport Router from <span class=\"hljs-string\">'vue-router'<\/span>;\r\nimport Home from <span class=\"hljs-string\">'@\/views\/index'<\/span>;\r\n\r\nVue.use(Router);\r\n\r\n<span class=\"hljs-built_in\">export<\/span> default new Router({\r\n  routes: [\r\n    {\r\n      path: <span class=\"hljs-string\">'\/'<\/span>,\r\n      name: <span class=\"hljs-string\">'home'<\/span>,\r\n      component: Home\r\n    }\r\n  ]\r\n});<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<h3 data-id=\"heading-8\"><span>\u7db2\u7d61\u8acb\u6c42<\/span><\/h3>\n<p><span>\u7db2\u7d61\u8acb\u6c42\u53ef\u4ee5\u4f7f\u7528axios\uff0c\u7136\u5f8c\u6839\u64da\u696d\u52d9\u518d\u9032\u884c\u4e00\u4e9b\u5c01\u88dd<\/span><\/p>\n<p><span>\u8cc7\u7522\/js\/api\/ajax.js<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">import axios from <span class=\"hljs-string\">'axios'<\/span>;\r\nvar qs = require(<span class=\"hljs-string\">'qs'<\/span>);\r\n\r\nvar instance = axios.create({\r\n   baseURL: <span class=\"hljs-string\">'http:\/\/xxx.com\/'<\/span>,\r\n   timeout: 20000,\r\n   headers: {\r\n      <span class=\"hljs-string\">'Content-Type'<\/span>: <span class=\"hljs-string\">'application\/x-www-form-urlencoded'<\/span>\r\n   }\r\n});\r\n\r\nconst ajax = (url, params) =&gt; {\r\n   <span class=\"hljs-built_in\">return<\/span> new Promise((resolve, reject) =&gt; {\r\n      instance({\r\n         url: url,\r\n         method: <span class=\"hljs-string\">'post'<\/span>,\r\n         data: qs.stringify(params)\r\n      }).then(res =&gt; {\r\n         console.log(res);\r\n         <span class=\"hljs-keyword\">if<\/span> (res.data.success === <span class=\"hljs-literal\">true<\/span>) {\r\n            resolve(res.data.data);\r\n         } <span class=\"hljs-keyword\">else<\/span> {\r\n            throw res;\r\n         }\r\n      }).catch(err =&gt; {\r\n         console.error(err);\r\n         reject(err);\r\n      })\r\n   })\r\n};\r\n\r\n<span class=\"hljs-built_in\">export<\/span> default ajax;<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">import Ajax from <span class=\"hljs-string\">'@\/assets\/js\/api\/ajax.js'<\/span>;\r\nAjax(`\/tui\/search`, {\r\n   <span class=\"hljs-string\">'key'<\/span>: this.keyword\r\n}).then(res =&gt; {\r\n   console.log(res);\r\n});\r\n<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<h3 data-id=\"heading-9\"><span>\u6a23\u5f0f<\/span><\/h3>\n<p><span>\u4f7f\u7528<\/span><a href=\"https:\/\/github.com\/necolas\/normalize.css\" target=\"_blank\" rel=\"nofollow noopener noreferrer\"><span>normalize.css<\/span><\/a><span>\u91cd\u7f6e\u57fa\u790e\u6a23\u5f0f\uff0c\u6d88\u9664\u4e0d\u540c\u700f\u89bd\u5668\u9593\u7684\u5dee\u7570\uff0c\u5728\u6839\u7d44\u4ef6App.vue\u4e2d\u7d04\u6703\u5c31\u597d\u4e86<\/span><\/p>\n<pre class=\"hljs bash\"><code class=\"hljs bash copyable\" lang=\"bash\">&lt;script&gt;\r\nimport <span class=\"hljs-string\">'normalize.css'<\/span>;\r\n\r\n<span class=\"hljs-built_in\">export<\/span> default {\r\n   name: <span class=\"hljs-string\">'App'<\/span>\r\n}\r\n&lt;\/script&gt;<span class=\"copy-code-btn\">\u590d\u5236\u4ee3\u7801<\/span><\/code><\/pre>\n<p><span>\u73fe\u5728\u4e00\u822c\u696d\u52d9\u6240\u9700\u7684\u6846\u67b6\u5df2\u7d93\u57fa\u672c\u5efa\u9020\u5b8c\u6210\u3002<\/span><\/p>\n<\/div>\n<p>\u4f5c\u8005\uff1aideagay<br \/>\n\u94fe\u63a5\uff1ahttps:\/\/juejin.im\/post\/5a7c18d36fb9a0633e51c458<br \/>\n\u6765\u6e90\uff1a\u6398\u91d1<br \/>\n\u8457\u4f5c\u6743\u5f52\u4f5c\u8005\u6240\u6709\u3002\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u8054\u7cfb\u4f5c\u8005\u83b7\u5f97\u6388\u6743\uff0c\u975e\u5546\u4e1a\u8f6c\u8f7d\u8bf7\u6ce8\u660e\u51fa\u5904\u3002<\/p><\/div>\n","protected":false},"excerpt":{"rendered":"<p>\u6e96\u5099\u5de5\u4f5c \u74b0\u5883\u4f9d\u8cf4\uff1aNode.js\uff1b vue\u5b98\u65b9\u8173\u624b\u67b6\uff1a\u00a0 vue-cli\uff1b \u5177\u9ad4\u600e\u9ebc\u5b89\u88ddnodejs\u548cvue-cli\u7684\u90e8\u5206\u5c31\u4e0d\u518d\u5177\u9ad4\u8aaa\u660e\u4e86\uff0c\u8acb\u67e5\u770b\u5b98\u65b9\u6587\u6a94\u6309\u6b65\u9a5f\u57f7\u884c\u5373\u53ef\uff08\u5b89\u88ddnodejs\u6703\u5b89\u88ddnpm\uff08\u5305\u7ba1\u7406\u5de5\u5177\uff09\uff0cvue-cli\u4f9d\u8cf4npm\u4f86\u5b89\u88dd\uff0c\u6ce8\u610f\u9019\u500b\u5148\u5f8c\u95dc\u4fc2\uff09\u3002 \u80cc\u666f\u77e5\u8b58 vue.js\u6838\u5fc3 \u00a0\u6846\u67b6 webpack \u00a0\u6253\u5305\u5de5\u5177\uff0c\u4f7f\u7528vue-cli\u521d\u59cb\u5316\u9805\u76ee\u7684\u6642\u5019\uff0c\u6211\u5011\u9078\u64c7webpack\u4f5c\u70ba\u6211\u5011\u7684\u6a21\u584a\u6253\u5305\u5de5\u5177 \u958b\u59cb\u52d5\u624b \u521d\u59cb\u5316\u9805\u76ee\uff0c\u9078\u64c7webpack\u4f5c\u70ba\u6253\u5305\u5de5\u5177\uff0c\u9805\u76ee\u540d\u7a31\u662fmy-project\uff0c\u7136\u5f8c\u6309\u7167\u63d0\u793a\u9032\u884c\u4e00\u4e9b\u914d\u7f6e\uff0c\u904e\u7a0b\u4e2d\u53ef\u4ee5\u9078\u64c7\u4f7f\u7528vue-router\uff08\u63a8\u85a6\u4f7f\u7528\uff09\uff1b\u9019\u4e9b\u914d\u7f6e\u6700\u7d42\u6703\u5beb\u5230\u9805\u76ee\u7684package.json\u4e2d\u548c\u5b89\u88dd\u76f8\u61c9\u7684\u6a21\u584a vue init webpack my-project \u590d\u5236\u4ee3\u7801 \u63a5\u4e0b\u4f86\u4f7f\u7528\u81ea\u5df1\u719f\u6089\u7684\u7de8\u8f2f\u5668\u6253\u958b\u9805\u76ee\uff0c\u76ee\u9304\u7d50\u69cb\u5927\u81f4\u662f\u9019\u6a23\u7684 \u69cb\u5efa\u548c\u914d\u7f6e\u76ee\u9304\uff1awebpack\u6253\u5305\u7684\u76f8\u95dc\u914d\u7f6e\u6587\u4ef6 src\u76ee\u9304\uff1a\u6211\u5011\u6700\u7d42\u7de8\u5beb\u696d\u52d9\u4ee3\u78bc\u7684\u5730\u65b9 static\u76ee\u9304\uff1a\u6211\u4e5f\u4e0d\u77e5\u9053\u5e79\u561b\u7528\u7684 package.json package.json\u662f\u9805\u76ee\u6700\u57fa\u790e\u7684\u914d\u7f6e\u6587\u4ef6\u3002\u53ef\u4ee5\u767c\u73fe\u88e1\u9762\u7684\u5f88\u591a\u5167\u5bb9\uff0c\u4f8b\u5982\u540d\u7a31\uff0c\u4f5c\u8005\uff0c\u63cf\u8ff0\u7b49\u5c31\u662f\u525b\u624d\u521d\u59cb\u5316\u9805\u76ee\u6642\u6211\u5011\u586b\u5145\u7684\u503c\uff1b dependencies\u548cdevDependencies\u662f\u9805\u76ee\u4f9d\u8cf4\u7684\u5305\uff0c\u904b\u884c\u9805\u76ee\u4e4b\u524d\u9700\u8981\u5148\u57f7\u884cnpm install\u4f86\u5b89\u88dd\u9805\u76ee\u6240\u4f9d\u8cf4\u7684\u5305 npm install\u590d\u5236\u4ee3\u7801 \u7136\u5f8c\u6211\u5011\u4f86\u91cd\u9ede\u95dc\u8a3b\u4e00\u4e0bscripts npm\u5141\u8a31\u5728package.json\u6587\u4ef6\u88e1\u9762\uff0c\u4f7f\u7528scripts\u5206\u5340\u5b9a\u7fa9\u8173\u672c\u547d\u4ee4\u3002\u5176\u4e2ddev\u548cstart\u90fd\u662f\u555f\u52d5\u672c\u5730\u958b\u767c\u74b0\u5883\u7684\uff0clint\u662f\u505a\u8a9e\u6cd5\u6821\u6b63\u7684\uff0cbuild\u662f\u6253\u5305\u6700\u7d42\u5728\u7dda\u4ee3\u78bc\u7684 { &#8220;name&#8221;: &#8220;my-project&#8221;, &#8220;version&#8221;: &#8220;1.0.0&#8221;, &#8220;description&#8221;: &#8220;A Vue.js project&#8221;, &#8220;author&#8221;: &#8220;ideagay &lt;xxxx@163.com&gt;&#8221;, &#8220;private&#8221;: true, &#8220;scripts&#8221;: { &#8220;dev&#8221;: &#8220;webpack-dev-server &#8211;inline &#8211;progress &#8211;config build\/webpack.dev.conf.js&#8221;, &#8220;start&#8221;: &#8220;npm run dev&#8221;, &hellip; <a href=\"https:\/\/www.strongd.net\/?p=1555\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">\u5f9e\u96f6\u958b\u59cb\u5efa\u9020\u4e00\u500bvue\u9805\u76ee<\/span><\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[20],"tags":[241,242],"class_list":["post-1555","post","type-post","status-publish","format-standard","hentry","category-20","tag-vue","tag-webpack"],"_links":{"self":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/1555","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=1555"}],"version-history":[{"count":1,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/1555\/revisions"}],"predecessor-version":[{"id":1556,"href":"https:\/\/www.strongd.net\/index.php?rest_route=\/wp\/v2\/posts\/1555\/revisions\/1556"}],"wp:attachment":[{"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=1555"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=1555"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.strongd.net\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=1555"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}