webstorm搭建wepy框架开发⼩程序
1.下载webstorm及node.js
2.安装wepy框架
运⾏命令npm install wepy-cli -g可以全局安装wepy。
3.⽣成基于wepy框架的demo项⽬
运⾏命令wepy new myproject ⽣成demo（其中myproject为要创建的demo项⽬的名称，可⾃定义，本⽂以myproject为例）
1.7.0之后的版本使⽤wepy init standard myproject初始化项⽬，使⽤wepy list查看项⽬模板（推荐通过wepy init standard
myproject新建项⽬）
4.安装demo项⽬的依赖并运⾏
运⾏命令cd myproject切换到项⽬⽬录；
运⾏命令npm install安装依赖；
运⾏命令wepy build --watch开启实时编译；
此时项⽬⽬录中会⽣成dist⽂件夹，此⽂件夹即为编译出来的⼩程序项⽬。
5.通过⼩程序开发⼯具查看项⽬效果
打开⼩程序开发⼯具，依次点击项⽬->新建项⽬->选择项⽬⽬录（即dist⽂件夹）->设置appID及项⽬名称，此时就可看到demo效果。
6.设置⼩程序中的项⽬信息
到⼩程序的“项⽬模块”，关闭ES6转ES5、上传代码时样式⾃动补全、上传代码时⾃动压缩混淆，由于是开发阶段，为了⽅便调试要勾选不校验合法域名...。
7.在webstorm中为.wpy⽂件添加⾼亮
⽤webstorm打开myproject，打开webstorm的settings，到plugins，搜索vue.js并安装。
我直接⽤命令--npm install vue
打开settings，到editor，到file types，到Vue.js Template，在Registered Patterns添加*.wpy。
8.使webstorm⽀持webpack的相对路径
执⾏wepy init standard demo后会⽣成fig.js⽂件，其类似于webpack的配置⽂件，可以使⽤⼀些plugins和compilers，具体功能详见wepy框架。这⾥要提的是，通常我们会在这个⽂件中设置路径的别名，以简化资源引⽤。
如将/src/components路径的别名设置为@，则引⽤/src/components/custom_screen可以简写为@/custom_screen。
alias: {
小程序开发一键生成平台源码
'@': path.join(__dirname, 'src/components')
},
这样使⽤会导致⼀个问题：webstorm不能识别如import custom_screen from '@/custom_screen'这样的语句，我们不能⽅便的通过F3快捷键到custom_screen对应的js⽂件。
这个问题的解决⽅法是：打开settings，到language & frameworks，到JavaScript，到webpack，选择fig.js。
9.webstorm不⽀持特有的单位rpx
webstorm不⽀持rpx单位，如果直接编码padding-bottom: 10rpx；会飘红，此时可以通过padding-bottom: unit(10,rpx)；迂回解决。如果要批量修改rpx单位，可以使⽤正则替换，将( \d{1,3})rpx（匹配空格+1-3个数字+rpx）替换为unit($1,rpx)。
----我直接将webstrom的 Invalid CSS property value选项关掉，缺点是别的css写错了也不会报错了

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。