vue3.2 + uniapp + uview-plus项目搭建

开发工具

HBuilder给我的开发体验并不好，所有将uniapp项目转vscode开发。

环境安装

• 全局安装 vue-cli

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

创建uniapp项目

我们这里由于使用vue3结合vite和ts开发，这里可直接参考uni官网 （注：如命令行创建失败，请直接访问 gitee 下载模板） 附图：

引入uview-plus

yarn add uview-plus   //这里我统一使用yarn命令

准备工作

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

//安装sass
yarn add sass -D

注：以下可不安装，如果项目报错的话通过此命令安装
//安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
yarn add sass-loader@10 -D

配置环节

• main.ts

import { createSSRApp } from "vue";
import uviewPlus from "uview-plus";
import "uview-plus/index.scss";
import App from "./App.vue";

export function createApp() {
  const app = createSSRApp(App);
  app.use(uviewPlus);
  return {
    app,
  };
}

• uni.scss

//在src目录下的uni.scss中引入
/* 颜色变量 */
@import 'uview-plus/theme.scss';

• pages.json

"easycom": {
    "autoscan": true,
    "custom": {
	"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue"
    }
  },

项目地址

目前尚未发布上线，请持续关注本博主哦！

项目展示

目前持续开发阶段，后续将完善此项目哦！