## HbuilderX引入uview2 ### 准备材料 1. 一台电脑（本文所用为windows操作系统） 2. HbuilderX (本文所用为3.2.16) 3. 浏览器（本文所用为chrome浏览器） ### 先打开HbuilderX，如下  ### 先去安装必要的插件 1. 点击上面的【工具】 -> 【插件安装】  2. 看有没有安装sass/scss插件  3. 如果没有，就去插件市场安装新的插件，点击【安装新插件】，点击【前往插件中心安装】  4. 打开页面如下  5. 鼠标点击输入框，输入【sass】，回车。  点开第一个结果，点击【使用HbuilderX导入插件】  如果你还没有登录，它会引导你登录，如果已经登录，则会看到：  点击【打开】 回到HbuilderX界面，可以看到弹出框  点击【是】即可。  稍作等待：  安装完了把弹框给关掉就行。 6. 创建新项目 点击【文件】-> 【新建】 -> 【项目】  弹出框如下：  记得要点击【uni-app】  填写项目名，项目路径，模板选择【默认模板】就行  然后点击创建  目录结构如下：  7. 导入uview2 回到浏览器，点击上面的标签卡  PS：当前页面你关不关都行，看你心情。 点击【全部】  点击输入框，输入【uview2】，回车（或者点击搜索）  找到uview2  点击【使用HbuilderX】导入插件  弹出一个框  点击【确定】就行，如果你有多个项目就需要选择一下。  提示成功后，就可以正式的进入【配置uview】的环节了。 8. 配置uview2 首先打开main.js  原始内容如下：  在6行的行末敲空格写入内容如下： ```js import uView from '@/uni_modules/uview-ui' Vue.use(uView) ``` 效果如图：  然后打开uni.scss  原始内容如下：  在文件的开头写： ```scss @import '@/uni_modules/uview-ui/theme.scss'; ``` 效果如下：  然后点击App.vue文件  文件原始内容如下:  在文件的最后写入 ```vue <style lang="scss"> @import "@/uni_modules/uview-ui/index.scss"; </style> ``` 效果如下：  然后点击pages.json  原始内容如下：  在pages头顶添加如下： ```json "easycom": { "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue" }, ``` 效果如下：  9. 来测试一下吧 点开index.vue这个文件  原始内容如下：  在template里添加一句 ``` <u-button text="成功" type="success"></u-button> ``` 效果如下：  点击【运行】-> 【运行到浏览器】-> 【chrome】  稍作等待：   等到显示地址后，此时浏览器应该已经自动启动，如果没有，就手动输入上面的地址访问即可。  恭喜你，运行成功了~ > 本文作者：不爱喝橙子汁