小程序开发之路uni-app 04

「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」

使用vue3+vite开发uniApp

组件

• 根节点为 <template>，这个 <template> 下在App、H5可以有多个根 <view> 组件，在小程序只能有一个根 <view> 组件。

Vue2 只有一个root节点，vue3可以有多个节点。

在DCloud的插件市场里下载插件：ext.dcloud.net.cn

把这个uni-rate五角星组件导入到你的uni-app项目下，在vue页面里引用它

 <!-- 在页面中引用 uni-rate 组件-->
    <template>
        <view>
          <!-- 这里会显示一个五角星，并且点击后会自动亮星 评分组件 -->
            <uni-rate></uni-rate>
        </view>
    </template>

组件定义建议使用驼峰命名，使用时可以使用驼峰名称，也可以使用kebab-case名称。

在uni-app工程根目录下的 components 目录，创建并存放自定义组件：

    │─components                符合vue组件规范的uni-app组件目录
    │  └─componentA             符合‘components/组件名称/组件名称.vue’目录结构，easycom方式可直接使用组件
    │          └─componentA.vue    可复用的componentA组件
    │  └─component-a.vue      可复用的component-a组件

全局注册

在main.js中 导入并注册

• main.js 里进行全局导入和注册

    import App from './App'
    import {createSSRApp} from 'vue'
    //引入组件
    import myComponent from './components/my-component/my-component.vue'
    export function createApp() {
        const app = createSSRApp(App)
        //调用app.component方法全局注册组件
        app.component('my-component', myComponent)
        return {
            app
        }
    }

局部注册

传统vue规范： 在 index.vue 页面中，通过 import 方式引入组件

1. 通过uni-app的easycom： 将组件引入精简为一步。只要组件安装在项目的 components 目录下，并符合 components/组件名称/组件名称.vue 目录结构。就可以不用引用、注册，直接在页面中使用。

 <!-- 在index.vue引入 uni-badge 组件-->
    <template>
        <view>
            <uni-badge text="1"></uni-badge><!-- 3.使用组件 -->
        </view>
    </template>
    <script>
        // 这里不用import引入，也不需要在components内注册uni-badge组件。template里就可以直接用
        export default {
            data() {
                return {
                }
            }
        }
    </script>

easycom是自动开启的，不需要手动开启

不管components目录下安装了多少组件，easycom打包后会自动剔除没有使用的组件

Uni-app 组件市场使用及组件注册完成。