uni+vite+vue3

一个前端萌新
196 阅读3分钟

引言

最近大家都在从vue2转vue3，要给自己多加点vue3的经验，刚好最近有一个H5的小需求，需要建一个新项目，就用uni的vite版本，当然其中比较难的一点是在uni上面暂时还没找到对应的官方文档。在这里跟大家分享一下我遇到的一些问题以及解决办法。

问题1：uni文档上的vite版本用命令行下载不下来。

首先我按照uni的文档操作：

image.png

但是我的得到的结果是：

image.png

一番查找无果，最终我按照文档上说的跑到[gitee](https://gitee.com/dcloud/uni-preset-vue/repository/archive/vite.zip)上下载了一份zip的模板

问题2：安装不了包？

我用的是pnpm，但是我们公司是有私库的，公司要求我们安装包都用私库，有可能是私库没有更新到最新的问题，因为我到npm的官网上是能找到这个对应版本号的npm包的

image.png

我搞了个骚操作，先去换了个npm源把包下载下来再说，换npm源用的是[nrm](https://github.com/Pana/nrm),结果就能下载下来了

image.png

但是由于我还要安转私库的包，所以我又要切换源到私库，但是又有问题了,整句话很简单就是说我之前下载的包用的是其他npm源，现在使用的npm源切换了，要重新下载安装npm包，按照所说的执行pnpm install之后就没有前面的问题了

image.png

问题3：H5的页面怎么自带了导航？

发现是uni自动给你加上了导航，而且下面的标签uni-page-wrapper的height是用calc去掉的导航的高度的，其中的44px就是导航的高度

image.png

image.png

因为我是H5的所有页面都不需要加上导航，所以我在APP.vue的页面加上全局样式

<style lang="scss">
/*每个页面公共css */
/* #ifdef H5 */
uni-page-head {
  display: none;
}
uni-page-head[uni-page-head-type='default'] ~ uni-page-wrapper{
  height:calc(100% - env(safe-area-inset-top));
}
/* #endif */
</style>

问题4：不想每次都import一个公共方法，vue的方法等

我是用了[unplugin-auto-import](https://www.npmjs.com/package/unplugin-auto-import)这个插件，这个插件可以将一些api自动引入，不会导致eslint出错，要设置自动应用vue的api的话直接看文档就可以，但是如果要自动引用自己写的方法

image.png

而且对应的文件的export必须是要按照下图弄的，不能弄成export default

image.png

问题5：template下面有一条volar提示的警告，以及对应的jsconfig.json也有警告

image.png

image.png

解决办法就是改一下jsconfig.js

image.png

问题6：按照旧方法在page.json设置easycom不生效，组件还要自己手动引入

之前的：

image.png

解决办法就是改变一下配置，写在esaycom的custom的属性下面，写完之后最好重新运行一下：

image.png

问题7：uview对应的vue3仓库是什么

我用的是[uview-plus](https://uiadmin.net/uview-plus/),是基于uView2.x移植的支持vue3的版本，因为当前只用了几个组件，暂时没有遇到什么问题，就是还能用

问题8：uni只能用自带的uni.request或者uview的$u吗？

我之前也以为是只能用上面提到的方法，但是我这次发现了axios也是可以用，所以我下载了axios,然后基于自己的习惯进行了axios的二次开发

问题9：用setup语法糖怎么使用uni的一些自带的生命周期？

一开始我是用2个script写的，method、data、computed什么的都写在setup语法糖里，在另一个script按照vue2的方法调用method，本地是没有问题的，但是打包到线上之后会出bug，说找不到对应的方法

image.png

之后改成直接setup的script里面直接import对应的api，下面的option的值就是路由跳转带的参数

<script setup>
import { onLoad } from '@dcloudio/uni-app';
const title =ref('')
const setTitle = (t)=>{
  title.value=t
}
onLoad((option)=>{
  setTitle('表演')
})
</script>
avatar
文章
阅读
粉丝