Shulou(Shulou.com)06/03 Report--

This article mainly explains "how to develop Mini programs with Vue3." Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's take you to learn "How to develop Mini programs with Vue3"!

First you need to install @tarojs/cli globally:

#Install CLI using npm $ npm install -g @tarojs/cli # OR Install CLI using yarn $ yarn global add @tarojs/cli # OR Install cnpm, install CLI using cnpm $ cnpm install -g @tarojs/cli

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

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

Do both if necessary.

This is my version number:

initialization project

Initialize the project with the following command line:

taro init taro-vue3

The options are as follows, here we should pay attention to CSS preprocessing to select Sass, the UI framework will be used later:

After a while, the project will be initialized.

After finishing, enter the project and run the command:

npm run dev:weapp

After successful compilation, open the dist directory through WeChat developer tools and browse the project as follows:

UI Library Add

To develop a project, although it is not necessary to have a UI library, it is better than nothing. Of course, pure handwriting style is also a test of a front-end engineer's technical skills, but the project duration is not equal to people, improving development efficiency is the first priority.

When I looked up Taro for Vue related UI libraries, I found taro-ui-vue and felt comfortable writing a demo soon.

Later, when installing the component package and introducing the component for use, there was a compilation error. I probably looked at it and found that it was not compatible with Vue 3.

So I decided to give up for a while, and then went to taro-ui-vue repository to raise an Issue, as follows:

I am boiling again. There is actually this thing taro-ui-vue3. At this moment, I suddenly want to be brothers with Brother Dong, hahaha.

Keep going! We can add component packages in the project through npm install taro-ui-vue3. According to the official website prompt, I use the global introduction of styles here:

// app.js import { createApp } from 'vue' import store from './ store' import 'taro-ui-vue3/dist/style/index.scss' const App = createApp({ onShow (options) {}, //Portal component does not need to implement render method, even if it is implemented, it will be overwritten by taro}) App.use(store) export default App

Use directly in the page by introducing components:

test 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 } } .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; }

As shown below:

At this point, I believe you have a deeper understanding of "how to develop Mini programs with Vue3," so you might as well do it! Here is the website, more related content can enter the relevant channels for inquiry, pay attention to us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.