栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > Vue.js

Vue与小程序的结合(mpVue)

Vue.js 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

Vue与小程序的结合(mpVue)

初始化一个 mpvue 项目

现代前端开发框架和环境都是需要 Node.js 的,如果没有的话,请先下载 nodejs 并安装。

然后打开命令行工具:

# 1. 先检查下 Node.js 是否安装成功$ node -v
v8.9.0$ npm -v5.6.0# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源$ npm set registry https://registry.npm.taobao.org/# 3. 全局安装 vue-cli# 一般是要 sudo 权限的$ npm install --global vue-cli# 4. 创建一个基于 mpvue-quickstart 模板的新项目# 新手一路回车选择默认就可以了$ vue init mpvue/mpvue-quickstart my-project#这一步会让你配置一些选项 其中需要配置你的小程序Appid# 5. 安装依赖,走你$ cd my-project
$ npm install
$ npm run dev

随着运行成功的回显之后,可以看到本地my-project文件夹根目录中多了个 dist 目录,这个目录里就是生成的小程序相关代码,通过微信小程序开发工具浏览到该目录dist文件夹,在微信小程序开发工具上配置上你的Appid。

搭建小程序的开发环境

小程序自己有一个专门的微信开发者工具,最新版本下载地址。

这一步比较简单,按照提示一步步安装好就行,然后用微信扫描二维码登陆。 至此小程序的开发环境差不多完成。

调试开发 mpvue

选择 小程序项目 并依次填好需要的信息:

项目目录:就是刚刚创建的项目目录(非 dist 目录)
AppID:没有的话可以点选体验“小程序”,只影响是否可以真机调试。
项目名称。


如图:

1.png



点击“确定”按钮后会跳到正式的开发页面,点击“编辑器”按钮,关闭自带的小程序编辑器。然后如图:

2.png

此时,整个 mpvue 项目已经跑起来了。
用自己趁手的编辑器(或者IDE)打开 my-project 中的 src 目录下的代码试试。



作者:Brighten_Sun
链接:https://www.jianshu.com/p/1d20f5bef73a


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/241407.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号