vue3+taro+Nutui 开发小程序（一）

最新推荐文章于 2024-07-18 22:07:15 发布
最新推荐文章于 2024-07-18 22:07:15 发布
阅读量1.5k 收藏 2
点赞数
文章标签： taro 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yinzisang/article/details/131836660
版权

前言：最近在调研开发小程序，发现现在taro框架逐渐成熟，能完美地使用vue3来进行开发，调研中发现京东的Nutui也不错所以准备写一个由0到1的vue3+taro+Nutui的小程序。

这篇我们首先搭建一个框架：

vscode插件准备环节：

目前我用到的插件如下：

  • Eslint   用来vue格式化代码的
  • Prettier 用来格式化js代码
  • Volar   作为vue的二代插件，集成了vetur的相关功能
  • Unocss 用来原子化快速生成css

初始化项目

初始化项目之前，需安装 taro，请参考 Taro 文档，完成 taro 安装

使用命令创建模板项目：

taro init myApp

 安装 cli 用来执行构建等操作，之后启动项目，会生成一个 dist 目录

npm install @tarojs/cli

npm dev:weapp

打开微信开发工具 工程目录需要指向构建出来的 dist 文件

这样我们就可以看到初始化的小程序了

前端的路人丁
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
推荐开源项目：Taro UI Vue3 - 打造跨平台的高效前端框架
gitblog_00053的博客
03-30 803
推荐开源项目：Taro UI Vue3 - 打造跨平台的高效前端框架 taro-ui-vue3采用 Vue 3.0 重写的 Taro UI 组件库项目地址:https://gitcode.com/gh_mirrors/ta/taro-ui-vue3 是一款基于 Vue3 的组件库，专为 Taro 框架设计，用于构建多端（包括小程序、H5、App 等）应用的优美UI解决方案。Taro UI Vue...
Taro3+Vue3.0做实战项目的总结和方法
Web_boom的博客
08-17 3172
Taro3.0Vue3.0PinianutUInutUI按需引入定制化和抽离http封装以及如何全局使用，多人协同开发劫持生命周期做路由的鉴权/对路由跳转的二次封装setup语法糖的使用阿里iconfont在项目中的使用分包，主包太大开启压缩) 具体的颜色属性可以参考：[github.com/jdf2e/nutui…](https://link.juejin.cn/?...
Vue3 + uni-app 微信小程序：仿知乎日报详情页设计及实现
最新发布
独行猫a 的沉淀、积累、总结。天天学习，好好向上...c/c++,嵌入式 linux,Android,HarmonyOS)
07-18 1936
通过本文的介绍，我们不仅学习了如何使用Vue 3结合微信小程序构建知乎日报详情页，还深入了解了从前端设计到开发调试的全过程。希望这篇文章能帮助你提升前端开发技能，为用户提供更优质的移动阅读体验。
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】
05-16
Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】Vue3 + TypeScript + Uniapp 开发小程序【医疗小程序完整案例·一篇文章精通系列】
使用 Vue3 开发小程序
热门推荐
凹凸实验室
10-09 1万+
前言 9 月 19 日凌晨，Vue3 在经过多个开发版本的迭代后，终于迎来了它的正式版本，「One Piece」的代号也昭示了其开拓伟大航路的野心。 Vue3 的新特性主要有 Composition API、Teleport、Fragments 和 <script setup /> & <style vars /> 等。我们是否也可以在小程序开发中使用这些特性呢？在 Taro 的文档里我们找到了关于 Vue3 的章节，事不宜迟，让我们开始尝试吧。 Vue3 部分新特性 还没了
Taro+vue3+nutui3.x构建微信小程序
a3212768093的博客
05-19 676
taro+vue3+nutui构建小程序流程，以及部分拓展
vue3+taro+Nutui 开发小程序（二）
yinzisang的博客
07-21 1727
然后打开终端输入 npm i 如果报错有可能是你的node版本过高，可以输入 npm i --legacy-peer-deps。这就是基本的框架结构，我们一步一步来完善，首先我们找打page.json。interface：这里放置了Ts的一些基本泛型，不用Ts的可以忽略。app.config.Ts 这里是小程序基本根目录下的一些配置。service：这里二次封装了小程序的http请求。pages：这里放置了小程序的所有页面。app.Ts 这里是小程序的入口文件。api：这里存放用到的接口。
vue3+taro+nutui+pina小程序空白框架
03-25
结合以上技术，"vue3+taro+nutui+pina小程序空白框架"可以理解为一个基础的开发环境，用于快速搭建微信小程序项目。使用Vue3作为基础框架，Taro负责跨平台编译，NutUI提供UI组件，而Pina则作为状态管理工具。这样的...
Taro+vue3+NutUI实现微信小程序的购物车功能
weixin_40581358的博客
02-15 641
Taro+vue3+Nut-ui实现移动端购物车功能
taro+vue3开发小程序
huangwensu的博客
09-02 2572
taro和vue3开发小程序
Taro3-Vue3-Demo:taro3使用vue3进行开发
03-29
Taro3-Vue3-Demo // option Api data ( ) { return { res : [ ] , msg : "" , } ; } , created ( ) { this . getRes ( ) ; } , methods : { getRes : async function ( ) { this . res = await test ( ) ; } , } , setup ( ) { const res = ref ( [ ] ) ; const msg = ref ( "" ) ; const getRes = async ( ) => { const result = await test ( ) ;
vue-mini:像写 Vue 3 一样写小程序
08-04
Vue Mini Vue Mini 是一个基于 Vue 3 的小程序开发库，它能让你用 Composition API 写小程序，就像写 Vue 3 一样。 文档（编写中） 许可证 Copyright (c) 2019-present Yang Mingshan
Taro+NutUI+Vue3+TypeScript自定义Tabbar
qq_34111842的博客
11-28 2078
在src -> components根目录下新建一个custom-tab-bar文件夹，新建一个customTabBar.vue。在不同的tab页面通过current去控制当前第几个页面的索引。即可在微信开发者工具看到效果。
Taro+NutUI+vue3+TypeScript - 图片上传
qq_34111842的博客
12-08 1563
Taro+Vue3+TypeScript实现手机相册图片上传功能。
uniApp+Vue3+Vite微信小程序开发指南
青柠豆腐
06-01 3206
App.vue是uni-app的主组件，所有页面都是在App.vue下进行切换的，是页面入口文件。微信开发者工具：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html。可查阅官方文档：https://vue-macros.dev/features/reactivity-transform.html。webstorm 下载地址：https://www.jetbrains.com/webstorm/
taro+vue3开发小程序的笔记
Wanan
12-07 440
路由跳转 import Taro from '@tarojs/taro'; Taro.navigateTo({ url: '/pages/coral/index' })
uniapp（vue3）-小程序搭建与问题
donglingyan的博客
07-02 1491
e.common--公共方法封装（request，api，登录，支付，上传文件方法封装，data模拟数据）"subPackages" : true //启用分包设置。（2）pages同目录建立subpkg。b.components--组件封装。c.filters--过滤器方法封装。a.store--vuex搭建。d.subpkg--分包处理。
oauth2.0 学习案例demo_Vue3教程：用 Vue3 开发小程序，这里有一份实际的代码案例！...
weixin_39940154的博客
11-16 443
寻寻觅觅冷冷清清，凄凄惨惨戚戚。Vue 3 发布以后，最近也在学习和写一些 Vue3 的 demo 和项目，我也一直想着什么时候能在小程序里使用新特性？于是我翻遍了市面上的小程序框架，如 uni-app、wepy、mpvue，目前(截止至2020年11月5日)还都没能做到兼容 Vue 3 的写法，直到我发现了一个很骚的东西，Taro居然支持 Vue 3。很惊喜！1开整！冲冲冲废话少说，...
taro + vue3 +ts 的小程序项目
07-29
如果你想在 Taro + Vue 3 + TypeScript 的小程序项目中使用 Pinia，你可以按照以下步骤进行配置： 1. 首先，确保你已安装了 Taro 的 Vue 3 模板。你可以使用以下命令创建一个新的 Taro + Vue 3 + TypeScript 项目： ```bash npx @tarojs/cli@next init myApp --template vue3-ts ``` 2. 在项目目录下安装 Pinia： ```bash npm install pinia@2.0.23 ``` 3. 在 `src/main.ts` 文件中，导入 `createPinia` 并创建一个 Pinia 实例，并将其传递给 Vue 的 `createApp` 方法： ```typescript import { createApp } from 'vue' import { createPinia } from 'pinia' const app = createApp(...) const pinia = createPinia() app.use(pinia) ... ``` 4. 接下来，你可以根据需要创建和使用 Pinia 的 store。在 `src/store` 目录下创建一个新的文件来定义你的 store，例如 `counter.ts`： ```typescript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }), actions: { increment() { this.count++ }, decrement() { this.count-- }, }, }) ``` 5. 在组件中使用 store。在你的组件中，你可以使用 `useStore` 函数来获取 store 的实例： ```typescript import { useCounterStore } from '../store/counter' export default { setup() { const counterStore = useCounterStore() return { counterStore, } }, } ``` 6. 最后，你可以在你的组件中使用 store： ```vue <template> <div> <p>Count: {{ counterStore.count }}</p> <button @click="counterStore.increment()">Increment</button> <button @click="counterStore.decrement()">Decrement</button> </div> </template> <script setup> import { useCounterStore } from '../store/counter' const counterStore = useCounterStore() </script> ``` 这样，你就可以在 Taro + Vue 3 + TypeScript 的小程序项目中使用 Pinia 了。如果你遇到任何问题，请提供更多的上下文和相关代码，我将尽力帮助你解决。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值