uni-app——uni-ui的使用 - Powered by Discuz! Archiver

首页 › uni-app论坛 › uni-app——uni-ui的使用

步行骑水牛 發表於 2019-10-25 19:38:00

uni-app——uni-ui的使用

<h1 class="_1RuRku">uni-app——uni-ui的使用</h1>
<div class="rEsl9f">
<div class="s-dsoj"><span class="_3tCVn5"><span class="anticon">0.2882019.06.09 22:53:34字数 186阅读 2602</span></span></div>
</div>
<blockquote>
<p>1）uni-ui 是全端兼容的基于flex布局的ui库；<br>2）可以使用 npm 的安装使用方式，也可下载相关组件直接使用；<br>3）uni-ui 不支持使用 Vue.use() 的方式安装<br>4）uni-ui 依赖 scss，若是 HBuilderX 中创建的 uni-app 项目，需要在 HBuilderX 中安装 scss 插件；如果是使用 cli 创建的 uni-app 项目，需要在项目下npm安装 node-sass 和 sass-loader</p>

</blockquote>
<h3>1. 初始化项目</h3>
<p>在 HBuilderX 中新建 uni-app 项目，进入项目目录，执行：</p>
<pre class="line-numberslanguage-kotlin"><code class="language-kotlin">npm <span class="token keyword">init <span class="token operator">-y</span></span></code></pre>
<h3>2. 安装 uni-ui</h3>
<pre class="line-numberslanguage-css"><code class="language-css">npm install @dcloudio/uni-ui</code></pre>
<h3>3. 使用 uni-ui</h3>
<p>在 script 中引用组件：</p>
<pre class="line-numberslanguage-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><script<span class="token punctuation">>
   import {uniCard, uniPagination} from '@dcloudio/uni-ui'
   // 也可使用此方式引入组件
   // import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue'
export default {
   components: {
         uniCard,
         uniPagination
   },
   data() {
         return {
            title: '快陪练',
            extra: '教育科技公司',
            note: '拓展钢琴陪练业务',
            thumbnail: require('../../static/capitalDetail.png'),
            isFull: true
         }
   }
}
<span class="token tag"><span class="token tag"><span class="token punctuation"></script<span class="token punctuation">></span></span></span></span></span></span></span></span></code></pre>
<p>在 template 中使用组件：</p>
<pre class="line-numberslanguage-xml"><code class="language-xml"><span class="token tag"><span class="token tag"><span class="token punctuation"><template<span class="token punctuation">>
<span class="token tag"><span class="token tag"><span class="token punctuation"><view <span class="token attr-name">class<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"homework-ctn<span class="token punctuation">"<span class="token punctuation">>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><uni-card <span class="token attr-name">:title<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">'title<span class="token punctuation">' <span class="token attr-name">:isFull<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"isFull<span class="token punctuation">" <span class="token attr-name">:note<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"note<span class="token punctuation">" <span class="token attr-name">:thumbnail<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"thumbnail<span class="token punctuation">" <span class="token attr-name">:extra<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"extra<span class="token punctuation">"<span class="token punctuation">><span class="token tag"><span class="token tag"><span class="token punctuation"></uni-card<span class="token punctuation">>
   <span class="token tag"><span class="token tag"><span class="token punctuation"><uni-pagination
         <span class="token attr-name">show-icon<span class="token attr-value"><span class="token punctuation">=false
         <span class="token attr-name">total<span class="token attr-value"><span class="token punctuation">=100
         <span class="token attr-name">pageSize<span class="token attr-value"><span class="token punctuation">=10
         <span class="token attr-name">current<span class="token attr-value"><span class="token punctuation">=2
         <span class="token attr-name">prev-text<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"上一页<span class="token punctuation">"
         <span class="token attr-name">next-text<span class="token attr-value"><span class="token punctuation">=<span class="token punctuation">"下一页<span class="token punctuation">"
   <span class="token punctuation">><span class="token tag"><span class="token tag"><span class="token punctuation"></uni-pagination<span class="token punctuation">>
<span class="token tag"><span class="token tag"><span class="token punctuation"></view<span class="token punctuation">>
<span class="token tag"><span class="token tag"><span class="token punctuation"></template<span class="token punctuation">></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></code></pre>
<h3>4. 根据需要下载使用</h3>
<pre class="line-numberslanguage-jsx"><code class="language-jsx"><span class="token keyword">import uniCard <span class="token keyword">from <span class="token string">"../../uni-ui/uni-card/uni-card.vue"
<span class="token keyword">import uniPagination <span class="token keyword">from <span class="token string">"@/uni-ui/uni-pagination/uni-pagination.vue"</span></span></span></span></span></span></code></pre>
<h3>5. 组件使用效果</h3><br><br>
来源：https://www.cnblogs.com/wang-sai-sai/p/11740326.html

頁: [1]

查看完整版本: uni-app——uni-ui的使用