Since the release of Vue3, I have been learning and writing some Vue3 demos and projects recently. I have been thinking about when I can use the new features in small programs. After some time of practice, I finally put together this article.

preface

Searching and searching in the cold, sad and sad.

Since the release of Vue3, I have been learning and writing some Vue3 demos and projects recently. I have been wondering when I can use the new features in small programs.

So I went through the market small program framework, such as UNI-app, wepy, MPvUE, currently (as of November 5, 2020) have not been able to achieve the compatibility of Vue 3 writing, until I found a very SAO things, Taro actually support Vue 3.

Very surprise!

On the whole! One unit

Cut the crap, put the code in, and we’ll go straight to the wheel!

The source code described in this article is open source to the GitHub vue3-Examples repository.

First you need to install @tarojs/cli globally:

Install the CLI using NPM
$ npm install -g @tarojs/cli
# OR Use Yarn to install the CLI
$ yarn global add @tarojs/cli
# OR install CNPM, use CNPM to install CLI
$ cnpm install -g @tarojs/cli
Copy the code

If you have @tarojs/cli installed locally and the version is 3.x, you can ignore this. However, if your version is 2.x, you will need to uninstall it before the above installation. Uninstall it as follows:

$ npm uninstall -g @tarojs/cli
# or
$ yarn global remove @tarojs/cli
Copy the code

Do both if necessary.

Here is my version number:

Initialize the project

Initialize the project with the following command line:

taro init taro-vue3
Copy the code

The options are as follows. Note that the CSS preprocessor is used to select Sass, which is used by the UI framework:

Wait a moment and the project will be initialized.

When finished, enter the project and run the command:

npm run dev:weapp
Copy the code

After successful compilation, open the dist directory through wechat developer tools and browse the project, as shown below:

UI library to add

You don’t have to use a UI library to develop a project, but it’s better than nothing. Pure handwriting style of course is also a test of a front-end engineer’s technical skills, but the project duration does not wait for people, improve the development efficiency is the first.

When I searched Taro for the UI library related to Vue, I found Taro-ui-vue. I felt very comfortable, and I should be able to write a demo soon.

Later, when I installed the component package and introduced the component to use, there was a compilation error. After a look, it was not compatible with Vue 3.

So I decided to give up for the time being, and then went to taro-ui-Vue’s warehouse to raise an Issue, as follows:

I seethed again, actually there is this thing Taro -ui-vue3, at this moment I suddenly want to be brothers with Dong brother, ha ha ha.

Keep the whole! We can add the component package in the project by NPM install tarant-ui-vue3. According to the hints on the official website, I adopt the global style introduction method here:

// app.js
import { createApp } from 'vue'
import store from './store'

import 'taro-ui-vue3/dist/style/index.scss'

const App = createApp({
  onShow (options) {},
  // The entry component does not need to implement the render method, and even if it did, it would be overridden by taro
})

App.use(store)

export default App
Copy the code

The page is used directly by introducing components:

<template>
  <view class="index">
    <NumberDisplay/>
    <NumberSubmit/>
    <AtButton class="add-btn" type='primary'>test</AtButton>
  </view>
</template>

<script>
import NumberDisplay from '.. /.. /components/NumberDisplay.vue'
import NumberSubmit from '.. /.. /components/NumberSubmit.vue'
import { AtButton } from 'taro-ui-vue3'
export default {
  name: 'Index'.components: {
    NumberDisplay,
    NumberSubmit,
    AtButton
  }
}
</script>

<style>
.index {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>
Copy the code

As shown in the figure below:

For more components, please refer to the official taro-ui-vue3 documentation.

Practical cases

This article is mainly for amway everyone can use Vue 3 grammar to write small program framework, here I also based on the above code practice, made a TodoList small case:

The source code is now available in GitHub vue3-Examples. Vue3-examples, this warehouse will not regularly update a variety of Vue3.0 related knowledge and a variety of integration of Demo and VUE3 use tips, you can pay attention to, what suggestions are also welcome to leave me a message.

In addition to indicate the reprint/source, all are the author’s original, welcome to reprint, but without the consent of the author must retain this paragraph of statement, and in the article page clearly given the original link, or reserve the right to seek legal responsibility.