美文网首页
记录一次使用mpvue开发小程序

记录一次使用mpvue开发小程序

作者: ChaliceLee92 | 来源:发表于2018-11-09 15:21 被阅读0次

    起手式,必要的开发环境

    1) . 确认是否安装node环境

    现在,前端工具链基本都依赖Node.js , 安装地址:https://nodejs.org/en/download/

    安装完成之后,在你的桌面右键点击桌面,打开你的命令行工具 , 查看是否安装成功

    然后我们切换成淘宝镜像源 , npmsetregistry https://registry.npm.taobao.org/

    2).安装vue-cli脚手架工具,可以快速创建vue项目骨架代码,我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令行输入如下命令:

    检查是否安装成功可以使用命令 vue 

    3).下载微信开发者工具

    这个工具是开发、调试和模拟运行微信小程序的最核心的工具了,所以必须安装。

    下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

    4).创建第一个基于mpvue的小程序项目 vue init mpvue/mpvue-quickstart firstapp

    上面这里选项如果不明白可以直接Enter即可

    5).安装完成之后桌面会多了一个你刚刚所创建的文件夹

    6).命令行cd firstapp进入文件夹内

    7).输入 npm i 安装依赖

    8).然后使用编辑器打开整个文件夹

    可以看到整个文件的结构如下, 下面我们要修改一下配置

    点击打开这个配置文件

    然后修改这个配置项

    在这个配置文件这里把miniprogramRoot的路径修改为"./dist/wx",这里假如不修改的话,会报app.json文件入口没找到,这是因为我们生成的文件路径dist里面还有一层wx文件夹.

    然后再下面几行找到appid,替换掉这个appid

    9).然后在命令行输入 npm run dev

    10).打开小程序开发者工具

    添加你刚刚创建的项目

    项目目录指向你刚刚创建的文件夹然后确定即可

    这样就代表项目创建成功了, 接下来就可以开始撸代码了

    相关文章

      网友评论

          本文标题:记录一次使用mpvue开发小程序

          本文链接:https://www.haomeiwen.com/subject/lchoxqtx.html