创建uniapp-vue项目
打开命令行
npx degit dcloudio/uni-preset-vue#vite-ts 项目名称
初始化vue包
pnpm install 或者 npm install
没有pnpm 命令的
npm install -g pnpm
没有npm的可移步 安装npm
安装uni组件
pnpm i @dcloudio/uni-ui
在src/pagejs.json中组测组件
// pages.json
{
// 组件自动导入
"easycom": {
"autoscan": true,
"custom": {
// uni-ui 规则如下配置 // [!code ++]
"^uni-(.*)": "@dcloudio/uni-ui/lib/uni-$1/uni-$1.vue" // [!code ++]
}
},
"pages": [
// …省略
]
}
安装类型声明文件
pnpm i -D @uni-helper/uni-ui-types
配置类型声明文件
// tsconfig.json
{
"compilerOptions": {
"types": [
"@dcloudio/types",
"@uni-helper/uni-app-types", // [!code ++]
"@uni-helper/uni-ui-types" // [!code ++]
]
}
}
引入组件uni-card
index.vue
<template>
<div class="my">my</div>
<uni-card title="基础卡片" sub-title="副标题" extra="额外信息" thumbnail="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png">
<text>这是一个带头像和双标题的基础卡片，此示例展示了一个完整的卡片。</text>
</uni-card>
</template>
运行编译项目
npm run dev:mp-weixin
如果报错
则没有引入组件成功,重新引入，并且重新打开命令行，再运行
如报错
清理npm缓存
npm cache verify
安装sass
pnpm install sass --save-dev
编译没报错后，在微信开发者工具中导入项目，修改appid
