Use cli to build the uni-app project and introduce vant

github site: w-uniapp-vant

first step

• Install vue-cli globally

npm install -g @vue/cli

• Create uni-app and use the official version (corresponding to the latest official version of HBuilderX)

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

At this time, you will be prompted to select a project template (you will not be prompted when using the Vue3/Vite version. Currently, only the creation of default templates is supported). For first-time experience, it is recommended to select the hello uni-app project template, as shown below: I chose it here It isTypeScript template

and the structure is like this

• Next download vant

npm i @vant/weapp -S --production

• Create a new folder in the root directorywxcomponents and then find the dist under vant/weapp in node_mpdules and copy it to wxcomponents (mine is Replace the dist folder name with vant)
• 
• Introduce components below pages.json as shown below
  

"usingComponents": {
    
    
	"van-button": "../wxcomponents/vant/button/index"
}

• and then use

<view>
	<van-button type="primary">默认按钮</van-button>
	<van-button type="info">信息按钮</van-button>
	<van-button type="warning">警告按钮</van-button>
	<van-button type="danger">危险按钮</van-button>
</view>

• You will see the following interface
  
  You may encounter blank related issues when packaging and publishing online
  It is similar to vue, just modify it here (manifest.json)
  
  I have tried publishing it online and no problem
  The next article will be published to the mini program~