使用mpvue搭建一个初始小程序及项目配置方法


Posted in Javascript onDecember 03, 2018

 1. 初始化一个 mpvue 项目

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

然后打开命令行工具:

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因,可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖,走你
$ cd my-project
$ npm install
$ npm run dev

随着运行成功的回显之后,可以看到本地多了个 dist 目录,这个目录里就是生成的小程序相关代码。

2. 搭建小程序的开发环境

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

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

3. 调试开发 mpvue

选择 小程序项目 并依次填好需要的信息:
•项目目录:就是刚刚创建的项目目录(非 dist 目录)
•AppID:没有的话可以点选体验“小程序”,只影响是否可以真机调试。
•项目名称。

如图:

使用mpvue搭建一个初始小程序及项目配置方法

小程序项目配置

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

使用mpvue搭建一个初始小程序及项目配置方法

此时,整个 mpvue 项目已经跑起来了。

用自己趁手的编辑器(或者IDE)打开 my-project 中的 src 目录下的代码试试。

总结

以上所述是小编给大家介绍的使用mpvue搭建一个初始小程序及项目配置方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 小型打飞机游戏实现原理说明
Oct 28 Javascript
JavaScript内核之基本概念
Oct 21 Javascript
点击弹出层效果&弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
判断复选框是否被选中的两种方法
Jun 04 Javascript
jquery的attr方法禁用表单元素禁用输入内容
Jun 23 Javascript
深入探究使JavaScript动画流畅的一些方法
Jun 30 Javascript
JavaScript运动减速效果实例分析
Aug 04 Javascript
jQuery Password Validation密码验证
Dec 30 Javascript
使用Vue.observable()进行状态管理的实例代码详解
May 26 Javascript
ionic+html5+API实现双击返回键退出应用
Sep 17 Javascript
js单线程的本质 Event Loop解析
Oct 29 Javascript
vue添加自定义右键菜单的完整实例
Dec 08 Vue.js
JS基于Location实现访问Url、重定向及刷新页面的方法分析
Dec 03 #Javascript
koa2实现登录注册功能的示例代码
Dec 03 #Javascript
react-router 路由切换动画的实现示例
Dec 03 #Javascript
Vue.js 中的 v-model 指令及绑定表单元素的方法
Dec 03 #Javascript
ng-zorro-antd 入门初体验
Dec 03 #Javascript
如何使用 vue + d3 画一棵树
Dec 03 #Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 #Javascript
You might like
php magic_quotes_gpc的一点认识与分析
2008/08/18 PHP
destoon设置自定义搜索的方法
2014/06/21 PHP
php实现在服务器上创建目录的方法
2015/03/16 PHP
phpStudy2016 配置多个域名期间遇到的问题小结
2017/10/19 PHP
php模式设计之观察者模式应用实例分析
2019/09/25 PHP
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
javascript获取url上某个参数的方法
2013/11/08 Javascript
深入理解javascript中defer的作用
2013/12/11 Javascript
jQuery中nextUntil()方法用法实例
2015/01/07 Javascript
js兼容pc端浏览器并有多种弹出小提示的手机端浮层控件实例
2015/04/29 Javascript
用jQuery实现圆点图片轮播效果
2017/03/19 Javascript
微信小程序App生命周期详解
2018/01/31 Javascript
Angularjs Promise实例详解
2018/03/15 Javascript
nodejs如何在package.json中设置多条启动命令
2020/03/16 NodeJs
nginx配置域名后的二级目录访问不同项目的配置操作
2020/11/06 Javascript
[46:53]Secret vs Liquid 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/17 DOTA
python黑魔法之参数传递
2016/02/12 Python
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
pandas的object对象转时间对象的方法
2018/04/11 Python
Windows下Python3.6安装第三方模块的方法
2018/11/22 Python
Python基于Logistic回归建模计算某银行在降低贷款拖欠率的数据示例
2019/01/23 Python
通过实例解析python描述符原理作用
2020/01/22 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python IDLE或shell中切换路径的操作
2020/03/09 Python
django数据模型中null和blank的区别说明
2020/09/02 Python
在HTML5 canvas里用卷积核进行图像处理的方法
2018/05/02 HTML / CSS
La Redoute英国官网:法国时尚品牌
2017/04/27 全球购物
活动志愿者自荐信
2014/01/27 职场文书
渡河少年教学反思
2014/02/12 职场文书
实习生评语
2014/04/26 职场文书
模具专业自荐信
2014/05/29 职场文书
群众路线领导对照材料
2014/08/23 职场文书
小学生田径运动会广播稿
2014/09/11 职场文书
2016年校园社会综合治理宣传月活动总结
2016/03/16 职场文书
python基于OpenCV模板匹配识别图片中的数字
2021/03/31 Python
Windows10下安装MySQL8
2021/04/06 MySQL