项目中需要vue,import...from...,mark下

动态 已结 1 706
江天 VIP1 2018年11月15日 11:29:43
悬赏:5积分
<div class="show-content-free"> <p>以下文章来源于简书,谢谢那位朋友。</p><p><span style="color:rgb(187, 187, 187);">传送门:https://www.jianshu.com/p/c0be35475e54</span></p><p>学习的原因还是起源于大牛github项目的博客源码,看得我一头雾水...</p><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;<span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span>;<span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./route'</span>;<span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>;<span class="hljs-keyword">import</span> <span class="hljs-string">'./less/index'</span>;</code></pre><p>于是赶快上了阮一峰大牛的《ES6标准入门》这辆车,学习了:<br><code>1.项目为什么要模块化? 2.ES6模块与CommonJS和AMD模块加载的不同。 3.export命令 4.import命令 5.模块的整体加载</code><br>  get到很多的新姿势,然而并不能解释<code>import Vue from vue</code>和其他代码是什么意思。还好,百度到<a href="https://link.jianshu.com?t=https://www.zhihu.com/people/guowen921/activities" target="_blank" rel="nofollow">三省吾身丶丶</a>的<a href="https://link.jianshu.com?t=http://blog.guowenfh.com/2016/03/25/vue-webpack-05-vue/" target="_blank" rel="nofollow">hexo博客</a>。几句注释就让我柳暗花明。</p><p>解释代码之前,先来看我的项目文档(这5行代码位于main.js中):</p><h3><img src="/uploads/larryEditor/20181115/1566631d143fb9c893143ee806b65a56.png" style="max-width:100%;"><br></h3><h3>那么现在我对上述代码一一作出解释:</h3><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span>;</code></pre><p>其实最完整的写法是:</p><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> Vue <span class="hljs-keyword">from</span> <span class="hljs-string">"../node_modules/vue/dist/vue.js"</span>; </code></pre><div class="image-package"><div class="image-caption"></div></div><img src="/uploads/larryEditor/20181115/6d6314a74562a3bb438d37365accbcb6.png" style="max-width:100%;"><br><p>意思是:<br>  因为main.js是在src文件中,所以../向前一级相对目录查找node_modules,再依次寻找后面的文件。</p><div class="image-package"><div class="image-container" style="max-width: 623px; max-height: 139px; background-color: transparent;"><div class="image-container-fill" style="padding-bottom: 22.31%;"><img data-original-src="//upload-images.jianshu.io/upload_images/2976869-b4c5d76adf7ad816.png" data-original-width="623" data-original-height="139" data-original-format="image/png" data-original-filesize="19266" class="" src="//upload-images.jianshu.io/upload_images/2976869-b4c5d76adf7ad816.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/623/format/webp" style="background-color: transparent; cursor: zoom-in;"><br></div></div><div class="image-caption"></div></div><br><p>文件找到了,那么文件内是否存在Vue呢?</p><div class="image-package"><div class="image-container" style="max-width: 492px; max-height: 255px; background-color: transparent;"><div class="image-view" data-width="492" data-height="255"><img data-original-src="//upload-images.jianshu.io/upload_images/2976869-5aec2d6e3b965614.png" data-original-width="492" data-original-height="255" data-original-format="image/png" data-original-filesize="25709" class="" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/2976869-5aec2d6e3b965614.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/492/format/webp"></div></div><div class="image-caption"></div></div><br><p>  事实证明,Vue是存在于vue.js中的。</p><h3>下面解释第二条代码:</h3><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App'</span>;</code></pre><p>完整的写法是</p><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> App <span class="hljs-keyword">from</span> <span class="hljs-string">'./App.vue'</span>;</code></pre><p>顾名思义,这句代码的意思就是引入我们写好的.vue文件。(.vue文件是vue框架的单文件组件。)</p><h3>下面解释第三条代码:</h3><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./route'</span>;</code></pre><p>完整的写法是</p><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> router <span class="hljs-keyword">from</span> <span class="hljs-string">'./route.js'</span>;</code></pre><p>顾名思义,这句代码的意思就是引入和main.js同级目录下的route.js文件。</p><h3>下面解释第四条代码:</h3><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'axios'</span>;</code></pre><p>完整意思是:</p><pre class="hljs ."><code class="."><span class="hljs-keyword">import</span> axios <span class="hljs-keyword">from</span> <span class="hljs-string">'..\node_modules\axios\dist\axios.js'</span>;</code></pre><p>和引入vue文件是一样的原理,都是从node_modules中加载相应名称的模块。</p><div class="image-package"><div class="image-container" style="max-width: 527px; max-height: 85px; background-color: transparent;"><div class="image-view" data-width="527" data-height="85"><img data-original-src="//upload-images.jianshu.io/upload_images/2976869-dd9d4c1ac5f5a0ae.png" data-original-width="527" data-original-height="85" data-original-format="image/png" data-original-filesize="6563" class="" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/2976869-dd9d4c1ac5f5a0ae.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/527/format/webp"></div></div><div class="image-caption"></div></div><br><p>  事实证明,axios.js文件中存在axios。</p><h3>下面解释第五条代码:</h3><pre class="hljs java"><code class="java"><span class="hljs-keyword">import</span> <span class="hljs-string">'./less/index'</span>;</code></pre><p>完整意思是:</p><pre class="hljs java"><code class="java"><span class="hljs-keyword">import</span> <span class="hljs-string">'./less/index.less'</span>;</code></pre><p>查找成功:</p><div class="image-package"><div class="image-container" style="max-width: 235px; max-height: 112px; background-color: transparent;"><div class="image-view" data-width="235" data-height="112"><img data-original-src="//upload-images.jianshu.io/upload_images/2976869-5fb6a417f5166f4f.png" data-original-width="235" data-original-height="112" data-original-format="image/png" data-original-filesize="4227" class="" style="cursor: zoom-in;" src="//upload-images.jianshu.io/upload_images/2976869-5fb6a417f5166f4f.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/235/format/webp"></div></div><div class="image-caption"></div></div><br>个人总结:<br><strong>1.import...from...的from命令后面可以跟很多路径格式,若只给出vue,axios这样的包名,则会自动到node_modules中加载;若给出相对路径及文件前缀,则到指定位置寻找。<br>2.可以加载各种各样的文件:.js、.vue、.less等等。<br>3.可以省略掉from直接引入。</strong><br>吐槽:<br>  ES6的import...from...指令挺神奇,不需要指明文件后缀,这样很方便快捷,新手需要一定的耐心去研究,否则是真心看不懂。<p></p><h5>希望这篇博客对大家有用!努力成为优秀的会Nodejs的前端工程师!</h5></div>
回帖
提交回复
您的回贴若被采纳将获得悬赏积分;但恶意灌水广告贴将会受到系统惩罚,共同营造良好交流氛围