第19课 微信小程序安装使用mpvue脚手架:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603150756625.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
详情地址: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
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603150416236.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
第一步(全局安装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脚手架)
以下图片表示安装成功:
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019060315060477.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
第二步 (创建项目模板):
创建项目:需要等待下载项目的依赖包
自定义存放项目的路径:我将此项目存放在 C:\Users\mi\Desktop\微信小程序>
(项目名称别有大写)
在C:\Users\mi\Desktop\微信小程序>中创建一个 mpvue-quickstart 模板的新项目my-project:
vue init mpvue/mpvue-quickstart my-project (使用mpvue-quickstart 模板创建名为my-project的项目)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603152207243.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/2019060315243617.png)
第三步 (安装项目依赖):
npm my-project (进入项目文件夹)
npm install (安装项目所需依赖)
![-](https://img-blog.csdnimg.cn/20190603153319529.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
第四步 (生成小程序代码):
npm run build (在项目目录下)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603153916594.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603154003209.png)
第五步 (导入小程序项目):
打开微信开发者工具引入my-project/dist/wx小程序项目
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603174925242.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)
之后就可以用外部代码工具编写代码,微信开发者工具用模拟器查看写好的页面即可:
![在这里插入图片描述](https://img-blog.csdnimg.cn/20190603174943323.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxNjE0OTI4,size_16,color_FFFFFF,t_70)