taro 微信小程序 vscode 简单使用

大致参考taro 3.x --> 安装及使用 ->渐进式入门教程,
安装taro参考之前的文章

vue3的组合式api

我这里使用vscode,推荐安装 ESLint 插件,因为使用Vue推荐安装 Vetur 插件。

创建项目

在创建完项目之后,Taro 会默认开始安装项目所需要的依赖,安装使用的工具按照 yarn > cnpm > npm 顺序进行检测。一般来说,依赖安装会比较顺利,但某些情况下可能会安装失败,这时候你可以在项目目录下自己使用安装命令进行安装:

 npm install

入口组件

每一个 Taro 项目都有一个入口组件和一个入口配置,我们可以在入口组件中设置全局状态/全局生命周期
src/app.js
入口主键配置文件
src/app.config.js,可以在全局配置文件中设置页面组件的路径、全局窗口、路由等信息

页面组件

页面组件是每一项路由将会渲染的页面,Taro 的页面默认放在 src/pages 中,每一个 Taro 项目至少有一个页面组件
View 组件。这是来源于 @tarojs/components 的跨平台组件

微信小程序,选择创建项目目录

博客图片目录
20241118135312.png

运编译运行

我这边使用微信小程序,以微信小程序为例:

 npm run dev:weapp
 npm run build:weapp

Taro 编译分为 dev 和 build 模式:

  • dev 模式(增加 --watch 参数) 将会监听文件修改。
  • build 模式(去掉 --watch 参数) 将不会监听文件修改,并会对代码进行压缩打包。
  • dev 模式生成的文件较大,设置环境变量 NODE_ENV 为 production 可以开启压缩,方便预览,但编译速度会下降。