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

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

一、Uniapp简介

二、初始化项目

三、集成sass

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