Windows下微信小程序搭建mpvue项目过程(node.js下载安装,vue-cli脚手架安装)

微信小程序搭建mpvue项目过程

第一步:安装Node环境

下载node.js安装包

在这里插入图片描述

  • 下载地址:node.js中文网
    在这里插入图片描述
  • 根据电脑系统选择安装包:这里我选择的windows 64位安装包
  • 安装过程:全程next就完事
    在这里插入图片描述
    在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述

打开cmd检查是否安装完成(Win+R或者直接搜索打开)

  • 如果版本号可以显示出来说明安装成功
    如果版本号可以显示出来说明安装成功
  • 国外镜像比较慢,所以把镜像地址换成国内的网址
    在这里插入图片描述

安装vue-cli脚手架(vue-cli是vue框架的脚手架)并创建项目

  • cmd下输入 npm install vue-cli -g下载安装脚手架
    在这里插入图片描述
  • 安装完成vue-cli后,输入vue查看vue是否安装成功,vue list是查看vue现有的组件,webpack是常用的搭建项目的组件
    在这里插入图片描述
  • 继续在cmd下输入vue init mpvue/mpvue-quickstart truth_hold 然后会出现以下页面
    在这里插入图片描述
  • 在Project name后敲击回车(Enter)进入下一步
    在这里插入图片描述
  • 将wx小程序id复制到命令行然后敲击回车
    在这里插入图片描述
  • 继续一直敲击回车(一直到出现下列界面)表示项目创建完成
    在这里插入图片描述
  • 进入到项目文件夹下并且安装项目配置文件
    在这里插入图片描述
  • 安装成功启动项目,输入 npm run dev
    在这里插入图片描述

将项目导入微信开发者工具

  • 打开开发者工具,菜单栏下的导入项目,直接从创建项目处导入也可以
    在这里插入图片描述
  • 选择该文件夹然后导入即可
    在这里插入图片描述
  • 导入成功后将出现以下界面,表示项目搭建完成
    在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/weixin_43792791/article/details/106439725