使用HBuilder X创建uniapp项目并安装与配置uView的详细步骤

HBuilder X是DCloud公司推出的一个强大的HTML5开发工具，支持Vue.js、uni-app框架等。uView是一个基于uni-app的UI组件库，提供了丰富的界面交互组件。下面将详细介绍在HBuilder X中安装和配置uView的步骤。

准备工作

1. 确保你已经安装了HBuilder X。如果没有安装，可以前往官网下载并安装：https://www.dcloud.io/hbuilderx.html
2. 注册并登录DCloud账号，以便管理你的uni-app项目。

创建uni-app项目

1. 打开HBuilder X后，点击左上角的“文件”菜单，选择“新建” -> “项目”。
2. 在弹出的对话框中，选择“uni-app”项目模板。
3. 填写项目名称、项目路径等信息，然后点击“创建”按钮。
4. 选择或创建一个合适的AppID（如果你已经拥有DCloud账号，可以绑定一个新的AppID）。
5. 建好项目后，下图是创建好的目录，可以看到根目录下没有package.json文件，所以这时我们需要打开终端，一开始点击运行到终端会有一个提示：本项目下未包含package.json文件，所以我们可以先运行到内置浏览器，点击新建一个终端标签卡，打开终端
   
   
   
   

运行成功

创建package.json文件

现在开始输入npm命令：npm init -y，执行结束会多出一个package.json

安装uview-ui

执行npm install uview-ui命令，结束会看到多了一个node_modules文件

官方步骤

安装完成下一步就是配置，选择npm方式安装的配置

配置，步骤官方图如下：

// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)

/* uni.scss */
@import 'uview-ui/theme.scss';

<style lang="scss">
    /* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
    @import "uview-ui/index.scss";
</style>

// pages.json
{
    "easycom": {
        "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
    },
    
    // 此为本身已有的内容
    "pages": [
        // ......
    ]
}

执行步骤

（1）引入uView主JS库

（2）在引入uView的全局SCSS主题文件

（3）引入uView基础样式

（4）配置easycom组件模式，配置完成重启一下HX

重启完成之后验证一下uview是否引入并且配置成功，去复制组件里面的代码粘贴运行看看

按钮能够成功显示，就代表没问题了！！