Vue 微信小程序 uni-app学习系列《一》

下载开发工具

http://www.dcloud.io/hbuilderx.html

Vue 微信小程序 uni-app学习系列《一》_第1张图片

创建项目

文件–》项目

Vue 微信小程序 uni-app学习系列《一》_第2张图片

运行

Vue 微信小程序 uni-app学习系列《一》_第3张图片

下载微信小程序开发工具,并且完成安装

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

Vue 微信小程序 uni-app学习系列《一》_第4张图片

设置微信开发工具路径

C:/Program Files (x86)/Tencent/微信web开发者工具

Vue 微信小程序 uni-app学习系列《一》_第5张图片

打开小程序开发工具,设置服务端口,开启

Vue 微信小程序 uni-app学习系列《一》_第6张图片
Vue 微信小程序 uni-app学习系列《一》_第7张图片

安装插件

13:12:48.289 项目 ‘vuedemo’ 开始编译…
13:12:55.557 预编译器错误:代码使用了scss/sass语言,但未安装相应编译器,请在菜单工具-插件安装里安装相应编译插件 at components\uni-load-more\uni-load-more.vue:1
13:12:55.637 ERROR Build failed with errors.

Vue 微信小程序 uni-app学习系列《一》_第8张图片

微信小程序启动

Vue 微信小程序 uni-app学习系列《一》_第9张图片

启动成功

Vue 微信小程序 uni-app学习系列《一》_第10张图片

手机预览

查看app id
Vue 微信小程序 uni-app学习系列《一》_第11张图片

设置 app id

Vue 微信小程序 uni-app学习系列《一》_第12张图片

点击预览

Vue 微信小程序 uni-app学习系列《一》_第13张图片

你可能感兴趣的:(微信小程序,Vue)