微信小程序——基于vue的框架mpvue

上网导航 2023-10-19 192 0条评论
摘要: 起手式:必要的开发环境工欲善其事必先利其器!在开始写代码之前,请确保你已经安装了必要的开发环境和工具,以下是几个必需的和可选的工具:1)node.js现在...

起手式:必要的开发环境

工欲善其事必先利其器!在开始写代码之前,请确保你已经安装了必要的开发环境和工具,以下是几个必需的和可选的工具:

1)node.js

现在,前端工具链基本都依赖Node.js,所以请率先安装它吧。

下载地址:

安装完成后,打开你的命令行输入如下命令,验证安装是否成功:

node --version

//成功的话输出类似:v10.6.0

npm --version

//成功的话输出类似:6.1.0

然后,我们需要执行以下命令,将npm的下载源切换到国内淘宝的镜像,以提高下载时的速度和成功率:

npm set registry

关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端,Java,微信小程序,Python等资源,让我们一起学前端。

2)vue-cli

vue-cli是一个vue专用的项目脚手架工具,可以用于方便的创建vue项目骨架代码,包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli,在命令行输入如下命令:

npm install vue-cli -g

安装完成后,输入如下命令进行验证:

vue

// 成功的话会输出如下内容:

// Usage: vue [options]

//

// Options:

//

// -V, --version output the version number

// -h, --help output usage information

//

// Commands:

//

// init generate a new project from a template

// list list available official templates

// build prototype a new project

// create (for v3 warning only)

// help [cmd] display help for [cmd]

3)微信开发者工具

这个工具是开发、调试和模拟运行微信小程序的最核心的工具了,所以必须安装。

下载地址:

4)Visual Studio Code + Vetur

Visual Studio Code(简称vscode)是现在非常流行的一个轻量级代码编辑器,拥有非常多好用的辅助开发插件,在我的文章中我都会使用这个编辑器来编辑代码。当然,好用的代码编辑器有很多,比如Sublime Text、WebStorm等,同样可以达到我们的开发目的,你也尽管用你自己最喜欢的代码编辑器来写代码就行了。

下载地址:

安装完vscode后,在它的插件管理器中,查找Vetur并安装,然后重启一下vscode后,插件即生效:

微信小程序——基于vue的框架mpvue

安装Vetur插件

Vetur是一款可以提供Vue语法高亮、语法检查和代码快捷输入等功能的插件,可以为我们的开发过程提供很多便利。

创建第一个基于mpvue的小程序项目代码

花了点时间装好了必要的开发环境,下面我们就来创建我们的第一个mpvue小程序项目。这里将用到前面已安装的vue-cli:

vue init mpvue/mpvue-quickstart firstapp

命令行将一步步的引导我们选择或填写项目的配置信息,如果你还不太明白这些内容的含义,可以先直接全部按回车:

? Project name firstapp

? wxmp appid touristappid

? Project description A Mpvue project

? Author kevinzhang kevin.zhang@moredist.com

? Vue build runtime

? Use Vuex? Yes

? Use ESLint to lint your code? Yes

? Pick an ESLint preset Standard

? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能

vue-cli · Generated “firstapp”.

To get started:

 cd firstapp
 npm install
 npm run dev

Documentation can be found at

这个过程vue-cli主要是先从远程的代码仓库中下载了一份注册名为mpvue/mpvue-quickstart的模板代码,然后根据开发者在命令行提示过程中输入的信息,生成一份经过配置后的代码。

这份代码暂时还运行不起来,因为它还缺少依赖的库,我们需要执行以下命令进行依赖库的安装:

cd firstapp

npm install

经过几分钟的下载安装,依赖库安装到了firstapp目录下,你可以看到该目录下多出了一个node_modules目录。

然后,执行命令让这个代码运行起来,进入开发模式:

npm run dev

成功运行后,这个项目代码就进入开发模式,一旦有源代码发生修改,就会触发自动编译。因为mpvue使用的是Vue + HTML Web的开发方式开发小程序,它最终还是需要被转换成小程序的代码才可以在小程序环境运行,所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下:

微信小程序——基于vue的框架mpvue

运行并查看结果

上面的步骤中,我们开启开发模式后,其实并不能看到小程序的执行效果,要真正看小程序的运行界面的话,我们还是要借助微信开发者工具。

打开微信开发者工具,选择新增项目:

微信小程序——基于vue的框架mpvue

项目目录选择指向firstapp目录:

微信小程序——基于vue的框架mpvue

点击“确定”按钮,进入小程序开发主界面,在左边的小程序模拟器中就能看到firstapp小程序的执行结果了:

微信小程序——基于vue的框架mpvue

【提醒】记得在微信开发者工具的菜单》设置 》编辑设置 中,将“保存时自动编译小程序”勾选上,这样当mpvue的代码自动编译完成后,模拟器才会自动刷新界面。

微信小程序——基于vue的框架mpvue

文章版权及转载声明:

作者:上网导航本文地址:https://www.90xe.com/post/6206.html发布于 2023-10-19
文章转载或复制请以超链接形式并注明出处技术导航

分享到:

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