多应用+插件架构,代码干净,二开方便,首家独创一键云编译技术,文档视频完善,免费商用码云13.8K 广告
## HbuilderX引入uview2 ### 准备材料 1. 一台电脑(本文所用为windows操作系统) 2. HbuilderX (本文所用为3.2.16) 3. 浏览器(本文所用为chrome浏览器) ### 先打开HbuilderX,如下 ![image-20220220210346846](https://qiniu.buaihechengzizhi.com/img/image-20220220210346846.png) ### 先去安装必要的插件 1. 点击上面的【工具】 -> 【插件安装】 ![image-20220220210542010](https://qiniu.buaihechengzizhi.com/img/image-20220220210542010.png) 2. 看有没有安装sass/scss插件 ![image-20220220210714499](https://qiniu.buaihechengzizhi.com/img/image-20220220210714499.png) 3. 如果没有,就去插件市场安装新的插件,点击【安装新插件】,点击【前往插件中心安装】 ![image-20220220210815513](https://qiniu.buaihechengzizhi.com/img/image-20220220210815513.png) 4. 打开页面如下 ![image-20220220210847429](https://qiniu.buaihechengzizhi.com/img/image-20220220210847429.png) 5. 鼠标点击输入框,输入【sass】,回车。 ![image-20220220210924316](https://qiniu.buaihechengzizhi.com/img/image-20220220210924316.png) 点开第一个结果,点击【使用HbuilderX导入插件】 ![image-20220220210949963](https://qiniu.buaihechengzizhi.com/img/image-20220220210949963.png) 如果你还没有登录,它会引导你登录,如果已经登录,则会看到: ![image-20220220211024257](https://qiniu.buaihechengzizhi.com/img/image-20220220211024257.png) 点击【打开】 回到HbuilderX界面,可以看到弹出框 ![image-20220220211057685](https://qiniu.buaihechengzizhi.com/img/image-20220220211057685.png) 点击【是】即可。 ![image-20220220211114355](https://qiniu.buaihechengzizhi.com/img/image-20220220211114355.png) 稍作等待: ![image-20220220211125313](https://qiniu.buaihechengzizhi.com/img/image-20220220211125313.png) 安装完了把弹框给关掉就行。 6. 创建新项目 点击【文件】-> 【新建】 -> 【项目】 ![image-20220220211719127](https://qiniu.buaihechengzizhi.com/img/image-20220220211719127.png) 弹出框如下: ![image-20220220211814673](https://qiniu.buaihechengzizhi.com/img/image-20220220211814673.png) 记得要点击【uni-app】 ![image-20220220211837722](https://qiniu.buaihechengzizhi.com/img/image-20220220211837722.png) 填写项目名,项目路径,模板选择【默认模板】就行 ![image-20220220211937893](https://qiniu.buaihechengzizhi.com/img/image-20220220211937893.png) 然后点击创建 ![image-20220220211954766](https://qiniu.buaihechengzizhi.com/img/image-20220220211954766.png) 目录结构如下: ![image-20220220212026728](https://qiniu.buaihechengzizhi.com/img/image-20220220212026728.png) 7. 导入uview2 回到浏览器,点击上面的标签卡 ![image-20220220211246048](https://qiniu.buaihechengzizhi.com/img/image-20220220211246048.png) PS:当前页面你关不关都行,看你心情。 点击【全部】 ![image-20220220211348317](https://qiniu.buaihechengzizhi.com/img/image-20220220211348317.png) 点击输入框,输入【uview2】,回车(或者点击搜索) ![image-20220220211441176](https://qiniu.buaihechengzizhi.com/img/image-20220220211441176.png) 找到uview2 ![image-20220220211527357](https://qiniu.buaihechengzizhi.com/img/image-20220220211527357.png) 点击【使用HbuilderX】导入插件 ![image-20220220211551957](https://qiniu.buaihechengzizhi.com/img/image-20220220211551957.png) 弹出一个框 ![image-20220220212117081](https://qiniu.buaihechengzizhi.com/img/image-20220220212117081.png) 点击【确定】就行,如果你有多个项目就需要选择一下。 ![image-20220220212140116](https://qiniu.buaihechengzizhi.com/img/image-20220220212140116.png) 提示成功后,就可以正式的进入【配置uview】的环节了。 8. 配置uview2 首先打开main.js ![image-20220220212355929](https://qiniu.buaihechengzizhi.com/img/image-20220220212355929.png) 原始内容如下: ![image-20220220212433202](https://qiniu.buaihechengzizhi.com/img/image-20220220212433202.png) 在6行的行末敲空格写入内容如下: ```js import uView from '@/uni_modules/uview-ui' Vue.use(uView) ``` 效果如图: ![image-20220220212505749](https://qiniu.buaihechengzizhi.com/img/image-20220220212505749.png) 然后打开uni.scss ![image-20220220212612829](https://qiniu.buaihechengzizhi.com/img/image-20220220212612829.png) 原始内容如下: ![image-20220220212629443](https://qiniu.buaihechengzizhi.com/img/image-20220220212629443.png) 在文件的开头写: ```scss @import '@/uni_modules/uview-ui/theme.scss'; ``` 效果如下: ![image-20220220212653951](https://qiniu.buaihechengzizhi.com/img/image-20220220212653951.png) 然后点击App.vue文件 ![image-20220220213136442](https://qiniu.buaihechengzizhi.com/img/image-20220220213136442.png) 文件原始内容如下: ![image-20220220213209803](https://qiniu.buaihechengzizhi.com/img/image-20220220213209803.png) 在文件的最后写入 ```vue <style lang="scss"> @import "@/uni_modules/uview-ui/index.scss"; </style> ``` 效果如下: ![image-20220220213250608](https://qiniu.buaihechengzizhi.com/img/image-20220220213250608.png) 然后点击pages.json ![image-20220220213326192](https://qiniu.buaihechengzizhi.com/img/image-20220220213326192.png) 原始内容如下: ![image-20220220213343203](https://qiniu.buaihechengzizhi.com/img/image-20220220213343203.png) 在pages头顶添加如下: ```json "easycom": { "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" }, ``` 效果如下: ![image-20220220213447392](https://qiniu.buaihechengzizhi.com/img/image-20220220213447392.png) 9. 来测试一下吧 点开index.vue这个文件 ![image-20220220213619331](https://qiniu.buaihechengzizhi.com/img/image-20220220213619331.png) 原始内容如下: ![image-20220220213638380](https://qiniu.buaihechengzizhi.com/img/image-20220220213638380.png) 在template里添加一句 ``` <u-button text="成功" type="success"></u-button> ``` 效果如下: ![image-20220220213751027](https://qiniu.buaihechengzizhi.com/img/image-20220220213751027.png) 点击【运行】-> 【运行到浏览器】-> 【chrome】 ![image-20220220213821674](https://qiniu.buaihechengzizhi.com/img/image-20220220213821674.png) 稍作等待: ![image-20220220213855923](https://qiniu.buaihechengzizhi.com/img/image-20220220213855923.png) ![image-20220220213928732](https://qiniu.buaihechengzizhi.com/img/image-20220220213928732.png) 等到显示地址后,此时浏览器应该已经自动启动,如果没有,就手动输入上面的地址访问即可。 ![image-20220220214005913](https://qiniu.buaihechengzizhi.com/img/image-20220220214005913.png) 恭喜你,运行成功了~ > 本文作者:不爱喝橙子汁