前言

由于最近有微信小程序开发的需求，打算通过Taro来实现，截止到目前Taro在github上的star数已经到了33.4k，因工作关系，平时用vue较多，Taro也支持vue，所以选择上面列举的相关进行搭建，在项目的实际开发过程中遇到的问题，也会在相关系列文章持续更新。

先借用官方的话介绍一下什么是Taro，开放式跨端跨框架解决方案，轻松构建可以运行在 小程序/Web/APP 上的应用Taro['tɑ:roʊ]，泰罗·奥特曼，宇宙警备队总教官，实力最强的奥特曼。而Nutui是京东风格的轻量级移动端 Vue 组件库。

IDE说明

开发中，改动代码只需要改动源码，也就是vscode中的代码，不要去修改微信开发者工具中的代码。 vscode:用于源码编写。 微信开发者工具:用于导入打包后的文件(dist目录)，实时查看页面。

初步搭建

1.首先确保有Node环境，npm源设置为可用npm config set registry https://registry.npmmirror.com,这里我设置了淘宝镜像。全局安装Taro CLI,npm i -g @tarojs/cli 2.taro init 命令创建一个全新的项目,按照提示选择安装自己需要的依赖。 3.cd到项目目录，pnpm install安装依赖 4.打开package.json找到scripts里的脚本，可以看到运行微信小程序的命令是"dev:weapp",然后终端里pnpm dev:weapp，等编译完成，就会在项目根目录生成dist目录。（下面会介绍项目源码各个目录）。 5.打开微信开发者工具，导入项目，目录选择刚才在源码根目录下生成的dist目录进行导入，AppID可以先输入一个测试的。（注意默认会给你小程序和小游戏的两个，选择小程序的输入）。

---

好，至此，你已经成功的开启了属于你的Taro版的hello world。那么真的成功了吗？别急，让我们修改一下源码中src/pages中index.vue来新增一个按钮。

<template>
  <view class="index">
    <view>
      <img src="" alt="" />
    </view>
    {{ msg }} <Dongdong />
    <view class="btn">
      <nut-button type="primary" @click="handleClick('text', msg2, true)"
        >点我</nut-button
      >
      <nut-button type="info">新增按钮</nut-button>
    </view>
    <nut-toast :msg="msg2" v-model:visible="show" :type="type" :cover="cover" />
  </view>
</template>

ctrl s保存，等待编译完成，兴冲冲打开微信开发者工具，0.o尊嘟假嘟，为啥没变化，需要手动点微信开发者工具的编译才能刷新界面，啊这，那这也太low了吧。 遇事不决去baidu？no no no，因为前端日新月异的更新速度，你搜索的答案往往都已经是过时的，遇事不决要立刻马上去官方文档。 好，定位到文档-编译配置详情，mini.hot,Taro v3.4.0 开始支持。 好好好，我迅雷不及掩耳盗铃小叮当之势，打开了我的package.json，妙啊～～～，恰好Taro的版本是3.6.13。 定位到config目录下的dev.ts（如果你用js应该就是dev.js），改之。

module.exports = {
  env: {
    NODE_ENV: '"development"',
  },
  defineConstants: {},
  mini: {
    hot: true,
  },
  h5: {},
};

然后终端ctrl c终止，然后重新编译pnpm dev:weapp，再次修改页面。

妙啊，你成功了你知道吗！

画个界面吧

流程已经跑通了，你肯定迫不及待想要画个界面了吧，好好好，你直接化身为产品经理，开..等等，开画之前先了解一下项目结构吧（引自文档）：

├── babel.config.js # Babel 配置 ├── .eslintrc.js # ESLint 配置 ├── config # 编译配置目录 │ ├── dev.js # 开发模式配置 │ ├── index.js # 默认配置 │ └── prod.js # 生产模式配置 ├── package.json # Node.js manifest ├── dist # 打包目录 ├── project.config.json # 小程序项目配置 ├── src # 源码目录 │ ├── app.config.js # 全局配置 │ ├── app.css # 全局 CSS │ ├── app.js # 入口组件 │ ├── index.html # H5 入口 HTML │ └── pages # 页面组件 │ └── index │ ├── index.config.js # 页面配置 │ ├── index.css # 页面 CSS │ └── index.jsx # 页面组件，如果是 Vue 项目，此文件为 index.vue

好了开画！

<template>
  <nut-row>
    <nut-col :span="24">
      <view
        v-for="(item, index) in [1, 2, 3, 4, 5]"
        :key="index"
        class="content-box"
      >
        <nut-card
          :img-url="state.imgUrl"
          :title="state.title"
          :price="state.price"
          :vipPrice="state.vipPrice"
          :shopDesc="state.shopDesc"
          :delivery="state.delivery"
          :shopName="state.shopName"
        ></nut-card>
      </view>
    </nut-col>
  </nut-row>

  <nut-tabbar bottom safe-area-inset-bottom placeholder @tab-switch="tabSwitch">
    <nut-tabbar-item tab-title="标签" :icon="Home"></nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="Category"> </nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="Find"></nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="Cart"></nut-tabbar-item>
    <nut-tabbar-item tab-title="标签" :icon="My"></nut-tabbar-item>
  </nut-tabbar>
</template>

<script setup>
import { reactive, toRefs } from 'vue';
import {
  Dongdong,
  Home,
  Category,
  Find,
  Cart,
  My,
} from '@nutui/icons-vue-taro';

const state = reactive({
  imgUrl:
    '//img10.360buyimg.com/n2/s240x240_jfs/t1/210890/22/4728/163829/6163a590Eb7c6f4b5/6390526d49791cb9.jpg!q70.jpg',
  title:
    '活蟹】湖塘煙雨 阳澄湖大闸蟹公4.5两 母3.5两 4对8只 鲜活生鲜螃蟹现货水产礼盒海鲜水',
  price: '388',
  vipPrice: '378',
  shopDesc: '自营',
  delivery: '厂商配送',
  shopName: '阳澄湖大闸蟹自营店>',
});

const tabSwitch = (item, index) => {
  console.log(item, index);
};
</script>

<style lang="scss">
.content-box {
  padding: 0 10px 0 15px;
  margin-bottom: 15px;
}
</style>

尾声

基于vue3的setup语法糖的写法，是不是方便又简洁，加上Nutui库的助力，你画页面的速度是不是可以快了很多，可以让你更加专注于业务的开发，此文只是作为Taro开发小程序的开篇，先让各位看到效果，你才有兴趣进一步的研究，我会实际结合项目中遇到的问题解决进行分享，以及组件化的开发的分享，渐进式的去完善Taro开发小程序系列的文章，如果你对此也感兴趣可以来个免费的一键三连。