第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小程序项目
之后就可以用外部代码工具编写代码,微信开发者工具用模拟器查看写好的页面即可: