基于mpvue框架的小程序项目搭建入门教程一

5640239-12dc46d2eb9de4d1.png

​

1：安装node

端开发框架和环境都是需要 Node.js ，先安装node.js开发环境，vue的运行是要依赖于node的npm的管理工具来实现，下载https://nodejs.org/en/，安装完成之后，打开cmd开始输入命令。（我用的是win10系统，所以需要管理员权限，右键点击以管理员身份运行cmd），不然会出现很多报错。

5640239-f49d5024e96b3fe7.png

2：查看node的版本号

下载好node之后，以管理员身份打开cmd管理工具，，输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功。

输入命令： node -v

5640239-813e249f72f4d172.png

 image    

3：安装淘宝npm镜像

进入D盘（当然可以根据你自己的选择来安装路径）全局安装镜像。由于npm是国外的，使用起来比较慢，我们这里使用淘宝的cnpm镜像来安装vue.

淘宝的cnpm命令管理工具可以代替默认的npm管理工具。

输入命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

安装成功之后显示如下

5640239-d5d3317eea5f4a1d.png

 image    

4： 安装全局vue-cli脚手架

淘宝镜像安装成功之后，我们就可以全局vue-cli脚手架，输入命令：cnpm install --global vue-cli 回车；验证是否安装成功，在命令输入vue，出来vue的信息，及说明安装成功；

输入命令：cnpm install --global vue-cli
//vue3.0版本出来之后，也要在环境里面进行更新：
npm install -g @vue/cli-init

5640239-28927b05fe6431af.png

vue3.0版本出来之后，也要在环境里面进行更新：

5640239-36df24ce1416339c.png

输入，vue 查看是否安装完成

5640239-f2762437e7d0fd3f.png

 图片.png    

以上准备完成

5：创建第一个基于mpvue的小程序项目代码

1：创建项目的命令

vue init mpvue/mpvue-quickstart myproject

对于这些踢提示，新手的话可以一路回车键进行到底

5640239-fa569fb7fd872aa5.png

打开d盘，就可以看到新建的项目了

5640239-ca477c6709befc2f.png

这是命令创建的默认生成的项目目录结构

5640239-78675e791b2c4ad1.png

2：进入新建的项目目录里面，安装相关依赖，安装时间可能有些长，也可以cnpm install安装，然后运行

     cd myproject
     npm install
     npm run dev

5640239-f6d762df527efd2e.png

6：打开微信开发者工具

5640239-b34bdcf5d167fefa.png

导入myproject项目

5640239-d3dce994a3356e25.png

我们可以看见，一切准备就绪，这样所有的环境搭建好了，就可以进行下一步了。

写完之后我发现：原来已经写过一遍了，才会如此这般的顺利

基于mpvue的小程序项目搭建的步骤一：https://cloud.tencent.com/developer/article/1140204

原文作者：祈澈菇凉 技术博客：https://www.jianshu.com/u/05f416aefbe1 90后前端妹子，爱编程，爱运营，爱折腾。对于博客上面有不会的问题