一、自定义构建npm
1、在project.config.json文件中的 "miniprogramRoot"指定小程序源码目录。
"miniprogramRoot": "miniprogram/",2、在project.config.json文件中的setting.packNpmManually为true，开启自定义node_modules和miniprogram_npm位置的构建npm方式。
3、在project.config.json文件中的setting.packNpmRelationList中，指定packageJsonPath和miniprogramNpmDistDir的位置。
"setting": {"packNpmManually": true,"packNpmRelationList": [{"packageJsonPath": "./package.json","miniprogramNpmDistDir": "./miniprogram"}]
}二、vant weapp组件库
开源的UI组件库，基于微信小程序的自定义组件开发，可用来快速搭建小程序项目。
- 图片组件
<!-- 在使用van-image图片组件时，如果需要渲染本地的图片，不能使用../的形式，需要相对于小程序源码的目录来查找图片才可以 -->
<van-image width="100" height="100" src="/assert/goods/2019102006312133654.jpg!cc0.cn.jpg" />使用时需将app.json中的"style":"v2"去除，不关闭将造成部分组件样式混乱。
三、组件样式覆盖
1、解除样式隔离：在页面中使用Vant Weapp组件时，可直接在页面的样式文件中覆盖样式。
<van-button type="primary">主要按钮</van-button> .van-button--primary{font-size: 28rpx !important;background-color: lightskyblue !important;border: 1px solid lightskyblue !important;}2、使用外部样式类：需要注意的是普通样式类和外部样式类的优先级是未定义的，使用时需要添加!important保证外部样式类的优先级。
<van-button type="primary" custom-class="custom-class">主要按钮</van-button>.custom-class{font-size: 28rpx !important;background-color: lightskyblue !important;border: 1px solid lightskyblue !important;}3、使用CSS变量：在页面或全局对多个组件的样式做批量修改以进行主题样式的定制。
<van-button type="primary" class="my-button" >主要按钮</van-button>
.van-button--primary{font-size: 28rpx !important;background-color: var(--color) !important;border: 1px solid var(--color) !important;
}
.my-button{--color:rgb(55, 107, 139);
}
)
