使用vscode编写uniapp并引入vant组件

使用vscode编写uniapp并引入vant组件

前情

入门前端以来就是用的vscode,难以再接纳HBuilderX,更别说微信开发者工具了,甚至使用vscode成一种执念.而且uniapp语法是基于vue的想用vue直接编译成uniapp语法
因此有了这个组合: vscode + uniapp + vant

1. 项目初始化

进入uniapp官网找到你要拉取项目的版本的代码

• 我使用的是vue3/vite,但用命令行创建失败,直接去gitee下载的模板
• 将模版解压后,运行npm i初始化项目
• 接着运行npm init,一直按回车就行
• 创建文件夹wxcomponents并在此文件夹下再创建vant文件夹
  

2. 引入vant组件库

进入github下载最新的zip

• 解压之后,取出dist文件夹,复制到wxcomponents/vant/里
  

3. 在App.vue中引入样式

<style>
/*每个页面公共css */
@import "./wxcomponents/vant/dist/common/index.wxss"
</style>

4. 在pages.json文件中引入组件

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

"globalStyle": {
	"navigationBarTextStyle": "black",
	"navigationBarTitleText": "uni-app",
	"usingComponents": {
		"van-button": "./wxcomponents/vant/dist/button/index"
	},
	"navigationBarBackgroundColor": "#F8F8F8",
	"backgroundColor": "#F8F8F8"
}

5. 使用pages/index/index.vue

<van-button type="warning">警告按钮</van-button>

6. 重启项目

npm run dev:mp-weixin

打开微信开发者工具,查看代码变化

7.最后

填写APPID

打开manifest.json

"mp-weixin" : {
    "appid" : "",<!--在此处填写id--> 
    "setting" : {
        "urlCheck" : false
}