mpvue返回上一个页面_微信小程序全栈开发课程【视频版】1.4 搭建开发环境、创建mpvue项目

da96fb620bf654d555fde3d0a50b113f.png

点击观看视频 ↓↓↓

756baeb7f4138ade8c790169228b909b.png
搭建开发环境、创建mpvue项目https://www.zhihu.com/video/1195024159292559360

课程文字版

1、安装node.js环境

打开node.js官网http://nodejs.cn/download/根据自己的电脑版本选择安装包

安装完成后,可以命令行工具中输入 node -vnpm -v,如果能显示出版本号,就说明安装成功。

~$ node -v
v11.7.0

~$ npm -v
node.js是什么?
Node.js是一个JavaScript的运行环境,它让 JavaScript 成为与PHP、Python、Perl、Ruby 等服务端语言平起平坐的脚本语言。
npm是什么?
Node Package Manager翻译成中文就是node包管理器,安装node.js运行环境时会自动安装npm,后面我们通过npm来下载安装node相关的软件包


2、将npm的源换成国内源

由于npm的源在国外,国内用户下载软件包会比较慢,所以我们将npm的源换成国内的。

#运行成功,不会返回任何信息
~$ npm set registry https://registry.npm.taobao.org/

3、安装vue-cli脚手架

~$ sudo npm install -g vue-cli

//安装成功后,系统返回的信息
+ vue-cli@2.9.6
added 9 packages from 3 contributors, removed 3 packages and updated 102 packages in 22.949s
   ╭────────────────────────────────────────────────────────────────╮
   │                                                                │
   │       New minor version of npm available! 6.5.0 → 6.11.1       │
   │   Changelog: https://github.com/npm/cli/releases/tag/v6.11.1   │
   │               Run npm install -g npm to update!                │
   │                                                                │
   ╰────────────────────────────────────────────────────────────────╯

4、创建mpvue项目

(1)创建名为truth_hold的mpvue项目

我们不需要额外安装mpvue的工具,直接用vue官方的工具就可以了~运行vue init mpvue/mpvue-quickstart truth_hold创建mpvue项目,其中truth_hold是项目名称

~/WeChatProjects$ vue init mpvue/mpvue-quickstart truth_hold

//系统返回消息
? Project name truth_hold   // 回车
? wxmp appid wx1537a4db01c83194 //这里需要写上你自己的Appid
? Project description A Mpvue project   // 回车
? Author xzn <[xzn@stonescloud.com](mailto:xzn@stonescloud.com)>   // 回车
? Vue build runtime   // 一直回车
? Use Vuex? Yes   //Y
? Use ESLint to lint your code? Yes  //Y
? 小程序测试,敬请关注最新微信开发者工具的“测试报告”功能

(2)打开truth_hold文件,安装配置文件并启动

//打开truth_hold文件
~/WeChatProjects$ cd truth_hold/

//安装配置文件
~/WeChatProjects/truth_hold$ npm install

//启动项目
~/WeChatProjects/truth_hold$ npm run dev
//出现下面信息说明启动成功了
DONE  Compiled successfully in 3913ms

5、导入项目

将刚刚创建的truth_hold项目文件导入到微信开发者工具中

(1)打开微信开发者工具,点击菜单栏的项目--导入项目

6a49977425551fdeb430944893f868ba.png

(2)选择truth_hold项目所在的目录

9b5e7d776f3257547f6f683aa4581781.png

(3)导入项目后的界面

2a73d94fad7e924785c74f4a9379d528.png

6、mpvue小程序框架介绍

在实际项目开发过程中,只需要操作src文件,系统会自动在dist文件中为我们生成原生小程序的目录结构

09f6bc6a4c75c5c652d6495489be5794.png
关注【猫宁一】公众号回复【课件】领取课程PPT和小程序源码
B站可以1.5倍加速观看视频课程
微信小程序实战开发课程【提供源码】实际上线项目 mpvue+koa2_哔哩哔哩 (゜-゜)つロ 干杯~-bilibili​www.bilibili.com
b4e7c45a6cb711ddd1bc34a9ad8d07be.png
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值