Prefacio:
Para organizar los datos de uin-app, aquí están los datos del marco que admite.
Entrada Oficial: Entrada
Informacion relevante:
1. ColorUI : una biblioteca de componentes de subprogramas de alto valor y alta eficiencia
código fuente de git: haz clic en mí
Entrada de proyecto relacionada: un proyecto de centro comercial basado en colorui: haga clic en mí
Pasos de implementación:
1. Descargue el proyecto, busque la carpeta colorui y póngala en el proyecto
2. App.vue introduce la clave Css main.css icon.css
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
....
</style>3. main.js Importar cu-custom componentes.
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
4、page.vue La página se puede llamar directamente
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
| parámetro | efecto | Tipos de | valores predeterminados |
|---|---|---|---|
| bgColor | nombre de la clase de color de fondo | Cuerda | '' |
| está de vuelta | Ya sea para habilitar el retorno | booleano | falso |
| bgImagen | ruta de la imagen de fondo | Cuerda | '' |
| bloque de ranura | efecto |
|---|---|
| volverTexto | mensaje de texto al regresar |
| contenido | zona media |
| Correcto | Área derecha (¡el lado del programa mini se puede usar de manera muy estrecha!) |
Efecto de logro: haz clic en mí para ver
2. uView2.0 , el marco en uni-app, es muy similar a ivew/element of vue
1. Instalación
Hbuilder X Camino
Descargar documento de configuración de métodos
如果您是使用Hbuilder X开发的用户，您可以在uni-app插件市场通过uni_modules的形式进行安装，
此安装方式可以方便您后续在uni_modules对uView进行一键升级。
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
注意： 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。Dirección de descarga: se lanza uView2.0, se desenvaina la espada y se unifican los ríos y lagos: mercado de complementos de DCloud
manera NPM
documentación de configuración de npm
Ejecute el siguiente comando en el directorio raíz del proyecto:
// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y
npm install uview-ui
// 更新
// npm update uview-ui
Nota: Este método de instalación debe configurarse de acuerdo con las instrucciones de la configuración de instalación de npm antes de que esté disponible y el nombre del proyecto no puede tener caracteres chinos .
2. Configuración
(Premisa) Si no tiene scss, instálelo
// 安装node-sass
npm i node-sass -D
// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -DConfiguración de la instalación
Dado que uView admite npme 下载instala de la misma manera, la configuración de los dos es casi la misma. Debido a la compatibilidad de algunas plataformas, la configuración de easycom es ligeramente diferente. Para no causar confusión, los dos métodos se describen por separado aquí. :
# Configuración de la unidad por defecto 2.0.12
En uView1.x, si el parámetro del componente es un valor numérico, el valor predeterminado es la rpxunidad, pero rpxhará que el tamaño sea demasiado grande en la tableta. Para una mayor facilidad de uso, uView2.x cambiará la unidad por defecto px. Si tiene algunas necesidades, necesita cambiar la unidad a rpx, puede hacer la main.jssiguiente configuración en:
......
// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'
......3. Uso
Después de la configuración a través de npm y la descarga, los componentes se pueden usar directamente en una página sin importimportar componentes.
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
}
}
</script>