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文件夹!

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

 


免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2025 CODEPRJ.COM