点击观看视频 ↓↓↓
 

  
 
 搭建开发环境、创建mpvue项目https://www.zhihu.com/video/1195024159292559360
 
课程文字版
 
1、安装node.js环境
 
打开node.js官网http://nodejs.cn/download/根据自己的电脑版本选择安装包
 
安装完成后，可以命令行工具中输入 node -v 和 npm -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）打开微信开发者工具，点击菜单栏的项目--导入项目
 

 

  
 
 
（2）选择truth_hold项目所在的目录
 

 

  
 
 
（3）导入项目后的界面
 

 

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

 

  
 
 

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

  
 

刚刚开始接触小程序，准备采用mpvue框架进行学习开发，接下来就说说如何准备一个空的mpvue吧，像极了用脚手架创建一个空的vue一样。
 
具体操作以及详细api我们可以点开mpvue官网查看
 
第一步：找好存储位置创建一个空mpvue文件夹
 例如我想在D:\myDemo创建，那么在对应位置打开我们俗称的黑色小窗口：
 
 
 输入vue init mpvue/mpvue-quickstart my-project ，然后按回车就好。（my-project是文件名，你自定义）
 
 然后就一路回车就好：
 
 这时我们就创建一个基于 mpvue-quickstart 模板的新项目，之后就是安装依赖：
 先cd my-project进入该文件，然后输入npm install下载依赖
 
 安装完之前的所有东西后，最后想运行？输入npm run dev
 
 呃？和想象的不一样？没有出现想vue一样的链接打开浏览器预览，其实小程序是不能在浏览器预览的，所以输入npm run dev只是会打包生成dist文件夹
 
 那我们要如何运行预览呢？这时就要借助微信开发者工具了，也是在官网下载即可
 
在开发者工具选择小程序打开刚创建的文件夹，打开模拟器就可以看到预览效果了。
 

一、安装cli-init.
 
当我们直接搭建脚手架时，如果没有安装cli-init会报错。因此，我们首先需要安装cli-init。使用如下命令可以直接安装。
 
npm install -g @vue/cli-init
 
二、搭建脚手架
 
1、基于mpvue-quickstart模板创建新项目
 
vue init mpvue/mpvue-quickstart my-project
 
在输入命令后，我们需要在？行按下回车，表示同意。
 
 
2、安装依赖和运行
 
cd my-project
npm install
npm run dev
 
注：dev默认微信小程序
 之后我们在WebStorm中进行修改源码，在微信开发者工具中进行调试
 WebStorm链接：https://pan.baidu.com/s/1LSTruuV3NJ3ReMeckQSSpw
 提取码：7uun
 微信开发者工具链接：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

 
vue项目转小程序-mpvue项目创建
 
前言
创建mpvue项目
 

 
前言
 
这次遇到了要拿很久之前用vue写的移动端项目，改成小程序的要求。因为本人只会用原生的开发微信小程序，所以这次也是学习了一下mpvue，现在来总结一下。
 
创建mpvue项目
 
mpvue是美团开源的项目，先贴上官方地址：http://mpvue.com/
 创建项目前先检查一下node和npm是否安装好，然后开始安装vue-cli脚手架，注意，这要2.x版本的，3.x版本的创建不了。
 
$ npm install --global vue-cli@2.9
 
安装完之后，初始化一个基于mpvue-quickstart模板的新项目
 
$ vue init mpvue/mpvue-quickstart my-project
 
没什么特别要求的话，基本上是一路回车就好
 创建完之后就是下载依赖，启动项目拉
 
$ cd my-project
$ npm install
$ npm run dev
 
项目启动成功之后，目录会多了一个dist文件夹，就是把vue代码转成了小程序代码，把整个项目放到微信开发者工具就可以预览拉。
 
项目创建的时候一般都有px2rpx-loader的，所以写项目的时候可以直接用px，然后编译的时候会转成rpx。
 众所周知，vue项目是用的vue-router，怎么在mpvue中用vue-router和引入第三方ui组件呢，请看小编的其他文章！