同步操作将从 dhc/taro-vue3-admin 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
taro-vue3-pinia 是一个使用 Taro3 + Vue3 + TypeScript + NutUi + pinia + windi.css 跨端模板,它使用了最新的前端技术栈,内置丰富的插件,有着极高的代码规范,开箱即用的跨端前端解决方案,也可用于学习参考。
根据项目.vscode提示安装所需插件
npx @tarojs/cli init Taro3
使用 npx 可以不用全局先安装 cli 工具,直接下载最新 Taro3 工程
本地安装 cli 确保项目基本运行
# 安装cli 用来执行构建等操作
yarn add @tarojs/cli
# 预览
yarn dev:weapp
打开微信开发工具 工程目录需要指向构建出来的 dist 文件
yarn install
项目已经内置angular提交规范。
yarn add vue-tsc -D
# https://github.com/typicode/husky
# https://typicode.github.io/husky/#/?id=articles
Nutui 京东风格的轻量级移动端 Vue 组件库
yarn add @nutui/nutui-taro
安装 nutui 会遇到样式的报错 如图
解决办法:引入 @tarojs/plugin-html 插件 https://taro-docs.jd.com/taro/docs/use-h5
全局引入后的依赖大小
为了按需引入,先安装插件 babel-plugin-import
# https://nutui.jd.com/#/starttaro
yarn add babel-plugin-import -D
按需引入后的主包大小
import { createApp } from 'vue'
import App from './App.vue'
import { Button, Cell, Icon } from '@nutui/nutui-taro'
import '@nutui/nutui-taro/dist/style.css'
createApp(App)
.use(Button)
.use(Cell)
.use(Icon)
样式处理 因为 nutui 的设计稿是 375 的 所以将框架的设计尺寸调整为 375
到这里 nutui 组件库已经采坑完毕 能够正常使用 事件调用正常
nutui 事件不触发 是因为 @tarojs/plugin-html 版本不对 我当前这个项目固定设置为 3.3.12 如果设置为最新 3.3.13 则不行
随着业务代码和组件的引入越来越多,主包的大小一定会越来越大,超过 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']
}
]
}
yarn add pinia --save
创建 store 目录 添加 index.ts 文件
import { App } from 'vue'
import { createPinia } from 'pinia'
export const store = createPinia()
export function setupStore(app: App) {
app.use(store)
}
export * from './modules'
开启 Vue DevTools 之后 预览主包体积会大于 2M 导致无法预览 视情况开启调试 正式构建不会开启 Vue DevTools 调试
默认不开启 devtools 调试 新增 script 开启
"devtools:weapp": "npm run build:weapp -- --watch --devtools"
page {
font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto,
'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei', sans-serif;
}
// 解决iPhone x 以后的机型 底部安全区域的问题 https://jelly.jd.com/article/6006b1055b6c6a01506c87fd
.safe-area-bottom {
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
需要注意开发者工具的项目设置:
<style scoped>
,建议使用 cssModules 代替。<teleport>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。