Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
7297f6dd
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3216
Star
106
Fork
815
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
94
列表
看板
标记
里程碑
合并请求
70
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
94
Issue
94
列表
看板
标记
里程碑
合并请求
70
合并请求
70
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
7297f6dd
编写于
1月 21, 2022
作者:
M
mehaotian
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
docs: uni-ui
上级
4cd0b564
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
18 addition
and
35 deletion
+18
-35
docs/component/uniui/quickstart.md
docs/component/uniui/quickstart.md
+18
-35
未找到文件。
docs/component/uniui/quickstart.md
浏览文件 @
7297f6dd
...
...
@@ -119,8 +119,8 @@ uni-ui支持 HBuilderX直接新建项目模板、npm安装和单独导入个别
npm i sass-loader@10.1.1 -D 或 yarn add sass-loader@10.1.1 -D
```
> sass-loader 请使用低于 @11.0.0 的版本,[sass-loader@11.0.0 不支持 vue@2.6.12 ](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)
>
如果 `node` 版本小于 16 ,
sass-loader 请使用低于 @11.0.0 的版本,[sass-loader@11.0.0 不支持 vue@2.6.12 ](https://stackoverflow.com/questions/66082397/typeerror-this-getoptions-is-not-a-function)
> 如果 `node` 版本大于 16 , `sass-loader` 建议使用 `v8.x` 版本
**安装 uni-ui**
...
...
@@ -130,25 +130,6 @@ npm i @dcloudio/uni-ui 或 yarn add @dcloudio/uni-ui
在
``script``
中引用组件:
```
javascript
import
{
uniBadge
}
from
'
@dcloudio/uni-ui
'
//import uniBadge from '@dcloudio/uni-ui/lib/uni-badge/uni-badge.vue' //也可使用此方式引入组件
export
default
{
components
:
{
uniBadge
}
}
```
在
``template``
中使用组件:
```
html
<uni-badge
text=
"1"
></uni-badge>
<uni-badge
text=
"2"
type=
"success"
@
click=
"bindClick"
></uni-badge>
<uni-badge
text=
"3"
type=
"primary"
:inverted=
"true"
></uni-badge>
```
**配置easycom**
使用
`npm`
安装好
`uni-ui`
之后,需要配置
`easycom`
规则,让
`npm`
安装的组件支持
`easycom`
...
...
@@ -174,20 +155,22 @@ export default {
```
**注意**
-
`CLI`
引用方式,
`H5`
端不支持在
`main.js`
中全局注册组件,如有需求请使用(
[
easyCom
](
https://uniapp.dcloud.io/collocation/pages?id=easycom
)
) 的方式引用组件
-
使用 npm 安装的组件,默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ,导致条件编译失效,需要通过配置
`vue.config.js`
解决:
```
javascript
// 在根目录创建 vue.config.js 文件,并配置如下
module
.
exports
=
{
transpileDependencies
:
[
'
@dcloudio/uni-ui
'
]
}
```
在
``template``
中使用组件:
```
html
<uni-badge
text=
"1"
></uni-badge>
<uni-badge
text=
"2"
type=
"success"
@
click=
"bindClick"
></uni-badge>
<uni-badge
text=
"3"
type=
"primary"
:inverted=
"true"
></uni-badge>
```
**注意**
-
uni-ui 是uni-app内置组件的扩展。注意与web开发不同,uni-ui不包括基础组件,它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。
-
`uni-ui`
不支持使用
`Vue.use()`
的方式安装
-
uni-ui 现在只推荐使用
`easycom`
,如自己引用组件,可能会出现组件找不到的问题
-
使用 npm 安装的组件,默认情况下 babel-loader 会忽略所有 node_modules 中的文件 ,导致条件编译失效,需要通过配置
`vue.config.js`
解决:
```
javascript
// 在根目录创建 vue.config.js 文件,并配置如下
module
.
exports
=
{
transpileDependencies
:
[
'
@dcloudio/uni-ui
'
]
}
```
-
uni-ui 是uni-app内置组件的扩展。注意与web开发不同,uni-ui不包括基础组件,它是基础组件的补充。web开发中有的开发者习惯用一个ui库完成所有开发,但在uni-app体系中,推荐开发者首先使用性能更高的基础组件,然后按需引入必要的扩展组件。
-
`uni-ui`
不支持使用
`Vue.use()`
的方式安装
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录