VSCode + UNI-app + wechat developer tools

Since I don’t want to use HBuilderX for development, I use vue-cli to create the uniapp project and edit it in vscode. After the project is compiled into wechat applets, it can be opened and previewed in wechat developer tools.

Vue-cli creates the uni-app project

  • There is a detailed explanation in the official documentation, so I do not elaborate too much. For details, create the official uni-app document through vue-CLI.
  • Reference documentation: when uni-app meets vscode.

Syntax tips for installing components

Uni-app’s built-in component syntax is automatically prompted. npm i @dcloudio/uni-helper-json

Import HBuilderX’s own code block

Download the uni-app code block from GitHub and put it in your project’s.vscode directory to have the same code block as HbuilderX (conditional compiled statements, etc.). Download address

HbuilderX engineering

The HBuilderX creation project does not have the types syntax hint by default, and can be installed by itself when editing in vscode.

  • Initialize NPM (already initialized, can be ignored)

    npm init -y
Copy the code

  • Install uni-app syntax tips

    npm i @types/uni-app @types/html5plus -D
Copy the code

Json file under uni-app project

Manifest. json, pages. Json files under uni-app project may contain some Comments and need to be opened with jSONC (JSON with Comments) editor.

2. Install SASS/LESS

Install the sass

Sass comes with the UNI-app project, but node-sass and Sass-Loader still need to be introduced.

  • The installationnode-sass 
    NPM install [email protected] - save - devCopy the code
  • The installationsass-loader 
    NPM install [email protected] - save - devCopy the code
  • Do not install the latest version. If the version number is too high, an error may occur.

Install the less

I’m used to using less, and here’s how to introduce less.

  • The installationless 
    NPM install [email protected] - save - devCopy the code
  • The installationless-loader 
    NPM install [email protected] - save - devCopy the code
  • Do not install the latest version. If the version number is too high, an error may occur.