分享每一天-如何在 Taro 里使用 Vue3 !

如何在 Taro 里使用 Vue3 !

前端技术 3936 0 创建时间：2020-10-14 10:13:54

taro vue3

Vue3 带来的新特性可以让我们更加优雅和高效地进行开发，现在，来开启我们在 Taro 里使用 Vue3 的体验之旅吧。

Taro 已经默认安装 Taro3 ，所以正常安装即可：

```javascript
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm，使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
```

安装完成之后，使用taro --version查看一下是否安装成功，如果输出版本号说明安装成功。安装成功后，初始化一个项目

```javascript
taro init
```

1. 将出现如下图的一些选型:
2. 请输入项目名称？输入项目名称vuedemo
3. 请输入项目介绍？输入项目介绍a demo project
4. 请选择框架？当然是Vue3啦
5. 余下选项，如上面 3 个选项，根据自己的需要选择就好，不会有什么问题

一般情况下，依照提示选型好以后， Taro 会自动安装依赖。如果由于网络问题导致安装不成功，就需要手动在项目路径下进行安装。

```javascript
# 使用 yarn 安装依赖
$ yarn
# OR 使用 cnpm 安装依赖
$ cnpm install
# OR 使用 npm 安装依赖
$ npm install
```

安装后的目录结构:
![](http://www.seedblog.cn/uploads/article/2020-10-14/K6LclarYWdqLUgbqRYChwG6zdutobrHquz4vvbwW.png)

app默认代码如下，我们注意到，Taro3 在新建 Vue3 项目时已经修改了入口组件写法。
```javascript
import { createApp } from 'vue'
import './app.scss'
const App = createApp({
  onShow (options) {},
  // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
})
export default App
```
page/index目录下index文件示例如下：
```javascript
<template>
  <view class="index">
    <text>{{ msg }}</text>
  </view>
</template>
<script>
import { ref } from 'vue'
import './index.scss'
export default {
  setup () {
    const msg = ref('Hello world')
    return {
      msg
    }
  }
}
</script>

```

编译运行微信小程序

```javascript
npm run dev:weapp
```
编译后，打开微信开发者工具导入编译后的dist目录

#### 参考资料
[1] 
关于 Vue3 的章节: https://taro-docs.jd.com/taro/docs/vue3

[2] 
Github: https://github.com/lillian98/vue3

[3] 
Demo 在线预览地址: https://lillian98.github.io/vue3/dist/#/pages/index/index

[4] 
Taro RFCS: https://github.com/NervJS/taro-rfcs/blob/master/rfcs/0001-vue-3-support.md

[5] 
Vue3 和 React Hooks 对比: https://zhuanlan.zhihu.com/p/133819602

[6] 
SWR: https://github.com/vercel/swr

[7] 
自定义渲染器的应用: http://hcysun.me/vue-design/zh/renderer-advanced.html#%E8%87%AA%E5%AE%9A%E4%B9%89%E6%B8%B2%E6%9F%93%E5%99%A8%E7%9A%84%E5%BA%94%E7%94%A8

[8] 
compsition api: https://v3.cn.vuejs.org/guide/composition-api-introduction.html

[9] 
teleport: https://v3.cn.vuejs.org/guide/teleport.html#%E4%B8%8E-vue-components-%E4%B8%8E-vue-components-%E4%B8%80%E8%B5%B7%E4%BD%BF%E7%94%A8

[10] 
taro3 安装及使用: https://taro-docs.jd.com/taro/docs/GETTING-STARTED

如何在 Taro 里使用 Vue3 !

商品推荐

广告推荐

推荐文章