快速上手

使用之前

在开始使用VtuWeapp之前，你需要先阅读微信小程序自定义组件的相关文档。

安装

VtuWeapp提供两种安装方法，满足不同开发者的需求。如果您需要使用npm安装，请确保您已经在本机安装了npm。

方式一： 使用npm安装 （推荐）

打开小程序的项目根目录，执行下面的命令（如果使用了云开发，需要进入miniprogram文件夹下执行下面的命令）。

npm init
      

此时，会生成一个package.json文件，命令行里会以交互的形式让你填一些项目的介绍信息，你可以耐心填完，当然也可以忽略，全部按回车键来快速完成项目初始化。

接着，继续执行下面的命令。

npm install vtuweapp
      

执行成功后，会在根目录里生成项目依赖文件夹 node_modules/vtuweapp （小程序IDE的目录结构里不会显示此文件夹）。 然后用小程序官方IDE打开我们的小程序项目，找到工具选项，点击下拉选中构建npm，等待构建完成即可。

出现上图所示的结果后，可以看到小程序IDE工具的目录结构里多出了一个文件夹miniprogram_npm（之后所有通过npm引入的组件和js库都会出现在这里），打开后可以看到vtuwwapp文件夹，也就是我们所需要的组件。

方式二： 下载代码

到[GitHub]下载Vtu Weapp的代码，将dist目录拷贝到自己的项目中。然后按照如下的方式使用组件，以Button为例，其它组件在对应的文档页查看：1. 添加需要的组件。在页面的 json 中配置（路径根据自己项目位置配置）：

"usingComponents": {
    "vtu-btn": "../../dist/button/vtu-btn"
}
      

1. 在 wxml 中使用组件：

<vtu-btn type="primary" bind:click="handleClick">这是一个按钮</vtu-btn>
      

全局样式更改

vtuweapp的样式使用了wxss作为开发语言，并定义了一系列全局/组件的样式变量，你可以根据需求进行相应调整。

修改Vtu_Style.wxss

以下是一些最常用的通用变量，所有样式变量可以在这里找到。组件样式变量 找到根目录，打开vtuweapp/css/Vtu_Style.wxss文件

          /*默认颜色配置*/
    --default: #dcdfe6;
    --primary: #1989fa;
    --primary-light: #91c7ff;
    --primary-dark: #0072de;
    --success: #07c160;
    --warning: #f5bf49;
    --danger: #f44;
    --info: #909399;
        
      

同样打开根目录，打开vtuweapp/css/Vtu_Style.wxss文件，看到文件中定义了一个变量—primary，如果有主题色修改的需求，更改它即可。

    --primary: #1989fa;