Vue+koa2开发一款全栈小程序(服务端环境搭建和项目初始化)

原创 Fly丶 教程 vue专题 4614阅读 2018-10-08 14:36:04 举报

1.微信公众平台小程序关联腾讯云

腾讯云的开发环境是给免费的一个后台,但是只能够用于开发,如果用于生产是需要花钱的,我们先用开发环境吧

1.用小程序开发邮箱账号登录微信公众平台

2.【设置】→【开发者工具】→第一次是git管理,开启腾讯云关联

3.会一路跳转到腾讯云的【开通开发环境】的流程要走

1.已经完成

2.下载安装微信开发者工具,也已经下载安装了

3.下载Node.js版本Demo

将demo中的server文件夹,复制到mpvue项目中

在项目下的project.config.json中,增加代码:

在server文件夹下的config.js中,在pass后填写Appid

然后在微信开发者工具中,打开项目,点击右上角的【腾讯云】→【上传测试代码】

首次上传选【模块上传】,然后如图把相应的地方勾选,以后就选智能上传就可以了。

2.搭建本地环境

1.安装MySQL数据库

2.配置本地server文件夹下的config.js,加入配置代码

3.新建cAuth数据库

打开MySQL控制台,执行命令

数据库名cAuth,是与server项目中保持一致。

如果本地的MySQL设置了密码,将server文件下的config.js中的数据库密码配置,填写你mysql数据库的密码

4.启动server服务端

打开cmd,cd到server项目目录下,执行

5.测试一下本地环境是否搭建好了

在server项目下controllers目录下,新建demo.js文件

在server项目目录下的router目录下的index.js中添加路由

然后执行运行server项目的命令

npm run dev //启动server项目 </pre>

浏览器访问

http://localhost:5757/weapp/demo

image

.

3.项目初始化

1.新建mpvue项目 打开cmd,cd到想要存放项目的目录下

2.用vscode打开mydemo项目

1.将图片素材库文件夹img复制到mydemo/static目录下

2.在src目录下,新建me目录,目录下新建mian.js和index.vue

main.js代码

index.vue

3.在src目录下,新建books目录,目录下新建mian.js和index.vue

main.js代码

index.vue代码

4.在src目录下,新建comments目录,目录下新建mian.js和index.vue

main.js代码

index.vue代码

嗯,是的,3,4,5步骤中,main.js 的代码是一样的,index.vue代码基本一样

5.防止代码格式报错导致项目无法启动,先到项目目录下的build目录下的webpack.base.conf.js中,将一段配置代码注释掉

6.在mydemo项目下的app.json中修改添加配置代码

app.json代码

7.在cmd中重启mydemo项目,在微信开发者工具中打开

image

3.底部导航

1.微信公众平台小程序全局配置文档地址

https://developers.weixin.qq.com/miniprogram/dev/framework/config.html#全局配置

2.根据官方文档,在app.json填写底部导航配置代码

3.效果图

4.代码封装

1.打开cmd,cd到server下,运行后端

2.在mydemo/src 目录下,新建config.js

3.在src目录下新建until.js

4.App.vue中添加代码

image

5.在微信开发者工具中,在右上角点击【详情】,勾选不校验合法域名

6.运行mydemo

image

5.使用ESLint自动规范代码

1.将mydemo/build/webpck.base.conf.js中之前注释的代码恢复

image

2.在mydemo项目下的package.json中的“lint”配置中加入--fix

3.执行代码,规范代码

4.执行运行代码

发现已经不报错啦!

总结

以上就是我要说的内容,希望以上的内容可以帮助到正在默默艰辛的大家,希望大家在往后的工作与面试中一切顺利。
那如何学习才能快速入门并精通呢?
当真正开始学习的时候难免不知道从哪入手,导致效率低下影响继续学习的信心。
但最重要的是不知道哪些技术需要重点掌握,学习时频繁踩坑,最终浪费大量时间,所以有一套实用的视频课程用来跟着学习是非常有必要的。
本次给大家推荐一个免费的学习群,里面概括移动应用网站开发,css,html,webpack,vue node angular以及面试资源等。
对web开发技术感兴趣的同学,欢迎加入Q群:866109386,不管你是小白还是大牛我都欢迎,还有大牛整理的一套高效率学习路线和教程与您免费分享,同时每天更新视频文件资料。
最后,祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复