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

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

1:安装node

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

2:查看node的版本号

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

输入命令: node -v

3:安装淘宝npm镜像

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

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

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

安装成功之后显示如下

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

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

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

以上准备完成

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

1:创建项目的命令

vue init mpvue/mpvue-quickstart myproject

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

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

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

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

     cd myproject
     npm install
     npm run dev
6:打开微信开发者工具

导入myproject项目

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

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

相关文章
|
2月前
|
小程序 前端开发 数据可视化
微信小程序云开发入门教程-全局文件介绍
微信小程序云开发入门教程-全局文件介绍
|
5月前
|
人工智能 移动开发 小程序
【Java】医院智能导诊小程序源码,springboot框架
【Java】医院智能导诊小程序源码,springboot框架
70 0
|
6月前
|
开发框架 小程序 前端开发
带你了解小程序的框架之谜
带你了解小程序的框架之谜
|
3月前
|
JSON 小程序 前端开发
微信小程序框架(五)-全面详解(学习总结---从入门到深化)
微信小程序框架(五)-全面详解(学习总结---从入门到深化)
35 0
|
3月前
|
存储 缓存 JSON
微信小程序框架(四)-全面详解(学习总结---从入门到深化)
微信小程序框架(四)-全面详解(学习总结---从入门到深化)
152 0
|
2月前
|
小程序 前端开发 程序员
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
|
2月前
|
小程序 JavaScript
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
45 2
|
2月前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
微信小程序MINA框架
62 0
|
2月前
|
小程序 数据可视化 前端开发
微信小程序开发入门教程-文本组件介绍
微信小程序开发入门教程-文本组件介绍
|
2月前
|
存储 小程序 数据库
微信小程序云开发入门教程-服务开通
微信小程序云开发入门教程-服务开通