VSCode Development UNI-APP Configuration Tutorial and Plugin

Table of contents Written in front Precautions Development environment construction Development Configuration Notes Written in front uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes and publish them to multiple platforms such as iOS, Android, H5, various mini-programs (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao), quick applications, etc. The best tool for developing UNI-APP is HbuilderX, but this does not make you wonder why you should develop UNI-APP in VsCode. In official terms, HBuilderX is an editor specially built for Vue, so what should you do if it is not Vue? At this time, you have to choose other products, so why not transfer UNI-APP to other products for development? Therefore, from the perspective of a unified editor, VsCode was recently chosen. HBuildex may be the best tool for developing UNI-APP, but it is not the most comprehensive tool. Before using VS Code to develop UNI-APP, I strongly recommend reading the official guide When uni-app meets vscode. Of course, I will emphasize some important steps again later. And the official tutorial vue-cli development uni-app tutorial Precautions VsCode can only act as an editor when developing UNI-APP. Program debugging must be done in the corresponding environment. For example, WeChat applets can only be debugged in WeChat developer tools (this is the same as HX) You can use npm commands to run and package in VsCode, but you cannot directly call the real machine simulator, nor can you use functions such as APP packaging. If you have such needs, you can only edit the code in the VSCode environment and then package it through HX. Development environment construction 1. Install Vue-cli 3.x globally (skip if already installed) npm install -g @vue/cli If Taobao mirror is installed, it is recommended to use cnpm installation cnpm install -g @vue/cli 2. Create a uni-app project via CLI vue create -p dcloudio/uni-preset-vue my-project 3. Open the project using VsCode 4. Install the Vue syntax prompt plugin Install the syntax prompt plug-in in the Vscode plug-in market. Here are some practical plug-ins recommended Vetur Vue syntax hint plugin vue-helper is another Vue syntax plugin, used in conjunction with Vetur Auto Close Tag is a self-closing plugin for tags, which is very useful when using external components. Auto Rename Tag tag renaming plug-in, very useful when you need to change the tag name Highlight Matching Tag Highlight the selected tag and quickly locate the beginning and end of the tag TODO Highlight Highlight the to-do items in the code Todo Tree and TODO Highlight are combined to build a more perfect todo management system koroFileHeader quickly generates header comments and code comments 5. Install UNI-APP syntax prompt npm i @dcloudio/uni-helper-json 6. Import HX custom code blocks Download the uni-app code block from github and put it in the .vscode directory under the project directory to have the same code block as HBuilderX. If there is no `.vscode` , create a new one in the project root directory You can also customize your own commonly used code blocks 7. Run & Publish Project You can run and publish projects through the VSCode left explorer/NPM script quick start command Run the project npm run dev:%PLATFORM% Publish a project npm run build:%PLATFORM% The possible values for %PLATFORM% are as follows:

Written in front
Precautions
Development environment construction
Development Configuration Notes

Written in front

uni-app is a framework for developing all front-end applications using Vue.js. Developers write a set of codes and publish them to multiple platforms such as iOS, Android, H5, various mini-programs (WeChat/Alipay/Baidu/Toutiao/QQ/DingTalk/Taobao), quick applications, etc. The best tool for developing UNI-APP is HbuilderX, but this does not make you wonder why you should develop UNI-APP in VsCode. In official terms, HBuilderX is an editor specially built for Vue, so what should you do if it is not Vue? At this time, you have to choose other products, so why not transfer UNI-APP to other products for development? Therefore, from the perspective of a unified editor, VsCode was recently chosen.

HBuildex may be the best tool for developing UNI-APP, but it is not the most comprehensive tool.

Before using VS Code to develop UNI-APP, I strongly recommend reading the official guide When uni-app meets vscode. Of course, I will emphasize some important steps again later. And the official tutorial vue-cli development uni-app tutorial

Precautions

VsCode can only act as an editor when developing UNI-APP. Program debugging must be done in the corresponding environment. For example, WeChat applets can only be debugged in WeChat developer tools (this is the same as HX)
You can use npm commands to run and package in VsCode, but you cannot directly call the real machine simulator, nor can you use functions such as APP packaging. If you have such needs, you can only edit the code in the VSCode environment and then package it through HX.

