环境安装

全局安装vue-cli

npm install -g @vue/cli@4  //目前仍推荐使用 vue-cli 4.x（node 版本 16+ 不然使用不了 uview-plus ）

项目创建

ps：因为项目是用到uniapp，这里我用到了uniapp的cli模式创建详情：uniapp官网

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

此时，会提示选择项目模板（使用Vue3/Vite版不会提示，目前只支持创建默认模板），初次体验建议选择 hello uni-app 项目模板，如下所示：

引进 uview-plus

npm install uview-plus

准备工作

uview-plus依赖SCSS，您必须要安装此插件，否则无法正常运行。

// 安装sass
npm i sass -D

// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -D

npm install dayjs  

npm install clipboard

配置

1：main.ts 引入

import { createSSRApp } from "vue";
import App from "./App.vue";
import store from "./store";
import { apiMixin } from './utils/mixin'
import uviewPlus from 'uview-plus'


export function createApp() {
  const app = createSSRApp(App);
  app.mixin(apiMixin)
  app.use(store)
  app.use(uviewPlus)
  // uni.$u.config.unit = 'rpx'
  return {
    app,
  };
}

2：app.vue 引入

<style lang="scss">
@import "uview-plus/index.scss";
</style>

3:uni.scss 引入

@import 'uview-plus/theme.scss';

4：pages.json 引入

  "^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"

5：在 vite.config.ts 引进来自己写的全局样式

import { defineConfig, UserConfig, ConfigEnv, loadEnv } from 'vite'
import uni from "@dcloudio/vite-plugin-uni";
import path from 'path'
export default ({ mode }: ConfigEnv): UserConfig => {
  const env = loadEnv(mode, process.cwd())
  console.log(env, '________')
  return {
    plugins: [uni()],
    server: {
      open: true,
      port: 8998,
      proxy: {
        '/api': {
          target: env.VITE_HTTPS_URL,
          changeOrigin: true,
          rewrite: (path: string) => path.replace(/^\/api/, '')
        }
      }
    },
    resolve: {
      alias: {//添加别名
        '@': path.resolve(__dirname, 'src'),
        '@static': path.resolve(__dirname, 'src/static'),
      },
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "@/style/index.scss";`,//引入全局样式
        },

      },
    },
    // build: {
    //   minify: 'terser',
    //   terserOptions: {
    //     compress: {
    //       drop_console: true,
    //     },
    //   },
    // },
  }
}

6：配置一下运行环境

项目结构

运行

npm run weixin  (微信)
npm run serve (h5)

博主自己的项目展示

ps:博主把vuex给删除了替换了pinia 增加了全局loading 防止白屏的发生

import { defineStore } from 'pinia';
export const  componentsStore = defineStore('componStore',{
    state:()=>{
        return{
            headTop_:false,
            loading_:false
        }
    },
    actions:{
        loadingFn_(flag:boolean){
            this.loading_ = flag
        },
        headTopFn_(flag:boolean){
            this.headTop = flag
        }
    }
})

loading demo使用展示，项目实际中建议结合接口一起使用

 function sublime(){
   uni.$emit('showLoading',true)
   setTimeout(()=>{
   uni.$emit('showLoading',false)
   },2000)
 }

当前项目demo展示，开箱即用。希望对伙伴们有帮助，项目组件化，细分。

项目Demo适配H5

项目结构，项目支持H5 小程序

项目地址

1：当前搭项目地址
2：希望对伙伴们有点帮助

uniapp+vue3+ts+vite+uview-plus+pinia搭建项目，项目demo兼容一码双端