微信小程序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支持代码高亮