使用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 getElementsByName()的用法说明
Jul 31 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
Jul 04 Javascript
JS倒计时代码汇总
Nov 25 Javascript
JQuery中Text方法用法实例分析
May 18 Javascript
JavaScript实现非常简单实用的下拉菜单效果
Aug 27 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
Jun 07 Javascript
扩展bootstrap的modal模态框-动态添加modal框-弹出多个modal框
Feb 21 Javascript
React Native实现进度条弹框的示例代码
Jul 17 Javascript
微信小程序视图容器(swiper)组件创建轮播图
Jun 19 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
vue3.0 CLI - 3.2 路由的初级使用教程
Sep 20 Javascript
微信小程序canvas绘制圆角base64图片的实现
Aug 18 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 file_get_contents 函数超时的几种解决方法
2009/07/30 PHP
PHP+JS实现大规模数据提交的方法
2015/07/02 PHP
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
PHP Header用于页面跳转时的几个注意事项
2016/10/21 PHP
PHP未登录自动跳转到登录页面
2016/12/21 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
让IE6支持min-width和max-width的方法
2010/06/25 Javascript
判断访客终端类型集锦
2015/06/05 Javascript
JavaScript 对象详细整理总结
2016/09/29 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
DOM事件探秘篇
2017/02/15 Javascript
Vue.js 通过jQuery ajax获取数据实现更新后重新渲染页面的方法
2018/08/09 jQuery
Angular事件之不同组件间传递数据的方法
2018/11/15 Javascript
vue和better-scroll实现列表左右联动效果详解
2019/04/29 Javascript
vue项目打包后怎样优雅的解决跨域
2019/05/26 Javascript
JS数组方法push()、pop()用法实例分析
2020/01/18 Javascript
Vue项目中使用flow做类型检测的方法
2020/03/18 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
微信小程序学习总结(五)常见问题实例小结
2020/06/04 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
Python中有趣在__call__函数
2015/06/21 Python
Python数据结构与算法之完全树与最小堆实例
2017/12/13 Python
Python3 中把txt数据文件读入到矩阵中的方法
2018/04/27 Python
对命令行模式与python交互模式介绍
2018/05/12 Python
python主线程捕获子线程的方法
2018/06/17 Python
Pytorch中的自动求梯度机制和Variable类实例
2020/02/29 Python
Pandas读取csv时如何设置列名
2020/06/02 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
python海龟绘图之画国旗实例代码
2020/11/11 Python
用python对excel查重
2020/12/07 Python
python字典与json转换的方法总结
2020/12/28 Python
css3实现超炫风车特效
2014/11/12 HTML / CSS
HTML5 history新特性pushState、replaceState及两者的区别
2015/12/26 HTML / CSS
《草原》教学反思
2014/02/15 职场文书
中学学校门卫岗位职责
2014/08/15 职场文书
简单了解 MySQL 中相关的锁
2021/05/25 MySQL