第19课微信小程序安装使用mpvue脚手架

2024-06-30 07:12:42

第19课微信小程序安装使用mpvue脚手架：

详情地址：http://mpvue.com/mpvue/quickstart/

安装前检查环境：

安装脚手架之前需要电脑已安装node与npm
首先按住 shift + 鼠标右键 → (按下)在此处打开命令行窗口进入命令行窗口
或者 win + R 键输入cmd 进入命令行窗口
输入：node -v 与 npm -v 查看有无安装node与npm，没有则需要安装：以下证明已安装
若没安装以下是博友安装方法：
https://blog.csdn.net/qq_33362864/article/details/80431162

第一步（全局安装vue-cli）：

全局安装vue-cli，vue-cli 是vue.js的脚手架，用于自动生成vue.js+webpack的项目模板，分为vue init webpack-simple 项目名和vue init webpack 项目名两种下面我们会使用webpack包演示
在命令行窗口输入 npm install vue-cli -g 按下回车：

npm install vue-cli -g （g表示全局安装vue-cli脚手架）

以下图片表示安装成功：

第二步（创建项目模板）：

创建项目：需要等待下载项目的依赖包
自定义存放项目的路径：我将此项目存放在 C:\Users\mi\Desktop\微信小程序>
（项目名称别有大写）
在C:\Users\mi\Desktop\微信小程序>中创建一个 mpvue-quickstart 模板的新项目my-project:

vue init mpvue/mpvue-quickstart my-project （使用mpvue-quickstart 模板创建名为my-project的项目）

第三步（安装项目依赖）：

npm my-project （进入项目文件夹）
npm install （安装项目所需依赖）

第四步（生成小程序代码）：

npm run build （在项目目录下）

第五步（导入小程序项目）：

打开微信开发者工具引入my-project/dist/wx小程序项目

之后就可以用外部代码工具编写代码，微信开发者工具用模拟器查看写好的页面即可：

第19课微信小程序安装使用mpvue脚手架相关推荐

论微信小程序安装SSL证书的重要性
微信小程序相信大家都很熟悉,小程序是一种不需要下载安装即可使用的应用,即搜即用.用完就走,无法保证其安全性.SSL证书是数字证书的一种,遵守SSL安全套接层协议,部署SSL证书可实现网站身份验证和数据 ...
第7课微信小程序实现图片搜索器案例：
第7课微信小程序实现图片搜索器案例: 效果图如下: 手机运行效果: 来我们来看看代码的全局样式: 首先在app.json内的pages把需要的index1.index2页面注册之后我们只需写ind ...
第21课微信小程序视频标签显示弹幕
第21课微信小程序视频标签显示弹幕效果图如下: wxml代码如下: <videosrc="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideo ...
微信小程序安装与开发步骤
微信小程序安装与开发步骤 1.登陆 :微信专有开发工具安装地址如图:我选择的是稳定版,64位安装完成后如图: 图 2 . 2.新建第一个小程序 2.1 申请 AppID 登陆https://mp ...
基于spring-boot的社区社交微信小程序，适合做脚手架、二次开发
代码地址如下: http://www.demodashi.com/demo/13867.html 1 概述笔者做的一个后端基于spring-boot的社区社交微信小程序,可以作为开发的脚手架,开发速 ...
青提WiFi微信小程序安装教程常见错误解析
背景: 微信小程序范例:大雄wifi 大家可以先去体验一下,看是否是自己想要的- 共享WIFI项目全国可做: 扫码一键连WIFI我想大家都不陌生了,就是给商家贴一张码,顾客进门想用WIFI扫码就能连接 ...
关于微信小程序安装npm的过程，从下载到小程序内部安装完成
1.先从官网下载nodejs 网站为Node.js (nodejs.org),选择左边第一个2 然后一直next,选默认就行选择自己喜欢的路径我的是D:\nodejs-v18.12.1 3 下载完成 ...
EAUML日拱一卒-微信小程序实战：位置闹铃 (19)-发布微信小程序
小程序的功能实现之后,经过一段时间地测试,接下来就是发布了. 在开发工具的上面偏右的位置,有一个[上传]按钮,按下它就可以将小程序上传到微信小程序公众号. 登录自己的小程序帐号,进入开发管理页面. 画 ...
微信小程序开发之mpVue
1 mpVue是什么 1.1 简介美团工程师推出的基于Vue.js封装的用于开发小程序的框架融合了原生小程序和Vue.js的特点可完全组件化开发 1.2 特点组件化开发完成的Vue.js开发 ...

最新文章

热门文章