微信小程序wepy+vant-weapp Hello World

安装

安装最新的wepy命令行工具

1
npm install @wepy/cli@next -g

生成开发示例

1
wepy init standard myproject

安装依赖

1
2
cd myproject
npm install

安装vant-weapp

1
npm i @vant/weapp -S --production

node_modules/@vant/weapp/dist文件夹复制到src/components重命名为vant-weapp

引入vant/weapp

进入wepy.config.js,在resolve - alias增加别名'@vant': path.join(__dirname, 'src/components/vant-weapp'),完整内容如下

1
2
3
4
5
6
7
8
9
resolve: {
alias: {
counter: path.join(__dirname, 'src/components/counter'),
'@': path.join(__dirname, 'src'),
'@vant': path.join(__dirname, 'src/components/vant-weapp')
},
aliasFields: ['wepy', 'weapp'],
modules: ['node_modules']
},

引入组件

1
2
3
usingComponents: {
"van-button": "~@vant/button/index"
}

开发实时编译

1
2
3
4
5
wepy build --watch

//或者

npm run dev

相关链接

让wepy在WebStorm支持代码高亮