配置uniapp 的保姆级代码，拿来就能用！

 

闲下来整理一下最近使用uniapp遇到的问题。之前我开发的时候用的是vue2.0，uniapp有 uview2.x ui组件，后来又开发新项目使用了vue3.0 但是对UI的要求 uview2.x 不满足，还好后来又出了一个  uview-plus3.x(vue3)这个甚合心意呀，使用起来得心应手！现在写了一个使用uniapp自动导入vue和uniapp所有依赖，配置了UI都可以直接拿来使用！但是 uview-plus3.x(vue3)有很多问题使用查看文档的时候要注意区分呀！报错很奇妙需要你深刻理解你自己的配置！

1、新建项目就用HBuilderX创建新的项目，使用vue3.0uni-app官网

2、项目引入uview-plus3.x，安装文档写的很清楚安装 | uview-plus 3.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

3、添加自动导入插件

根目录创建vite.config.js

import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';  //这个必须导入不然下面报错
import { resolve } from 'path'
import AutoImport from 'unplugin-auto-import/vite'   // 引入unplugin-auto-import需要先安装
export default defineConfig({
  plugins: [
    uni(),
    // 加上下面的配置
    AutoImport({
      include: [
        /.[tj]sx?$/, // .ts, .tsx, .js, .jsx
        /.vue$/,
        /.vue?vue/, // .vue
      ],
      imports: [
        'vue',   
        'uni-app',
      ],
      dts: 'typings/auto-imports.d.ts',
    }),
  ],
  build: {
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
      },
    },
  },
});

4、直接使用

<template>
  <view class="content">
    <view class="logo"> </view>

    <view class="text-area">十三</view>
  </view>

  <tabs></tabs>
</template>

<script setup>
const text = ref('头像')
onReady(() => {
  console.log('onReady', text.value)
})
</script>

<style lang="scss">
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.logo {
  height: 200upx;
  width: 200upx;
  background: $uni-bg-color-grey;
  margin-top: 200upx;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 50upx;
  border-radius: 100%;
  overflow: hidden;
}

.text-area {
  display: flex;
  justify-content: center;
}

.title {
  font-size: 36upx;
  color: #8f8f94;
}
</style>

一个新的项目就是一个新的开始，开始的工作做好了后面的事情就简单的多了，只要静静地考虑逻辑就可以了！