uniapp vue3支持uview

uniapp安装vue3项目

1.新建vue3项目

 2.导入uview插件

插件地址：

https://ext.dcloud.net.cn/plugin?id=8744

 ①下载安装方式配置

// 安装sass
npm i sass@1.63.2 -D

// 安装sass-loader
npm i sass-loader@10.4.1 -D

 ②在项目根目录的/uni.scss中引入此文件, 如果不存在uni.scss自己创建一个空白文件

/* uni.scss */
@import '@/uni_modules/uview-plus/theme.scss';

 ③在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性。

<style lang="scss">
    /* 注意要写在第一行，注意不能引入至uni.scss，同时给style标签加入lang="scss"属性 */
    @import "@/uni_modules/uview-plus/index.scss";
</style>

 ④main.js中引入uview-plus主JS库

在项目根目录中的main.js中，引入并使用uview-plus的JS库，注意这两行要放在const app = createSSRApp(App)之后。

import uviewPlus from '@/uni_modules/uview-plus'

app.use(uviewPlus)

 ⑤配置easycom组件模式

此配置需要在项目根目录的pages.json中进行。

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uview-plus的功能。

请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。

 

// pages.json
{
    "easycom": {
        "autoscan": true,
        // 注意一定要放在custom里，否则无效，https://ask.dcloud.net.cn/question/131175
        "custom": {
            "^u--(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
            "^up-(.*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue",
        "^u-([^-].*)": "@/uni_modules/uview-plus/components/u-$1/u-$1.vue"
        }
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

 ⑥安装依赖库

npm i dayjs
npm i clipboard

 

 ⑦测试是否成功

<u-icon name="photo"></u-icon>