使用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 相关文章推荐
IE与Firefox下javascript getyear年份的兼容性写法
Dec 20 Javascript
IE6、IE7中获取Button元素的值的bug说明
Aug 28 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
javascript关于继承解析
May 10 Javascript
JavaScript中输出信息的方法(信息确认框-提示输入框-文档流输出)
Jun 12 Javascript
如何判断出一个js对象是否一个dom对象
Nov 24 Javascript
Angular 2父子组件数据传递之@ViewChild获取子组件详解
Jul 04 Javascript
JS函数节流和函数防抖问题分析
Dec 18 Javascript
JavaScript判断对象和数组的两种方法
May 31 Javascript
js实现页面导航层级指示效果
Aug 25 Javascript
JS相册图片抖动放大展示效果的示例代码
Jan 29 Javascript
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版(2)
2006/10/09 PHP
php 目录与文件处理-郑阿奇(续)
2011/07/04 PHP
thinkPHP js文件中U方法不被解析问题的解决方法
2016/12/05 PHP
ThinkPHP下表单令牌错误与解决方法分析
2017/05/20 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
angularjs自定义ng-model标签的属性
2016/01/21 Javascript
基于jQuery Ajax实现上传文件
2016/03/24 Javascript
jquery对Json的各种遍历方法总结(必看篇)
2016/09/29 Javascript
浅谈js中同名函数和同名变量的执行问题
2017/02/12 Javascript
Vue.js事件处理器与表单控件绑定详解
2017/03/20 Javascript
iscroll.js滚动加载实例详解
2017/07/18 Javascript
全选复选框JavaScript编写小结(附代码)
2017/08/16 Javascript
JS实现二维数组元素的排列组合运算简单示例
2019/01/28 Javascript
三分钟教你用Node做一个微信哄女友(基友)神器(面向小白)
2019/06/21 Javascript
JS如何监听div的resize事件详解
2020/12/03 Javascript
[42:48]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第二场 12.11
2020/12/16 DOTA
python 将print输出的内容保存到txt文件中
2018/07/17 Python
Python3多线程基础知识点
2019/02/19 Python
python 随机生成10位数密码的实现代码
2019/06/27 Python
python sklearn常用分类算法模型的调用
2019/10/16 Python
Python 实现黑客帝国中的字符雨的示例代码
2020/02/20 Python
python+selenium 简易地疫情信息自动打卡签到功能的实现代码
2020/08/22 Python
css3.0新属性效果在ie下的解决方案
2010/05/10 HTML / CSS
HTML5打开本地app应用的方法
2016/03/31 HTML / CSS
英国购买威士忌网站:Master of Malt
2019/09/26 全球购物
医校毕业生自我鉴定
2014/01/25 职场文书
青年教师典范事迹材料
2014/01/31 职场文书
质量月活动总结
2014/08/26 职场文书
中学生教师节演讲稿
2014/09/03 职场文书
医药销售自我评价200字
2014/09/11 职场文书
2014年党员自我剖析材料
2014/10/07 职场文书
初二学生评语大全
2014/12/26 职场文书
幽灵公主观后感
2015/06/09 职场文书
DE1103使用报告
2022/04/05 无线电
Windows Server 2022 超融合部署(图文教程)
2022/06/25 Servers
python manim实现排序算法动画示例
2022/08/14 Python