文档章节

windows系统下 从0开始使用mpvue搭建微信小程序

来试试水哈
 来试试水哈
发布于 2019/12/08 14:05
字数 783
阅读 49
收藏 0

本文将从按照node.js开始脚大家如何快速的搭建mpvue框架的微信小程序,接下来让我们开始吧!

一、node.js的安装

1.首先先下载node.js,下载地址为http://nodejs.cn/download/,根据自己的操作系统下载对应的包,这里我选择的是window系统 64位的msi。

2.下载完成后,打开下载好的msi文件,然后按照指示进行安装即可,在过程中,会默认将npm和nodejs加入环境变量,省去了自己添加环境变量的过程。

3.完成后,在命令行输入npm --version,如下图所示,显示出版本号,那么我们的第一步node.js就按照完成了

二、node.js的相关配置

1.因为中国国内网络原因,因此我们需要修改npm的仓库地址,目前推荐两种方式进行设置

(1)使用config

npm config set registry http://registry.npm.taobao.org/  将仓库地址设置为国内的淘宝

(2)修改 ~/.npmrc文件

在文件中加入以下内容:registry=http://registry.npm.taobao.org/

三、按照vue脚手架(vue-cli)

1.输入以下指令 npm install vue-cli -g,-g是全局global的意思

2.等待按照完成后,再在控制台输入vue,如果出现下图,那么就证明按照成功了

四、快速搭建mpvue项目

1.创建项目

在自己制定的一个文件夹下打开命令行,输入

vue init mpvue/mpvue-quickstart firstapp

如下图所示

按照引导一步步按回车,需要注意的是,在碰到下图里面最后一项,即use EsLint to lint your code?时,选择n,这样就不会进入严格模式

引导完成后,将相关的依赖包导入项目

第二个命令会从node.js的node_module上将依赖包导入项目

2 启动项目

引导完成后,启动项目,在命令行输入

npm run dev

就进入开发模式,在开发模式下,修改了代码以后,会自动编译代码。注意:如果新增文件或者文件夹,不会生效!

3.查看项目路径

生成的项目路径如下图所示

我们写的源代码在src文件夹下,dist文件夹存放的是生成代码。dist文件夹下的代码跟微信小程序的原生代码是一致的,如下图

因此mpvue是通过将我们的代码转换成小程序的原生代码来实现功能的。接下来,我们就可以用vue的写法来编写微信小程序了,啦啦啦啦

    

    以上就是从0开始快速搭建小程序的全部步骤,不对之处欢迎指出,也希望有更多的小伙伴交流相关的代码知识。

 

© 著作权归作者所有

来试试水哈
粉丝 0
博文 8
码字总数 2861
作品 0
宁波
私信 提问
亲身体验小程序wepy和mpvue框架的区别

前言 小编公司也随潮流,把现有h5项目,重做成小程序项目,前期是用wepy搭建的,开始感觉还不错,随着加入的功能越来越多,感觉性能也越来越成问题。下面我们来详细介绍。开发文档 原生开发小...

向建峰_Javan
2018/08/15
0
0
mpvue微信小程序-仿网易云音乐

在尝试开发了一个微信小程序之,后发现有mpvue这么个东西可以来开发小程序以后就忍不住了,所以把小程序和我用vue开发过的版本结合修改以后,再尝试用mpvue+iview-weapp开发一个版本。 后台接...

折袖
2018/09/01
0
0
为什么选择MpVue进行小程序的开发

前言 mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程...

狗尾草的博客
2018/08/01
0
0
mpvue开发音频类小程序踩坑和建议

前言 这是我第一次开发小程序,开发的产品是音频类的,在大佬的建议下采用了,一周时间把功能都做出来,由于不太熟悉mpvue和微信小程序,足足用了一周时间来改bug才出来一个能用的版本,在这里...

fengxianqi
2019/03/11
0
0
分享几个微信小程序开发框架和工具

###【小程序开发框架】 1、官方框架MINA 小程序提供的开发框架为MINA框架,它类似于淘宝Weex、Vue框架。MINA框架通过封装微信客户端提供的文件系统、网络通信、任务管理、数据安全等基础功能...

codeGoogle
2018/04/18
0
0

没有更多内容

加载失败,请刷新页面

加载更多

什么是专用字节,虚拟字节,工作集?

我试图使用perfmon Windows实用程序来调试进程中的内存泄漏。 这就是perfmon解释这些术语的方式: Working Set是此过程的工作集的当前大小(以字节为单位)。 工作集是过程中线程最近触及的一...

技术盛宴
28分钟前
52
0
创建重复N次的单个项目的列表

我想创建一系列长度不一的列表。 每个列表将包含相同的元件e ,重复n次(其中n列表=长度)。 如何创建列表,而不为每个列表使用列表[e for number in xrange(n)] ? #1楼 在Python中创建重复...

javail
44分钟前
64
0
为什么图片反复压缩后普遍会变绿,而不是其他颜色?

作者:Lion Yang 链接:https://www.zhihu.com/question/29355920/answer/119088684 来源:知乎 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 业余版概要:安卓的...

shzwork
今天
47
0
每天AC系列(二):最接近的三数之和

1 题目 leetcode第16题,给定一个数组与一个目标数,找出数组中其中的三个数,这三个数的和要与目标数最接近。 2 暴力 按惯例先来一次O(n3)的暴力: int temp = nums[0]+nums[1]+nums[2];fo...

Blueeeeeee
今天
46
0
EFK教程(5) - ES集群开启用户认证

基于ES内置及自定义用户实现kibana和filebeat的认证 作者:“发颠的小狼”,欢迎转载 目录 ▪ 用途 ▪ 关闭服务 ▪ elasticsearch-修改elasticsearch.yml配置 ▪ elasticsearch-开启服务 ▪ ...

小慢哥
今天
58
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部