mpvue上手教程

mpvue官网上面已经有了详细的步骤，把每一个步骤截图及输出结果作个笔记，供各位看官参考参考~

1.全局安装 vue-cli

$ npm install --global vue-cli

若是你已经设置好了淘宝镜像，你也能够直接执行下面的语句：

$ cnpm install --global vue-cli

返回结果以下图：

 

2.建立一个基于 mpvue-quickstart 模板的新项目

$ vue init mpvue/mpvue-quickstart my-project

返回结果以下图：

 

 能够看到 生成了一个 my-project 的文件夹：

 

3.安装依赖

$ cd my-project
$ npm install

 返回结果以下图：

 

能够看到my-project文件夹目录结构以下：

 

 

4.启动构建

$ npm run dev

 执行完结果以下：

 

此时咱们能够看到本地多了个 dist 目录，这个目录里就是生成的小程序相关代码。

这一步当心会有个坑，就是返回结果提示你 No module ***，缘由是npm和node的版本太低了，升级方案能够查看windows下npm和node如何升级这篇文章。

 

5.导入到微信小程序开发工具中

注意：是将整个my-project导入进去，而不是单个的dist文件夹！

导入进去就能看到下面的这个界面了：