[{"data":1,"prerenderedAt":350},["ShallowReactive",2],{"page-\u002Fvue\u002Fvue-cli4笔记":3},{"id":4,"title":5,"body":6,"description":41,"extension":343,"meta":344,"navigation":345,"path":346,"seo":347,"stem":348,"__hash__":349},"content\u002FVue\u002FVue-Cli4笔记.md","Vue-Cli4与Vue-Cli2区别浅谈",{"type":7,"value":8,"toc":334},"minimark",[9,13,24,28,35,64,79,90,93,102,130,137,140,178,181,206,221,224,253,257,330],[10,11,5],"h1",{"id":12},"vue-cli4与vue-cli2区别浅谈",[14,15,16],"blockquote",{},[17,18,19,20,23],"p",{},"当时学习 Vue-Cli 的时候看的是 Vue-Cli2 的相关教程，当把 package.json 上传 github 的时候提醒有安全问题，于是准备使用最新版的 Vue-Cli ，我一直认为才更新到 Vue-Cli3，没想到都到Vue-Cli4了",[21,22],"br",{},"\n可能有很多特性在 Vue-Cli3 时就有了，做个笔记记录一下",[25,26,27],"h2",{"id":27},"创建工程",[17,29,30,34],{},[31,32,33],"code",{},"Vue-Cli4","文档推荐以下两种方式创建项目",[36,37,42],"pre",{"className":38,"code":39,"language":40,"meta":41,"style":41},"language-shell shiki shiki-themes github-light github-dark","vue create my-project\n# OR\nvue ui # 可视化操作\n","shell","",[31,43,44,52,58],{"__ignoreMap":41},[45,46,49],"span",{"class":47,"line":48},"line",1,[45,50,51],{},"vue create my-project\n",[45,53,55],{"class":47,"line":54},2,[45,56,57],{},"# OR\n",[45,59,61],{"class":47,"line":60},3,[45,62,63],{},"vue ui # 可视化操作\n",[17,65,66,67,70,71,74,75,78],{},"如果仍然需要使用",[31,68,69],{},"vue init webpack","初始化项目的话，则需要安装",[31,72,73],{},"cli-init","，但是拉取的仍然是",[31,76,77],{},"Vue-Cli2.0","版本",[36,80,84],{"className":81,"code":82,"language":83,"meta":41,"style":41},"language-powershell shiki shiki-themes github-light github-dark","npm install -g @vue\u002Fcli-init\n","powershell",[31,85,86],{"__ignoreMap":41},[45,87,88],{"class":47,"line":48},[45,89,82],{},[25,91,92],{"id":92},"启动服务",[17,94,95,97,98,101],{},[31,96,33],{},"中使用",[31,99,100],{},"npm run serve","运行开发模式，其配置为",[36,103,107],{"className":104,"code":105,"language":106,"meta":41,"style":41},"language-javascript shiki shiki-themes github-light github-dark","\"scripts\": {\n    \"serve\": \"vue-cli-service serve\",\n    \"build\": \"vue-cli-service build\"\n  }\n","javascript",[31,108,109,114,119,124],{"__ignoreMap":41},[45,110,111],{"class":47,"line":48},[45,112,113],{},"\"scripts\": {\n",[45,115,116],{"class":47,"line":54},[45,117,118],{},"    \"serve\": \"vue-cli-service serve\",\n",[45,120,121],{"class":47,"line":60},[45,122,123],{},"    \"build\": \"vue-cli-service build\"\n",[45,125,127],{"class":47,"line":126},4,[45,128,129],{},"  }\n",[17,131,132,133,136],{},"也可以使用",[31,134,135],{},"vue ui","进行可视化操作",[25,138,139],{"id":139},"浏览器兼容",[17,141,142,145,146,149,150,153,154,157,158,161,162,165,166,169,170,177],{},[31,143,144],{},"package.json","文件里的",[31,147,148],{},"browserslist","字段 (或一个单独的",[31,151,152],{},".browserslistrc","文件)，指定了项目的目标浏览器的范围。这个值会被",[31,155,156],{},"@babel\u002Fpreset-env","和",[31,159,160],{},"Autoprefixer","用来确定需要转译的",[31,163,164],{},"JavaScript","特性和需要添加的",[31,167,168],{},"CSS","浏览器前缀。查阅 ",[171,172,176],"a",{"href":173,"rel":174},"https:\u002F\u002Fgithub.com\u002Fai\u002Fbrowserslist",[175],"nofollow","此处"," 了解如何指定浏览器范围",[25,179,180],{"id":180},"代码拆分",[36,182,184],{"className":104,"code":183,"language":106,"meta":41,"style":41},"    \u002F\u002F route level code-splitting\n    \u002F\u002F this generates a separate chunk (about.[hash].js) for this route\n    \u002F\u002F which is lazy-loaded when the route is visited.https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002Fhtml-and-static-assets.html#preload\n    \u002F* webpackChunkName: \"about\" *\u002F\n",[31,185,186,191,196,201],{"__ignoreMap":41},[45,187,188],{"class":47,"line":48},[45,189,190],{},"    \u002F\u002F route level code-splitting\n",[45,192,193],{"class":47,"line":54},[45,194,195],{},"    \u002F\u002F this generates a separate chunk (about.[hash].js) for this route\n",[45,197,198],{"class":47,"line":60},[45,199,200],{},"    \u002F\u002F which is lazy-loaded when the route is visited.https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002Fhtml-and-static-assets.html#preload\n",[45,202,203],{"class":47,"line":126},[45,204,205],{},"    \u002F* webpackChunkName: \"about\" *\u002F\n",[17,207,208,211,212,215,216],{},[31,209,210],{},"vue-router","提供了一个",[31,213,214],{},"About","组件示例，为此路由生成单独的块，访问路由时延迟加载，可参阅 ",[171,217,220],{"href":218,"rel":219},"https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002Fhtml-and-static-assets.html#preload",[175],"Prefetch与Preload",[25,222,223],{"id":223},"配置相关",[17,225,226,228,229,232,233,236,237,240,241,244,245,247,248],{},[31,227,33],{},"没有了配置",[31,230,231],{},"webpack","的",[31,234,235],{},"config","与",[31,238,239],{},"build","目录，配置由",[31,242,243],{},"vue.config.js","定义，",[31,246,243],{},"文件定义于根目录，相关配置信息参阅 ",[171,249,252],{"href":250,"rel":251},"https:\u002F\u002Fcli.vuejs.org\u002Fzh\u002Fguide\u002Fwebpack.html#%E7%AE%80%E5%8D%95%E7%9A%84%E9%85%8D%E7%BD%AE%E6%96%B9%E5%BC%8F",[175],"Webpack配置",[254,255,256],"h3",{"id":256},"配置代理",[36,258,260],{"className":104,"code":259,"language":106,"meta":41,"style":41},"module.exports = {\n    devServer: {\n        proxy: {\n            '\u002F': {\n                target: 'http:\u002F\u002Fwww.example.com',\n                 ws: true,\n                changeOrigin: true,\n                pathRewrite: {}\n            }\n        }\n    }\n}\n",[31,261,262,267,272,277,282,288,294,300,306,312,318,324],{"__ignoreMap":41},[45,263,264],{"class":47,"line":48},[45,265,266],{},"module.exports = {\n",[45,268,269],{"class":47,"line":54},[45,270,271],{},"    devServer: {\n",[45,273,274],{"class":47,"line":60},[45,275,276],{},"        proxy: {\n",[45,278,279],{"class":47,"line":126},[45,280,281],{},"            '\u002F': {\n",[45,283,285],{"class":47,"line":284},5,[45,286,287],{},"                target: 'http:\u002F\u002Fwww.example.com',\n",[45,289,291],{"class":47,"line":290},6,[45,292,293],{},"                 ws: true,\n",[45,295,297],{"class":47,"line":296},7,[45,298,299],{},"                changeOrigin: true,\n",[45,301,303],{"class":47,"line":302},8,[45,304,305],{},"                pathRewrite: {}\n",[45,307,309],{"class":47,"line":308},9,[45,310,311],{},"            }\n",[45,313,315],{"class":47,"line":314},10,[45,316,317],{},"        }\n",[45,319,321],{"class":47,"line":320},11,[45,322,323],{},"    }\n",[45,325,327],{"class":47,"line":326},12,[45,328,329],{},"}\n",[331,332,333],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}",{"title":41,"searchDepth":54,"depth":54,"links":335},[336,337,338,339,340],{"id":27,"depth":54,"text":27},{"id":92,"depth":54,"text":92},{"id":139,"depth":54,"text":139},{"id":180,"depth":54,"text":180},{"id":223,"depth":54,"text":223,"children":341},[342],{"id":256,"depth":60,"text":256},"md",{},true,"\u002Fvue\u002Fvue-cli4笔记",{"title":5,"description":41},"Vue\u002FVue-Cli4笔记","6qNUaX05hStSUKOS66yMdiRj38sSRUPMGZhNDwdbieE",1791042468204]