Vue3-ts uni-APP engineering template construction

This is the 22nd day of my participation in Gwen Challenge

preface

Projects created via VUE-CLI are easier to maintain and can be coded using a non-Hbuilderx editor, with compilation commands executed directly from a terminal

HbuilderX does not have a Linux version (excluding wine), but There are Daishen ported wechat development tools under Linux version:

  • cytle/wechat_web_devtools
  • dragonation/wechat-devtools

Therefore, micro channel applets can also be developed in the Linux environment, so that the development and debugging of the three common operating systems can be normal

Initialize the project template

Use the vuE3 basic template provided by UNI-App

Install the vue – cli

npm install -g @vue/cli
Copy the code

Initialize the VUE3 project

vue create -p dcloudio/uni-preset-vue#vue3 uni-vue3-ts-template
Copy the code

If you wait a while, the following choices will appear

Select the TS version here

There is also an option to select @dCloudio/uni-MP-360. Select the first (latest version)

After a while the initialization is complete, the directory structure is as follows

Based on the template

Includes jest, Babel, PostCSS, typescript and other basic configuration files

Let’s run it:

yarn install
Copy the code

Applets are built using WebPack again

Run to wechat terminal

# dev
yarn dev:mp-weixin

# prod
yarn build:mp-weixin
Copy the code

Development starts up much faster than starting projects with HbuilderX

Then import the compiled result dist/dev/mp-weixin into wechat developer tool to run

Sass support

The template does not support Sass by default

To install sass-Loader and Node-sass, you need to specify the version. If the version is too late, sass cannot run

Yarn add [email protected] node-sass@4 --devCopy the code

compiler-sfc

Emm after the experiment, currently compiled to the small program side is not supported, follow-up wait and see

Vant UI

Wechat applets

Vant Appellate was used to develop wechat appellate programs

yarn add @vant/weapp
Copy the code

Create the wxComponents folder in the SRC directory

Copy node_modules/@vant to wxComponents

SRC/app.vue introduces style files

<style>
    /* Common CSS for each page */
    /* vant - weapp */
    @import '/wxcomponents/@vant/weapp/dist/common/index.wxss';
</style>
Copy the code

Globally register referenced components in SRC /pages.json

{
	"globalStyle": {
		"usingComponents": {
			"van-button": "/wxcomponents/@vant/weapp/dist/button/index"}}}Copy the code

use

 <van-button type="primary">test</van-button>
Copy the code

The effect

To be continued

  • eslint
  • vuex
  • axios
  • . and more

Data summary

  • Uni-vue3-ts: Template repository
  • Uni-app applet and H5 support VUE3