<p><code></p> <h1 id="articleHeader0"><a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-cli项目详解大全</h1> <h3 id="articleHeader1">1、<a href="http://www.js-code.com/tag/vue" title="Vue" target="_blank">Vue</a>-cli项目结构剖析</h3> <p><strong>(1)、外层目录:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="readme //项目的说明文件 package.json //第三方依赖包配置 package.lock.json //帮助我们去确定安装的第三方依赖包的具体的版本,保持团队编程的统一 license //开源协议的说明 index.html //项目默认的首页模版文件 .postcssrc.js //对 postcss 的配置项 (postcss:你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码) .gitignore //不需要上传到 git 上的文件管理 .eslintrc.js //对写的代码检测是否标准做一个检测 .eslintignore //配置不需要 eslintrc 检测工具检测的文件 .editorconfig //配置编辑器总风格统一的自动化格式的语法 .babelrc //项目写的代码是 Vue 的大文件组件的代码的写法,所以需要通过 babel 这种语法解析器做一些语法上的转换,最终转换成浏览器能够编译执行的代码,babel 需要做额外配置时,就放在文件里面" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code>readme <span class="hljs-comment">//项目的说明文件</span> <span class="hljs-keyword">package</span>.json <span class="hljs-comment">//第三方依赖包配置</span> <span class="hljs-keyword">package</span>.lock.json <span class="hljs-comment">//帮助我们去确定安装的第三方依赖包的具体的版本,保持团队编程的统一</span> license <span class="hljs-comment">//开源协议的说明</span> index.html <span class="hljs-comment">//项目默认的首页模版文件</span> .postcssrc.js <span class="hljs-comment">//对 postcss 的配置项</span> (<span class="hljs-string">postcss:</span>你无需考虑各种浏览器前缀兼,只需要按官方文档的书写方式去写,会得到加上浏览器前缀的代码) .gitignore <span class="hljs-comment">//不需要上传到 git 上的文件管理 </span> .eslintrc.js <span class="hljs-comment">//对写的代码检测是否标准做一个检测</span> .eslintignore <span class="hljs-comment">//配置不需要 eslintrc 检测工具检测的文件</span> .editorconfig <span class="hljs-comment">//配置编辑器总风格统一的自动化格式的语法</span> .<a href="http://www.js-code.com/tag/babel" title="浏览关于“babel”的文章" target="_blank" class="tag_link">babel</a>rc <span class="hljs-comment">//项目写的代码是 <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> 的大文件组件的代码的写法,所以需要通过 babel 这种语法解析器做一些语法上的转换,最终转换成浏览器能够编译执行的代码,babel 需要做额外配置时,就放在文件里面</span></code></pre> <p><strong>(2)、文件夹:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="static //static 目录放的是静态资源,要用到的静态图片啊或者后续需要模拟的 json 数据 node_modules //项目中需要用到的第三方 node 包 src //放的是项目的源代码 src/main.js //整个项目的入口文件 src/app.vue //整个项目最原始的根组件 src/router/index.js //项目的路由放置位置 src/components //项目中要用到的小组件 src/assets //项目中需要用到的图片 config //放置项目配置文件 config/index.js //放基础配置 config/dev.ent.js //开发环境配置信息 config/prod.ent.js //线上环境配置信息 build //放置项目打包的 webpack 配置信息,vue-cli 会自动构建 build/webpack.base.conf.js //基础的 webpack 配置信息 build/webpack.dev.conf.js //开发环境的 webpack 配置信息 build/webpack.prod.conf.js //线上环境的 webpack 配置信息 " title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs groovy"><code><span class="hljs-keyword">static</span> <span class="hljs-comment">//static 目录放的是静态资源,要用到的静态图片啊或者后续需要模拟的 json 数据</span> <a href="http://www.js-code.com/tag/node" title="浏览关于“node”的文章" target="_blank" class="tag_link">node</a>_modules <span class="hljs-comment">//项目中需要用到的第三方 node 包</span> src <span class="hljs-comment">//放的是项目的源代码</span> src<span class="hljs-regexp">/main.js /</span>/整个项目的入口文件 src<span class="hljs-regexp">/app.vue /</span>/整个项目最原始的根组件 src<span class="hljs-regexp">/router/</span>index.js <span class="hljs-comment">//项目的路由放置位置</span> src<span class="hljs-regexp">/components /</span>/项目中要用到的小组件 src<span class="hljs-regexp">/assets /</span>/项目中需要用到的图片 config <span class="hljs-comment">//放置项目配置文件</span> config<span class="hljs-regexp">/index.js /</span>/放基础配置 config<span class="hljs-regexp">/dev.ent.js /</span>/开发环境配置信息 config<span class="hljs-regexp">/prod.ent.js /</span>/线上环境配置信息 build <span class="hljs-comment">//放置项目打包的 webpack 配置信息,vue-cli 会自动构建</span> build<span class="hljs-regexp">/webpack.base.conf.js /</span>/基础的 webpack 配置信息 build<span class="hljs-regexp">/webpack.dev.conf.js /</span>/开发环境的 webpack 配置信息 build<span class="hljs-regexp">/webpack.prod.conf.js /</span>/线上环境的 webpack 配置信息 </code></pre> <h3 id="articleHeader2">2、注意点:<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>-polyfill的引用和使用:</h3> <p><strong>(1)、Babel介绍:</strong></p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="理解: babel是javascript语法的编译器。它是为了解决:将ES6语法(不含ES6新的API)编译成可被低版本浏览器识别的语法。" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs"><code style="word-break: break-word; white-space: initial;">理解: babel是javascript语法的编译器。它是为了解决:将ES6语法(不含ES6新的<a href="http://www.js-code.com/tag/api" title="浏览关于“API”的文章" target="_blank" class="tag_link">API</a>)编译成可被低版本浏览器识别的语法。</code></pre> <p><strong>(2)、.<a href="http://www.js-code.com/tag/babel" title="babel" target="_blank">babel</a>rc配置</strong></p> <p>在Babel执行编译的过程中,会从项目的根目录下的 .babelrc文件中读取配置。在.babelrc配置文件中,主要是对预设(presets) 和 插件(plugins) 进行配置。</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="&quot;presets&quot;: [ 'env', { 'modules': false } ]" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code><span class="hljs-string">"presets"</span>: [ <span class="hljs-symbol">'en</span>v', { <span class="hljs-symbol">'module</span>s': <span class="hljs-literal">false</span> } ]</code></pre> <p>这里的<code>modules:false</code>的目的是:以前我们需要使用babel来将ES6的模块语法转换为AMD, CommonJS,UMD之类的模块化标准语法,但是现在webpack都帮我做了这件事了,所以我们不需要babel来做,因此需要在<code>babel配置项中设置modules为false</code>,<code>因为它默认值是commonjs</code>, 否则的话在webpack转换完成后,再用common.js就会产生冲突。</p> <p><strong>(3)、babel-polyfill</strong><br />babel-polyfill就是为了解决ES6新的<a href="http://www.js-code.com/tag/api" title="API" target="_blank">API</a>与这种全局对象或全局对象方法不足的问题。</p> <div class="google-auto-placed ap_container" style="text-align: center; width: 100%; height: auto; clear: none;"><ins data-ad-format="auto" class="adsbygoogle adsbygoogle-noablate" data-ad-client="ca-pub-6330872677300335" data-adsbygoogle-status="done" style="display: block; margin: auto; background-color: transparent;"><ins id="aswift_4_expand" style="display: inline-table; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent;"><ins id="aswift_4_anchor" style="display: block; border: none; height: 0px; margin: 0px; padding: 0px; position: relative; visibility: visible; width: 697px; background-color: transparent; overflow: hidden; opacity: 0;"><iframe width="697" height="175" frameborder="0" marginwidth="0" marginheight="0" vspace="0" hspace="0" allowtransparency="true" scrolling="no" allowfullscreen="true" onload="var i=this.id,s=window.google_iframe_oncopy,H=s&amp;&amp;s.handlers,h=H&amp;&amp;H[i],w=this.contentWindow,d;try{d=w.document}catch(e){}if(h&amp;&amp;d&amp;&amp;(!d.body||!d.body.firstChild)){if(h.call){setTimeout(h,0)}else if(h.match){try{h=s.upd(h,i)}catch(e){}w.location.replace(h)}}" id="aswift_4" name="aswift_4" style="left:0;position:absolute;top:0;border:0px;width:697px;height:175px;"></iframe></ins></ins></ins></div> <p><code>注意:解决浏览器红色的报错警示:vuex requires a <a href="http://www.js-code.com/tag/promis" title="Promis" target="_blank">Promis</a>e polyfill in <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a> browser.</code>方法:<a href="https://www.cnblogs.com/princesong/p/6728250.html" rel="nofollow noreferrer" target="_blank">https://www.cnblogs.com/princ...</a></p> <h3 id="articleHeader3">3、移动端(微信等)调试工具:使用 vConsole调试console</h3> <p><a href="https://blog.csdn.net/m0_37036014/article/details/80113635" rel="nofollow noreferrer" target="_blank">https://blog.csdn.net/m0_3703...</a></p> <p></code></p>

本文固定链接: http://www.js-code.com/vue-js/vue-js_26791.html