Github

Good excited, personal first article, using Taro3+Vue3 to create a micro channel small program to see this article is enough 🤠 hope to help you

Install the Vscode plug-in

  • Eslint
  • Prettier
  • Volar

Currently implemented functions

  • Taro3 Vue3 Ts Vux4 Pinia
  • Component library NutUI
  • Eslint Prettier CommitLint
  • Small program subcontracting configuration
  • Taro3 works with Vue DevTools for debugging
  • Style wrap 1px problem bottom security area fit

The construction process of this project

Taro basic installation

Taro document

npx @tarojs/cli init WechatAppDemo
Copy the code

Using NPX, you can download the latest Taro3 project directly without installing cli tools globally

Local CLI installation ensures that the project is running

#The CLI is used to perform operations such as build
yarn add @tarojs/cli
#preview
yarn dev:weapp
Copy the code

Opening the wechat development tools project directory needs to point to the built dist file

Eslint Prettier CommitLint

  • The code specification ESlint
  • Code formatting Prettier
  • Commit specifications CommitLint

1. Install dependencies

yarn add @vue/eslint-config-prettier @vue/eslint-config-typescript eslint-plugin-prettier -D
Copy the code

2. Eslintrc.js and.prettierrc are used to resolve conflicts between Eslint and Prettier

3. Add the Ts check command to ensure that the command complies with the Ts specifications. Add Eslint checking commands to ensure compliance with the Eslint specification

yarn add vue-tsc -D
Copy the code

Add commands to script in package.json

"scripts": {"tsc": "vue-tsc --noEmit --skipLibCheck"."lint": "eslint --ext .vue --ext .js --ext .ts src/"
}
Copy the code

4. Added husky trigger Git hooks to ensure that Ts checks and Eslint checks are compliant when code is submitted

# https://github.com/typicode/husky
# https://typicode.github.io/husky/# /? id=articles
yarn add husky -D
#Initialize the husky
npx husky install
#The test command
npx husky add .husky/pre-commit "echo test"
Copy the code

Edit pre-commit to perform Eslint checking and Ts checking

Configuration of 5.commitlintImprove submission standards

yarn add  @commitlint/{config-conventional,cli} -D
# Configure commitlint to use conventional config
echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js
# Add hook
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
#If the first installation does not work, run NPX husky Install
Copy the code

Use Nutui in the Taro3 Vue3 applet

Nutui jingdong style lightweight mobile Vue component library

yarn add @nutui/nutui-taro
Copy the code

When you install Nutui, you will encounter an error figure for the style

Solution: introduce @tarojs/plugin-html plugin taro-docs.jd.com/taro/docs/u…

Dependency size after global introduction

To import on demand, install the plug-in babel-plugin-import

# https://nutui.jd.com/#/starttaro
yarn add babel-plugin-import -D
Copy the code

Main package size after import on demand

import { createApp } from 'vue'
import App from './App.vue'
import { Button, Cell, Icon } from '@nutui/nutui-taro'
import '@nutui/nutui-taro/dist/style.css'
createApp(App)
  .use(Button)
  .use(Cell)
  .use(Icon)
Copy the code

Since nutui’s design is 375, I changed the frame size to 375

At this point the Nutui component library has been mined and is able to function normally using events called normally

The nutui event is not triggered because the @tarojs/plugin-html version is not correct. My current project is fixed to 3.3.12

Small program subcontracting configuration

As more and more business code and the introduction of the components, main package size will be bigger and bigger, after more than 2 m of the main pack WeChat development tools can’t use the preview function, in order to get ready for the start of the subcontract processing, the main package contains common components and common code, only in a subcontract business code and code

//app.config.ts
export default {
  pages: ['pages/index/index'].window: {
    backgroundColor: '#fff'.backgroundTextStyle: 'light'.navigationBarBackgroundColor: '#fff'.navigationBarTitleText: 'WeChat'.navigationBarTextStyle: 'black'
  },
  subpackages: [{root: 'pages/featureA'.pages: ['index/index']]}}Copy the code

More optimization

Implement applets in Taro3 using script Setup syntaxPage life cycle methods

Use hooks for encapsulation

import { getCurrentInstance } from '@tarojs/taro'
import { onMounted } from 'vue'

const Current = getCurrentInstance()

export function useDidShow(callback) { onMounted(callback) Current? .page? .onShow && (Current.page.onShow = callback) }export function usePullDownRefresh(callback) { Current? .page? .onPullDownRefresh && (Current.page.onPullDownRefresh = callback) }export function useReachBottom(callback) { Current? .page? .onReachBottom && (Current.page.onReachBottom = callback) }Copy the code

Vuex installation and use

yarn add vuex@next --save
Copy the code

Create store directory add index.ts file

Vuex Ts prompts are implemented and modularized

import { createStore, Store } from 'vuex'
import { InjectionKey } from 'vue'

// Define the module type
interface User {
  number: number[]}export interface State {
  user: User
}
// define injection key
export const key: InjectionKey<Store<State>> = Symbol(a)const user = {
  state: {
    number: [1.2.3]},mutations: {
    ADD_NUMBER(state: User, payload) {
      state.number.push(payload)
    }
  },
  actions: {
    addNumber(context, number) {
      context.commit('ADD_NUMBER'.number)}},getters: {
    getNumbers(state) {
      return state.numbers
    }
  }
}

const store = createStore({
  modules: {
    user
  }
})

export default store
Copy the code

The installationPiniaState Management

yarn add pinia
yarn add taro-plugin-pinia

Copy the code

Project configuration file config/index.js:

// ...
plugins: ['taro-plugin-pinia']
// ...
Copy the code

Taro3 works with Vue DevTools for debugging

After Vue DevTools is enabled, the preview package cannot be previewed because the size of the main package is greater than 2 MB. Enable Debugging as required. Vue DevTools debugging is not enabled during official construction

Devtools debugging is disabled by default

"devtools:weapp": "npm run build:weapp -- --watch --devtools"
Copy the code

Style packaging

Common style

page {
  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Segoe UI, Arial, Roboto,
    'PingFang SC'.'miui'.'Hiragino Sans GB'.'Microsoft Yahei', sans-serif;
}

/ / solve the iPhone after x problems of safety area at the bottom of the https://jelly.jd.com/article/6006b1055b6c6a01506c87fd
.safe-area-bottom {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
Copy the code

1 px problem

Super line to omit

Details to adjust

Applets configuration details

Note the developer tool project Settings:

  • You need to disable the ES6 to ES5 function. If this function is enabled, an error may occur
  • Need to set to turn off the upload code style automatic completion, enable may report an error
  • You need to set the disable code compression upload, enable may report an error

Other restrictions

  • Not supported in applets<style scoped>, cssModules are recommended instead.
  • You cannot insert elements outside the DOM tree of a page component, so it is not supported<teleport>
  • Vue 3 uses Proxy in its internal implementation and cannot run on iOS 9 or later. However, the official Vue team will release compatible versions after the official version is released.
  • Using ref on the H5 side to get the DOM node of the underlying component, you now get only the Vue component instance of the adaptation layer, not the corresponding webComponent root node. In Vue2, it is possible to modify the refs attribute of the parent element, but in Vue3, the initialization order between components changes, so it is not currently supported.
  • Applets that do not resemble the HTML form tag specification, such as Picker, are not currently compatible with the V-Model. Vue3’s V-Model binding property is changed to modelValue and the event binding is changed to Update :modelValue. For HTML form tags, the values and events of the form are automatically connected. For example, input automatically corresponds to modelValue and value, update:modelValue and @Input. However, for Picker, the applet specific form does not correspond, and it is recommended not to use v-Model in this case.
  • The VirtualList component needs to implement a Vue3 version (to be implemented)
  • All component ids must be unique throughout the application (even if they are on different pages), otherwise events may not fire