Development environment construction

1. Install Vue-cli 3.x globally (skip if already installed)

npm install -g @vue/cli

If Taobao mirror is installed, it is recommended to use cnpm installation

cnpm install -g @vue/cli

2. Create a uni-app project via CLI

vue create -p dcloudio/uni-preset-vue my-project

3. Open the project using VsCode

4. Install the Vue syntax prompt plugin

Install the syntax prompt plug-in in the Vscode plug-in market. Here are some practical plug-ins recommended

Vetur Vue syntax hint plugin
vue-helper is another Vue syntax plugin, used in conjunction with Vetur
Auto Close Tag is a self-closing plugin for tags, which is very useful when using external components.
Auto Rename Tag tag renaming plug-in, very useful when you need to change the tag name
Highlight Matching Tag Highlight the selected tag and quickly locate the beginning and end of the tag
TODO Highlight Highlight the to-do items in the code
Todo Tree and TODO Highlight are combined to build a more perfect todo management system
koroFileHeader quickly generates header comments and code comments

5. Install UNI-APP syntax prompt

npm i @dcloudio/uni-helper-json

6. Import HX custom code blocks

Download the uni-app code block from github and put it in the .vscode directory under the project directory to have the same code block as HBuilderX.

If there is no .vscode , create a new one in the project root directory

You can also customize your own commonly used code blocks

insert image description here

7. Run & Publish Project You can run and publish projects through the VSCode left explorer/NPM script quick start command

insert image description here

Run the project

npm run dev:%PLATFORM%

Publish a project

npm run build:%PLATFORM%

The possible values for %PLATFORM% are as follows:

value	platform
h5	H5
mp-alipay	Alipay Mini Program
mp-baidu	Baidu Mini Program
mp-weixin	WeChat Mini Program
mp-toutiao	Toutiao Mini Program
mp-qq qq	Mini Programs

If you want to publish an APP, you can only do it through HX

Development Configuration Notes

1. Usually, when you create a new page in HX, the page with the same name and route will be automatically registered in pages.json . In VsCode, page routing needs to be registered by itself

"pages": [ 
		{
			"path": "pages/home/home"
		}
	]

Release configuration description: A visual configuration interface is provided when releasing in HX. Release configuration in VSCode needs to be configured in manifest.json . The following example takes the configuration of WeChat applet appid and H5 packaging path as an example.

// manifest.json needs to be opened in JSONC format "mp-weixin": { /* WeChat applet-specific information*/
		"appid": " your_wx_apid ", /* WeChat appid */
		"setting": {
			"urlCheck": false /* Whether to check the secure domain name and TLS version */
		},
		"usingComponents": true /* Whether to enable custom component mode */
	},


 	"h5" : { /* H5 related */
			"router" : {
					"base" : "/basePath/" /* project basePath */
			},
			"domain" : " your_domin ", /* domain name */
			"optimization" : {
					"treeShaking" : {
							"enable" : true /* Whether to enable tree shaking optimization */
					}
			}
		}

For more configurations, see the uni-app configuration item list.

3. The global CSS file can be introduced in the APP.vue style tag. SCSS files can only be imported into the uni.scss file and then used in other pages

// APP.vue 
<style lang="scss">
	/*Common CSS for each page */
	@import url("./common/iconfont.css");
</style>

// uni.scss 
@import 'uview-ui/theme.scss';

Configure easycom rules

For easycom rule literacy articles, please refer to easycom mode, and practical skills that must be mastered for UNI-APP component development and calling!

Easycom rules are configured in the pages.json file. The custom configuration example is as follows

// pages.json
	"easycom": {
		"my-(.*)":"@/my-ui-components/my-$1.vue"
	},
	"pages":[...]

Configuration description: Apply easycom rules to all .vue files with the prefix my- in the directory my-ui-components . (So for ease of understanding you can think of $1 as a placeholder or wildcard)

This is the end of this article about VSCode development UNI-APP configuration tutorial and plug-in. For more relevant VSCode development UNI-APP content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future!

You may also be interested in: