Taro & Vue3 试用

Install

$ npm i @tarojs/cli -g
$ taro init taro-practice

## print & input
? 请输入项目介绍！ taro practice
? 请选择框架 Vue3
? 是否需要使用 TypeScript ？ Yes
? 请选择 CSS 预处理器（Sass/Less/Stylus） Less
? 请选择模板源 Github（最新）
√ 拉取远程模板仓库成功！
? 请选择模板 vue3-NutUI（使用 NutUI3.0 的模板）

$ cd taro-practice
$ npm run dev:weapp

Note: 需要下载微信开发者工具，目录选择 taro-practice 根目录

$ taro info

## print
Taro v3.4.2

  Taro CLI 3.4.2 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 14.15.0 - D:\software\node\node.EXE
      Yarn: 1.22.11 - ~\AppData\Roaming\npm\yarn.CMD
      npm: 7.21.1 - D:\software\node\npm.CMD

Code

列表

1. 首页跳转到列表页

/src/pages/index/index.vue

2. 添加路由配置

/src/app.config.ts

export default defineAppConfig({
  pages: [
    // ...
    'pages/users/index'
  ],
  // ...
})

3. 新建文件

/src/pages/users/index.config.ts

export default definePageConfig({
  navigationBarTitleText: '用户列表'
})

/src/pages/users/index.vue