基于mpvue的小程序项目搭建的步骤

简介: 基于mpvue的小程序项目搭建的步骤

mpvue 是美团开源的一套语法与vue.js一致的、快速开发小程序的前端框架,按官网说可以达到小程序与H5界面使用一套代码。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。如果想将 H5 项目改造为小程序,或开发小程序后希望将其转换为 H5,mpvue 将是十分契合的一种解决方案。

使用Vue开发微信小程序:mpvue框架。端开发框架和环境都是需要 Node.js ,先安装node.js开发环境,下载https://nodejs.org/en/,安装完成之后,打开cmd开始输入命令。(我用的是win10系统,所以需要管理员权限,右键点击以管理员身份运行cmd),不然会出现很多报错。

步骤1. 检查下 Node.js 是否安装成功

$ node -v

我的node是安装在d盘,所以先切入进D盘,在执行node -v命令,结果如下,出现版本号则表示安装成功。

步骤2:检查npm版本

$ npm -v

步骤3: 安装淘宝镜像

$ npm set registry https://registry.npm.taobao.org/

由于npm是国外的,使用起来比较慢,我们这里使用淘宝的cnpm镜像来安装vue.

步骤4: 全局安装 vue-cli

$ npm install --global vue-cli

一般是要 sudo 权限的(打开cmd时要以管理员的身份,不然就会报错

注意:很多人在这一步安装报错了,原因是要权限哦

例如:

网上的解决方案用通过快捷键win+ r打开cmd,这样木有用,会被误导,在win8或者win10下,win+R不是以管理员身份来运行的。在开始菜单中选择command以管理员身份运行即可。

打开管理员运行之后,全局安装成功提示如下:

步骤5:创建一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

至于项目名称,作者,使用何种框架等提问信息,新手一路回车选择默认即可。

打开d盘,查看创建生成的目录my-project

步骤6:安装my-project项目所需要的依赖

$ cd my-project
$ npm install
$ npm run dev

1:执行cd my-project命令,进入项目

2:执行npm install命令之后,本地多了一个node_moudules文件夹


3:执行npm run dev,运行成功


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


以上,Vue开发环境已经搭建好,接下来打开微信开发者工具,,调试开发我们的框架 mpvue,依次填写需要的信息,微信开发者工具环境搭建详见教程:https://www.jianshu.com/p/0ff8c3b2f59f


填写之后跳转到编辑工具页面,mpvue框架项目已经跑起来了,完美,get到技能了吗?投入开发即可

相关文章
|
开发框架 小程序 JavaScript
基于mpvue框架的小程序项目搭建入门教程一
基于mpvue框架的小程序项目搭建入门教程一
149 0
|
小程序 JavaScript 开发工具
如何运行github上的mpvue小程序开源项目
如何运行github上的mpvue小程序开源项目
112 0
|
小程序 JavaScript 前端开发
小程序云开发实战二:小程序云开发云函数安装依赖步骤
小程序云开发实战二:小程序云开发云函数安装依赖步骤
170 0
|
2月前
|
小程序 前端开发
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
本文介绍了在微信小程序中使用Vant Weapp组件库时,如何将外部的icon作为图标引入的步骤。包括在项目中创建静态资源文件夹、在iconfont官网添加图标并生成在线链接、下载iconfont代码并解压到小程序目录中、修改iconfont.wxss文件将本地链接替换为在线链接、在全局样式文件中引入iconfont.wxss样式,以及在页面中使用图标的方法。
微信小程序中 vant weapp 使用外部的icon作为图标的步骤
|
4月前
|
小程序 API 数据库
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
【微信小程序-原生开发】实用教程09 - 可滚动选项,动态列表-步骤条(含事件传参),动态详情(含微信云查询单条数据 doc)
85 0
|
6月前
|
移动开发 小程序 前端开发
使用uni-app开发(h5、小程序、app)步骤
使用uni-app开发(h5、小程序、app)步骤
|
6月前
|
小程序 API
微信小程序飞机大战游戏步骤及代码
微信小程序飞机大战游戏步骤及代码
227 0
|
6月前
|
存储 小程序 开发者
微信小程序猜拳游戏步骤及代码
微信小程序猜拳游戏步骤及代码
148 0
|
6月前
|
存储 小程序 开发者
开发微信小程序模拟聊天步骤及代码
开发微信小程序模拟聊天步骤及代码
173 0
|
6月前
|
小程序 开发者
微信小程序斗地主完整代码及步骤
微信小程序斗地主完整代码及步骤
481 0

热门文章

最新文章

下一篇
无影云桌面