不使用HBuilder在uni-app项目中引入uni-ui_uniapp老项目 引用 uni-ui

下载uni-ui，将其中要用的组件放在src/components目录下

uni-ui符合easycom规范

传统vue组件，需要安装、引用、注册，三个步骤后才能使用组件。easycom将其精简为一步。
只要组件安装在项目的components目录下或uni_modules目录下，并符合components/组件名称/组件名称.vue目录结构。就可以不用引用、注册，直接在页面中使用。

1. 下载依赖

• 安装sass

npm i sass -D
1

• 安装sass-loader

npm i sass-loader@10.1.1 -D
1

• 安装uni-ui

npm i @dcloudio/uni-ui
1

2. 在node_modules文件夹下找到下载的uni-ui

lib文件夹内就有所有的uni-ui组件，复制需要的组件

3. 粘贴到src/components目录下

在src目录下创建components文件夹，将刚刚复制的uni-ui组件粘贴进来

4. 在页面中使用

直接按照官网给出的uni-ui示例在<template></template>中编写即可，不需要注册和引入。

<template>
  <view>
   <view>
    <uni-calendar 
    ref="calendar"
    :insert="false"
    @confirm="confirm"
    />
    <button @click="open">打开日历</button>
</view>
<view>
    <uni-collapse accordion>
        <view>
            <uni-collapse-item title="默认开启" :open="true">
                <text>11111111111111111111111111111111111</text>
            </uni-collapse-item>
        </view>
        <view>
            <uni-collapse-item title="折叠内容">
                <text>22222222222222222222222222222222222</text>
            </uni-collapse-item>
        </view>
        <view>
            <uni-collapse-item title="禁用状态" disabled>
                <text>33333333333333333333333333333333333</text>
            </uni-collapse-item>
        </view>
    </uni-collapse>
</view>
<view>
    <uni-card title="基础卡片" :isFull="true" sub-title="副标题" extra="额外信息">
        <text>这是一个基础卡片示例，内容较少，此示例展示了一个没有任何属性不带阴影的卡片。</text>
    </uni-card>
</view>
  </view>
</template>
<script>
export default {
   data() {
      return {
      }
  },
  methods: {
      open(){
            this.$refs.calendar.open();
        },
        confirm(e) {
            console.log(e);
        }
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

5. 效果