## 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】  稍作等待：   等到顯示地址后，此時瀏覽器應該已經自動啟動，如果沒有，就手動輸入上面的地址訪問即可。  恭喜你，運行成功了~ > 本文作者：不愛喝橙子汁