Uniapp脚手架项目搭建，uniapp+vue3+uView pro+vite+pinia+sass

Uniapp脚手架项目搭建，uniapp+vue3+uView pro+vite+pinia+sass

• 一、Uniapp简介
• 二、初始化项目
• 三、集成sass
• [四、集成uView Pro](#四、集成uView Pro)
• 五、ConfigProvider定制化主题
• 六、集成pinia，状态管理
• 七、国际化配置
• 八、创建page.vue组件作为项目的页面组件
• 九、集成字体图标
• 十、开发环境配置

夸克资源分享：

表情包：https://pan.quark.cn/s/5b9ddeb237fe

工具箱：https://pan.quark.cn/s/aa2d6a730482，图吧、美蛋、路遥、入梦等

Fiddler Everywhere抓包：https://pan.quark.cn/s/6b1e2fbae019，

Adobe：https://pan.quark.cn/s/13e39cfeaadb，先看安装教程

JetBranis开发者工具：https://pan.quark.cn/s/16e94dcff1f7，先看安装教程下的jetbra教程

逆向工具：https://pan.quark.cn/s/50e93c8ca54c

数据库工具：https://pan.quark.cn/s/2f14eda13d24

前端项目搭建集锦：https://blog.csdn.net/randy521520/article/details/146998467
前端接单》前端接单 》前端接单： https://www.goofish.com/item?id=1008883794643)

一、Uniapp简介

UniApp 是DCloud（数字天堂）推出的一款高性能跨平台应用开发框架，它以 Vue.js 为核心语法基座，遵循 Vue 的组件化思想、生命周期和语法规范，让开发者能够通过一套代码快速构建并发布到 iOS 原生 App、Android 原生 App、微信 / 支付宝 / 百度 / 抖音等主流小程序、H5、快应用 等多个平台，真正实现 "一次开发，多端部署"。

其核心优势在于：

1.跨平台兼容性强：底层通过适配层将 Vue 代码转换为各平台原生代码 / 小程序逻辑，减少多端适配成本；

2.开发效率高：提供丰富的内置 API、官方组件库（uni-ui）、生态插件市场，无需重复造轮子；

3.兼顾性能与体验：支持原生渲染、分包加载、性能优化方案，避免传统跨平台框架的 "性能瓶颈"；

4.配套生态完善：提供云开发、原生插件扩展、统计分析等一站式配套能力，覆盖开发、打包、上线全流程。

UniApp 广泛适用于中小型跨端项目、小程序快速迭代、多端同步上线的业务场景，是目前国内跨平台开发的主流选择之一。

二、初始化项目

1.打开cmd，运行npm install degit@latest -g安装degit

2.打开cmd，运行：npx degit dcloudio/uni-preset-vue#vite UniappUview 初始项目，官网文档：https://uniapp.dcloud.net.cn/quickstart-cli.html

3.使用webstrom打开UniappUview项目，安装Uniapp Tool插件

4.项目根目录运行yarn install安装依赖项

5.测试项目是否初始化成功，打开package.json，运行dev:h5命令，也可运行"yarn dev:h5"命令

6.打开启动的服务，显示下面页面说明安装成功

7.微信小程序配置：打开src>manifest.json，修改mp-weixin配置

"mp-weixin" : {
    "appid" : "wxf65ebeae934e323d",
    "setting" : {
        "urlCheck" : false,
        "es6" : true,
        "minified" : true,
        "postcss" : true
    },
    "usingComponents" : true
}

8.微信小程序配置：打开package.json，运行dev:mp-weixin命令，dist\dev\mp-weixin为已经打包好的项目

9.微信小程序配置：打开微信开发者工具，导入dist\dev\mp-weixin项目，页面显示正常说明微信小程序配置成功

10.测试微信小程序热更新：webstrom修改src>pages>index>index.vue，下图中可以看出修改文字为"Hello Word!!!"后，微信开发者工具中页面的文字也实时更新，说明默认支持热更新

三、集成sass

1.运行yarn add sass@1.63.2 -D，安装sass，安装版本1.63.2是与uView Pro保持一致

2.在assets中新建scss>global.scss、scss>globalMixin.scss、scss>globalVar.scss、scss>iframe.scss，global.scss用于通用的样式、globalMixin.scss用于Mixin通用的样式、globalVar.scss用于全局变量、iframe.scss用于导出scss文件

3.修改globalVar.scss、global.scss、globalMixin.scss

4.修改vite.config.js，将iframe.scss文件引入到项目中

5.测试sass是否配置成功：修改src>pages>inde>index.vue，样式正常显示说明sass配置成功

四、集成uView Pro

1.运行yarn add uview-pro命令安装uView Pro，官网：https://uviewpro.cn/

2.修改src>main.js注册 uView Pro

3.修改globalVar.scss引入主题样式

4.修改App.vue 引入基础样式

5.修改pages.json自动引入uView Pro组件

6.新增tsconfig.json，支持Volar 类型提示

7.测试uView Pro是否配置成功：修改src>pages>inde>index.vue，button正常显示，说明uView Pro配置成功

五、ConfigProvider定制化主题

1.运行 yarn add -D @uni-ku/root 安装虚拟根组件

2.新建src>App.ku.vue

3.主题切换：修改src>pages>index.vue

4.globalVar.scss适配uView Pro：修改globalVar.scss

5.globalVar.scss适配uView Pro：修改src>pages>index>index.vue，之前的文字颜色与背景颜色已经与uView Pro一样

6.自定义主题：打开https://uviewpro.cn/zh/guide/themeGenerate.html，找到主题色，点击随机主题，输入主题信息，然后导出

7.自定义主题：将导出的uview-pro.theme.ts修改为.js放在src目录，修改tsconfig.json、vite.config.js映射src路径

8.自定义主题：修改main.js

9.自定义主题：修改App.ku.vue默认使用自定义主题

六、集成pinia，状态管理

1.终端运行：yarn add pinia pinia-plugin-persist，安装pinia、pinia-plugin-persis

2.在src下新建store>pinia.js、store>useDemoStore.js，在vite.config.js配置路径别名，并在main.js中使用该配置

3.测试pinia是否配置成功：如下图点击修改store后，数据存入session storage说明pinia配置成功

七、国际化配置

1.新建src>lang>enum.js、src>lang>lang.js、src>lang>zh-Hans.json、src>lang>zh-Hant.json、src>lang>en.json

2.修改src>main.js使用i18n

3.测试国际化是否配置成功：修改src>page>index>index.vue，html中别用 t ， t， t，t不兼容小程序

4.pages.json、manifest.json国际化：修改page.json中index页面的title，这个东西有点儿鸡肋，小程序中某些配置是无法生效的，例如：页面导航的tile，配置完还需要动态设置title，否则不会生效，最好的办法就是自定义个Page组件来适配

八、创建page.vue组件作为项目的页面组件

1.新建components>layout>Page.vue，并把src/components在vite.config.js中配置路径别名

2.修改src>App.vue

3.修改src>pages.json设置导航自定义，某些小程序可能不支持自定义导航，具体小程序具体实现，本文以微信小程序为例子

4.修改components>layout>Page.vue，某些小程序可能不支持自定义导航，如果不支持自定义导航，可使用条件编译动态设置导航的title，本文以微信为例子

5.修改src>pages>index>index.vue，使用Page组件，如下图所示无论h5还是微信小程序切换语言时页面title都会改变

6.完善Page组件增加tabBar：新建tab1-tab4页面，并把index.vue代码复制到tab1.vue

7.完善Page组件增加tabBar：修改vite.config.js，增加tabbar配置，由于在页面中无法获取到tabbar配置，所以由vite配置到import.meta.env。

8.完善Page组件增加tabBar：tabbar语言配置

9.完善Page组件增加tabBar：修改Page组件，完善tabBar逻辑

10.完善Page组件增加tabBar：tab1-tab4页面，使用Page组件，并标记为tabbar

11.完善Page组件增加tabBar：效果演示

九、集成字体图标

1.字体图标集成以阿里icon为例，访问：https://www.iconfont.cn/ 图标库，搜索返回，任选一个图标加入购物车

2.去购物车中，选择下载代码

3.修改iconfont.css，图标前缀为iconfont

4.在assets下新建font文件，把下载好的字体图标解压到该文件，然后在App.vue中引入iconfont.css

5.修改src>page>tab1>tab1.vue，使用自定义图图标

十、开发环境配置

1.在根目录下新建.env.development、.env.production

2.修改package.json中的脚本命令

3.修改src>page>tab1>tab1.vue，打印 import.meta.env

4.实际效果