在Vue3项目中引入省市区联动插件
1. 打开HBuilder X
图1
2. 新建一个空项目
文件->新建->项目->uni-app
填写项目名称：vue3demo
选择项目存放目录：D:/HBuilderProjects
一定要注意vue的版本，当前选择的版本为vue3
图2
点击“创建”之后进入项目界面
图3
其中各文件的作用
（1）pages是存放页面的文件夹
（2）Static是存放图片等资源的文件夹
（3）Manifest.json是项目的配置文件
（4）Pages.json是项目的页面配置文件
3. 下载想要的插件并安装
（1）打开dcloud的插件市场：DCloud 插件市场
（2）搜索并选择想要的插件
图4
（3）点击插件的“下载”按钮
进入插件的详情页
图5
点击“下载插件并导入HBuilderX”，一定要注意插件基于的vue的版本，否则不兼容，
（4）插件安装（如果没有出现这一步，可以跳过）
安装时会提示以下依赖
图6
点击“继续”（如果没有出现这一步，可以跳过）
之后会在浏览器里提示要打开HBuilder X，确认打开后，会在HBuilder X的左下角有下图进行提示
图7
确定安装插件到项目中（如果没有出现这一步，可以跳过）
点击右下角的“安装插件”按钮，Vue3的插件会安装到项目的uni-modules文件夹（会自动创建）中，要经过几个步骤，需要等待一点时间，完成后会出现下图效果。
图8
（5）选择项目进行插件安装
如果前面的（4）步都没有出现如下图的选择项目列表的界面，则从“下载插件并导入HBuilderX”继续点击，重新安装导入一次，直到出现下图为止。
图9
Vue3的插件会安装到项目的uni-modules文件夹（此文件夹会自动创建）中，piaoyi-cityPicker是省市区联动的插件，出现了即表示插件安装成功。
图10
4. 在页面中引入插件
（1）打开省市区联动插件的详情页：data-cityPicker省市区地址选择器(兼容vue3) - DCloud 插件市场
（2）在页面最底下有项目的使用方法
（3）打开项目的index.vue主页页面
页面中分为三部分，分别是template/script/style
图11
（4）将代码粘贴进入index.vue中即可
<template>
<view>
<button @tap="open">打开</button>
<cityPicker :column="column" :default-value="defaultValue" :mask-close-able="maskCloseAble" @confirm="confirm" @cancel="cancel" :visible="visible"/>
<view>{{str}}</view>
</view></template>
<script>
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
export default {
data() {
return {
visible: false,
maskCloseAble: true,
str: '',
defaultValue: '420103',
// defaultValue: ['河北省','唐山市','丰南区'],
column: 3
}
},
components: {
cityPicker
},
methods: {
open () {
this.visible = true
},
confirm (val) {
console.log(val)
this.str = JSON.stringify(val)
this.visible = false
},
cancel () {
this.visible = false
}
},
onShareAppMessage(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: 'data-cityPicker省市区地址选择器！',
path: '/pages/cityPicker/cityPicker'
}
},
onShareTimeline(res) {
if (res.from === 'button') { // 来自页面内分享按钮
console.log(res.target)
}
return {
title: 'data-cityPicker省市区地址选择器！'
}
}
}</script>
<style lang="scss">
</style>5. 运行查看效果
运行->运行到浏览器->Edge
首次运行，需要下载并安装“Uni-app(vue3)编译器”，安装成功后，即会打开，插件效果图如下：
图12
原文地址：https://blog.csdn.net/lzm12278828/article/details/144067731
免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！