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

7月前作者：前端的路人丁分类：Toy博客阅读(25) 违法举报

这篇具有很好参考价值的文章主要介绍了vue3+taro+Nutui 开发小程序（一）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

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

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

vscode插件准备环节：

目前我用到的插件如下：

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

初始化项目

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

使用命令创建模板项目：

taro init myApp

vue3 小程序,taro,小程序

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

npm install @tarojs/cli

npm dev:weapp

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

这样我们就可以看到初始化的小程序了文章来源地址https://www.toymoban.com/news/detail-714169.html

到了这里，关于vue3+taro+Nutui 开发小程序（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：如若内容造成侵权/违法违规/事实不符，请点击违法举报进行投诉反馈，一经查实，立即删除！

分享到：

领支付宝红包赞助服务器费用

taro+vue3开发小程序

一.创建项目（1） npm install -g @tarojs/cli （2） npx @tarojs/cli init myApp 二.按需引入 nutui 组件 1.使用 babel-plugin-import插件 (1)下载插件 npm install babel-plugin-import (2) babel.config.js配置 (3)app.js中引入

2024年02月08日
浏览(42)
Taro+Vue3 小程序引入echarts表

背景：根据需求在一个报告界面需要展示不同的echarts表来使数据更友好的显示。效果如下：一.taro支持echarts 官方说明：Taro 文档支持引用小程序端第三方组件库物料文档：Taro 物料市场 | 让每一个轮子产生价值二.引入echarts-for-weixin插件 github地址: https://github.com/ecomfe/echar

2024年02月13日
浏览(24)
Taro+Vue3开发微信小程序的分享好友功能

1、背景：使用taro框架和vue3框架开发小程序，实现一个把pdf文件直接分享给微信好友。一开始看taro文档理解有偏差，导致分享出去的文件是个app的小程序连接。如下图实现代码如下：后续仔细查看taro文档， Taro 文档，发现这种写法是个页面组件，转发出去的是个小程序，

2024年02月12日
浏览(48)
taro+vue3 搭建一套框架，适用于微信小程序和H5

安装 Taro。可以在终端输入以下命令进行安装：创建项目。使用以下命令创建 Taro+Vue3 项目：其中，myApp 是项目名称。进入项目并启动。使用以下命令进入项目并启动：注意，需要先进入对应的目录再启动。编写代码。在 src 目录下编写代码，可以像使用 Vue 开发 Web 应用程

2024年02月10日
浏览(44)
taro.js和nutui实现商品选择页面

1. 首先安装 Taro.js 和 NutUI: ``` npm install -g @tarojs/cli npm install taro-ui ``` 2. 创建 Taro 项目并进入项目目录： ``` taro init myapp cd myapp ``` 3. 选用 Taro 模板一并安装依赖： ``` npm install ``` 4. 在页面目录中创建商品选择页： ``` taro create --name goods --type page ``` 5. 在 `goods.jsx`中导入并使用

2024年02月11日
浏览(36)
Taro + vue3 实现自定义返回栏

算是一个简单的返回页面主要是这里 Taro +vue3 的页面结构还有一个

2024年04月29日
浏览(33)
Taro+vue3 实现滑动列表时切换电影

以上代码是滑动的组件

2024年01月16日
浏览(28)
Taro+vue3 实现选座位功能以及座位显示

1.类似选座位那种功能我的功能座位不是html元素而是座位图片都是图片 2.如果大家有需求需要源代码可以先私信我源代码整理中未来会发布开源

2024年01月16日
浏览(38)
taro vue3 ts nut-ui 项目

查看 Taro 全部版本信息可以使用 npm info 查看 Taro 版本信息，在这里你可以看到当前最新版本使用命令创建模板项目： taro init 项目名微信小程序自定义 TabBar 先安装 cnpm install pinia 以便解决小程序的页面首次加载在 app.config.js 中设置在 src 目录下 pages 文件夹，在里

2024年02月06日
浏览(31)
Vue3 Vite electron 开发桌面程序

Electron是一个跨平台的桌面应用程序开发框架，它允许开发人员使用Web技术（如HTML、CSS和JavaScript）构建桌面应用程序，这些应用程序可以在Windows、macOS和Linux等操作系统上运行。 Electron的核心是 Chromium 浏览器内核和 Node.js 运行时环境。 Chromium 内核提供了现代浏览器的功能，

2024年02月16日
浏览(34)