【uni-app】easycom模式（自动按需引入组件）
<blockquote><p>传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。<code>easycom</code>将其精简为一步。 只要组件安装在项目的components目录下，并符合<span style="background-color: rgba(255, 153, 0, 1)"><code>components/组件名称/组件名称.vue</code></span>目录结构。就可以不用引用、注册，直接在页面中使用。 如下：</p>
</blockquote>
<div class="cnblogs_Highlighter">
<pre class="brush:javascript;gutter:true;"><template>
<view class="container">
<uni-list>
<uni-list-item title="第一行"></uni-list-item>
<uni-list-item title="第二行"></uni-list-item>
</uni-list>
</view>
</template>
<script>
// 这里不用import引入，也不需要在components内注册uni-list组件。template里就可以直接用
export default {
data() {
return {
}
}
}
</script>
</pre>
</div>
<h3>使用步骤：</h3>
<p>1. 在pages.json配置以下参数</p>
<p><img src="https://img2020.cnblogs.com/blog/1287814/202011/1287814-20201118155131249-857281296.png" alt="" loading="lazy"></p>
<p> <img src="https://img2020.cnblogs.com/blog/1287814/202012/1287814-20201205093156114-981825375.png" alt="" loading="lazy"></p>
<p> </p>
<p> </p>
<p> 2、组件引入符合命名规则</p>
<p><img src="https://img2020.cnblogs.com/blog/1287814/202011/1287814-20201118155159099-581385506.png" alt="" loading="lazy"></p>
<p> </p>
<p>3、在页面会自动引入</p>
<p><img src="https://img2020.cnblogs.com/blog/1287814/202011/1287814-20201118155246187-385460024.png" alt="" loading="lazy"></p>
<h2>使用easycom的好处</h2>
<p>1、简化组件的使用，提高开发效率</p>
<p>2、不论组件目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好。</p>
<p> </p>
<h2>说明</h2>
<ul>
<li>
<p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="color: rgba(255, 102, 0, 1)"><code>easycom</code></span>方式引入的组件无需在页面内<span style="background-color: rgba(255, 255, 255, 1); color: rgba(255, 102, 0, 1)"><code>import</code></span>，也不需要在<code>components</code>内声明，即可在任意页面使用</span></p>
</li>
<li>
<p><span style="font-family: "Microsoft YaHei"; font-size: 16px; background-color: rgba(255, 153, 0, 1)"><code>easycom</code>方式引入组件不是全局引入，而是局部引入。例如在H5端只有加载相应页面才会加载使用的组件</span></p>
</li>
<li>
<p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="background-color: rgba(255, 153, 0, 1)">在组件名完全一致的情况下，<code>easycom</code>引入的优先级低于手动引入</span>（区分连字符形式与驼峰形式）</span></p>
</li>
<li>
<p><span style="font-family: "Microsoft YaHei"; font-size: 16px">考虑到编译速度，直接在<code>pages.json</code>内修改<code>easycom</code>不会触发重新编译，需要改动页面内容触发。</span></p>
</li>
<li>
<p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><span style="background-color: rgba(255, 153, 0, 1)"><code>easycom</code>只处理vue组件，不处理小程序专用组件（如微信的wxml格式组件）</span>。不处理后缀为.nvue的组件。但vue组件也可以全端运行，包括小程序和app-nvue。可以参考uni ui，使用vue后缀，同时兼容nvue页面。</span></p>
</li>
<li>
<p><span style="font-family: "Microsoft YaHei"; font-size: 16px"><code>nvue</code>页面里引用<code>.vue</code>后缀的组件，会按照nvue方式使用原生渲染，其中不支持的css会被忽略掉。这种情况同样支持<code>easycom</code></span></p>
</li>
</ul>
<p> </p>
<p>官网：https://uniapp.dcloud.io/collocation/pages?id=easycom</p><br><br>
来源：https://www.cnblogs.com/hellocd/p/14000338.html
頁:
[1]