Light

yanbowe / taro-vue3-pinia Goto Github PK

View Code? Open in Web Editor NEW

99.0 4.0 20.0 1.46 MB

基于Taro3+Vue3+NutUI的跨端方案模板

License: MIT License

JavaScript 22.24% TypeScript 45.44% SCSS 16.68% Vue 14.20% HTML 1.44%

taro-vue3-pinia's Introduction

简介

taro-vue3-pinia 是一个使用 Taro3 + Vue3 + TypeScript + NutUi + pinia + unocss + pnpm 跨端模板，它使用了最新的前端技术栈，内置丰富的插件，有着极高的代码规范，开箱即用的跨端前端解决方案，也可用于学习参考。

特性

最新技术栈：使用 Taro3 + Vue3 + TypeScript + NutUi + pinia + unocss + pnpm 等前端前沿技术开发
TypeScript: 应用程序级 JavaScript 的语言
代码规范：丰富的规范插件及极高的代码规范

代码仓库

github
gitee

Vscode 插件安装

根据项目.vscode 提示安装所需插件
建议开启 Volar Takeover 模式
请使用 pnpm commit 代替 git commit

当前实现了的功能

Taro3 Vue3 Ts pinia
unocss 集成
组件库 NutUI
小程序分包配置
Taro3 配合 Vue DevTools 调试
样式封装 1px 问题底部安全区域适配
暗黑模式 & 主题定制

小程序分包配置

随着业务代码和组件的引入越来越多，主包的大小一定会越来越大，超过 2m 的主包以后微信开发工具就无法使用预览的功能，为了提前做好准备在一开始就进行分包处理，主包只包含组件和公共代码，分包里放入业务代码

// app.config.ts
export default {
	pages: ["pages/index/index"],
	window: {
		backgroundColor: "#fff",
		backgroundTextStyle: "light",
		navigationBarBackgroundColor: "#fff",
		navigationBarTitleText: "Taro3",
		navigationBarTextStyle: "black",
	},
	subpackages: [
		{
			root: "pages/packageA",
			pages: ["index/index"],
		},
	],
};

主题定制

使用 unocss 完善主题定制，需在每个页面引入作为根组件，实现方案ConfigProvider

小程序配置细节

需要注意开发者工具的项目设置：

需要设置关闭 ES6 转 ES5 功能，开启可能报错
需要设置关闭上传代码时样式自动补全，开启可能报错
需要设置关闭代码压缩上传，开启可能报错

其他限制

小程序中不支持 <style scoped>，建议使用 cssModules 代替。
自定义 navbar 在模拟器上 safe-area-inset-top 失效，真机可以微信社区
自定义 tabbar 使用 svg 或者 icon，图片会出现抖动问题微信社区

taro-vue3-pinia's People

Contributors

Stargazers

Watchers

Forkers

weilaim abstain23 peirm johnshi jinbingzhi0931 liaokd shutiangit zooyf eiog asthesky 20788500 jprsfyy zsbugs zhj149 matrixcross easyjone qyd159 wenxa007 jamespoon

taro-vue3-pinia's Issues

安卓机的顶部导航栏navbar显示位置上移

头部导航栏在iPhone上显示正常，安卓机的适配有问题。安卓机型号分别是红米k40和华为nova8.

自定义组件引入pinia时报错

自定义组件引入pinia时报错
import { defineComponent } from 'vue'
import { useAppStore } from '@/store/modules/app'

const appStore = useAppStore()
const TableIcon = computed(() => appStore.getTableIcon)

export default defineComponent({
name: 'Table',
setup(){

})

放入setup后报错消失

您好，项目在本地yarn install以后报错，请问怎么解决？

Compiled with problems:X

ERROR in ./src/app.config.ts 1:0-20

Module not found: Error: Can't resolve './app.boot' in '/Users/zhuxiao/Documents/workspace/aie-wx/src'

ERROR in ./src/app.config.ts 1:0-20
Module not found: Error: Can't resolve './app.boot' in '/Users/zhuxiao/Documents/workspace/aie-wx/src'
resolve './app.boot' in '/Users/zhuxiao/Documents/workspace/aie-wx/src'
using description file: /Users/zhuxiao/Documents/workspace/aie-wx/package.json (relative path: ./src)
Field 'browser' doesn't contain a valid alias configuration
using description file: /Users/zhuxiao/Documents/workspace/aie-wx/package.json (relative path: ./src/app.boot)
no extension

[Bug]: H5启动项目有警告WARNING in external "taro_app_library@/remoteEntry.js"

软件版本

1.0.2

运行环境

Windows (64)

运行架构

x86

重现步骤

就是安装完依赖，启动H5项目

期望的结果是什么？

无

实际的结果是什么？

日志记录（可选）

No response

补充说明（可选）

No response

希望可以整一些示例页面，和基本的布局

项目中，缺少了用户登陆的相关逻辑，可以加一下

项目中，缺少了用户登陆的相关逻辑，可以加一下

对初学者不太友好，希望能增加目录结构的说明

希望能增加项目模版中的目录结构的说明，对初学者更友好一些

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.