通过vue-cli进行uniapp开发,使用uview-pro组件库

用vue-cli和uview-pro开发uniapp

1、按照uniapp官网所述创建项目

npx degit dcloudio/uni-preset-vue#vite-ts my-vue3-project

2、然后pnpm add uview-pro安装依赖

pnpm add uview-pro

3、按照uview-pro配置进行操作

// main.js
import uView from "uview-pro";
Vue.use(uView);
/* uni.scss */
@import "uview-pro/theme.scss";
// App.vue
<style lang="scss">
	/* 注意要写在第一行,同时给style标签加入lang="scss"属性 */
	@import "uview-pro/index.scss";
</style>
 "easycom": {
    "custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
    }
  },

在pages.json中一定要按这种

"custom": {
      "^u-(.*)": "uview-pro/components/u-$1/u-$1.vue"
 }

方式写入,不然easycom自动按规则导入注册不生效!!!

当你使用Vue CLI创建UniApp项目并尝试引入UView组件库时,可能会遇到一些错误。UView是一个基于Vue的UI框架,但它需要适配于uni-app的运行环境。以下是可能导致报错的一些常见原因和解决办法: 1. **依赖冲突**:确保你在`package.json`文件中同时安装了Vue CLI、@dcloudio/uni-app-cli以及UView的官方uni-app版本。可以尝试删除已有的UView依赖,然后重新运行`npm install uview-ui`。 ```bash rm -rf node_modules/uview-ui npm install uview-ui ``` 2. **配置问题**:检查`vue.config.js`文件中是否正确设置了uni-app的相关配置。例如,你需要开启uni-app的预览模式 (`devServer.proxy` 或 `chainWebpack` 配置)。 ```js module.exports = { // ... devServer: { proxy: { '/api': { target: 'http://localhost:8081', // 你的uni-app服务器端口 changeOrigin: true, ws: true, }, }, }, }; ``` 3. **兼容性问题**:确保UView版本与你当前uni-app的版本兼容。如果UView还未完全适配uni-app最新版本,你可能需要回退到较旧的UView版本。 4. **模块导入**:在`.vue`文件中导入UView组件时,使用`import { Button } from 'uview-ui/components/button'`而不是`import Button from 'uview-ui/dist/components/button/index.vue'`。 5. **错误日志**:查看终端中的详细错误信息,它通常会提示具体的错误类型和位置,有助于定位问题。 如果以上步骤都无法解决问题,建议查阅UView的官方文档或者在开发者社区(如GitHub或CSDN论坛)寻找解决方案,或者寻求技术支持。记得更新你的问题描述,包括错误的具体报错信息以便更好地帮助你。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值