用 Vue3 开发小程序,这里有一份实际的代码案例!

开发 前端 新闻
Vue 3 发布以后,最近也在学习和写一些 Vue3 的 demo 和项目,我也一直想着什么时候能在小程序里使用新特性?

前言

寻寻觅觅冷冷清清,凄凄惨惨戚戚。

Vue 3 发布以后,最近也在学习和写一些 Vue3 的 demo 和项目,我也一直想着什么时候能在小程序里使用新特性?

于是我翻遍了市面上的小程序框架,如 uni-app、wepy、mpvue,目前(截止至2020年11月5日)还都没能做到兼容 Vue 3 的写法,直到我发现了一个很骚的东西, Taro 居然支持 Vue 3。

很惊喜!

[[352367]]

开整

废话少说,放码过来,我们直接开整!

首先需要全局安装 @tarojs/cli :

  1. # 使用 npm 安装 CLI 
  2. $ npm install -g @tarojs/cli 
  3. # OR 使用 yarn 安装 CLI 
  4. $ yarn global add @tarojs/cli 
  5. # OR 安装了 cnpm,使用 cnpm 安装 CLI 
  6. $ cnpm install -g @tarojs/cli 

如果你的本地已经安装了 @tarojs/cli ,并且版本是 3.x,那么可以忽略上述操作。但是如过你的版本是 2.x,你需要先将它卸载了,再进行上述安装,卸载如下:

  1. $ npm uninstall -g @tarojs/cli 
  2. # 或者 
  3. $ yarn global remove @tarojs/cli 

必要的话,两个都执行一遍。

这是我的版本号:

初始化项目

通过如下命令行初始化项目:

  1. taro init taro-vue3 

选项如下,这里要注意 CSS 预处理去选择 Sass,后面 UI 框架会用到:

稍等一会儿,项目便可初始化完毕。

结束之后进入项目,运行指令:

  1. npm run dev:weapp 

编译成功之后,通过微信开发者工具打开 dist 目录,浏览项目,如下所示:

UI 库添加

要开发一个项目,虽然说不一定非要上 UI 库,但是有总比没有好。纯手写样式当然也是考验一个前端工程师的技术功底,但是项目工期不等人,提高开发效率才是第一位。

在我查找 Taro 是否有 Vue 相关的 UI 库时,我找到了 taro-ui-vue ,感觉很舒服,应该很快就可以写出一个 demo 来。

后来安装好组件包,引入组件使用的时候,编译出错了,大概看了一下,是没有兼容 Vue 3 的写法。

于是我打算暂时放弃了,然后到 taro-ui-vue 的仓库里提了一个 Issue,如下所示:

我再一次沸腾了,居然还有这玩意儿 taro-ui-vue3 ,此时此刻我突然就很想和东哥做兄弟,哈哈哈哈。

继续整!我们可以在项目里通过 npm install taro-ui-vue3 添加组件包,根据官网的提示,我这里采用了样式全局引入的方式:

  1. // app.js 
  2. import { createApp } from 'vue' 
  3. import store from './store' 
  4.  
  5. import 'taro-ui-vue3/dist/style/index.scss' 
  6.  
  7. const App = createApp({ 
  8.   onShow (options) {}, 
  9.   // 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖 
  10. }) 
  11.  
  12. App.use(store) 
  13.  
  14. export default App 

页面中直接通过引入组件使用:

  1. <template> 
  2.   <view class="index"
  3.     <NumberDisplay/> 
  4.     <NumberSubmit/> 
  5.     <AtButton class="add-btn" type='primary'>测试</AtButton> 
  6.   </view> 
  7. </template> 
  8.  
  9. <script> 
  10. import NumberDisplay from '../../components/NumberDisplay.vue' 
  11. import NumberSubmit from '../../components/NumberSubmit.vue' 
  12. import { AtButton } from 'taro-ui-vue3' 
  13. export default { 
  14.   name: 'Index'
  15.   components: { 
  16.     NumberDisplay, 
  17.     NumberSubmit, 
  18.     AtButton 
  19.   } 
  20. </script> 
  21.  
  22. <style> 
  23. .index { 
  24.   font-family: "Avenir", Helvetica, Arial, sans-serif; 
  25.   -webkit-font-smoothing: antialiased; 
  26.   -moz-osx-font-smoothing: grayscale; 
  27.   text-align: center; 
  28.   color: #2c3e50; 
  29.   margin-top: 60px; 
  30. </style> 

如下图所示:

更多组件使用,请自行查阅 taro-ui-vue3 官方文档 。

最后

本文主要就是为了安利大家一个能用 Vue 3 语法写小程序的框架,在此我也基于上述代码实践了一下,制作了一个 TodoList 小案例:

源代码已经开源到 GitHub vue3-examples 仓库中,仓库地址: vue3-examples ,此仓库将不定期更新各种 Vue3.0 相关的知识及各种整合 Demo 及 Vue3 使用小技巧,大家可以关注一下,有什么建议也欢迎大家给我留言。

除注明转载/出处外,皆为作者原创,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。

 

责任编辑:张燕妮 来源: 博客园
相关推荐

2018-07-30 09:33:21

2020-03-30 11:32:49

IT技术面试

2019-08-16 09:55:22

Pandas编程语言代码

2018-05-15 08:35:37

AI微软人工智能

2020-04-22 16:21:57

HTTP3数据HTTP2

2018-02-08 08:35:23

区块链食品安全食品供应商

2018-04-19 10:33:39

DevOps开源工具

2020-12-30 10:20:03

数据技术架构

2019-04-16 13:13:56

码农程序员开发

2018-04-19 14:42:48

深度学习DL数据集

2022-03-28 13:04:10

机器学习模型计算机

2018-02-08 08:26:54

红包春节支付宝

2018-01-02 16:42:42

iPhone电池Apple

2023-08-17 08:41:43

Vue 3多布局系统

2022-01-25 15:00:07

AI技术趋势

2018-01-19 22:43:13

2019-03-24 14:14:40

代码阅读源代码

2022-07-08 08:52:25

Vue3组合动态返回

2019-04-01 05:42:24

JavaScript视觉程序代码

2020-05-22 13:32:24

可视化词云图数据
点赞
收藏

51CTO技术栈公众号