为了账号安全,请及时绑定邮箱和手机立即绑定

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

标签:
Html5

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

image

3:安装淘宝npm镜像

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

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

安装成功之后显示如下

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

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

输入,vue 查看是否安装完成
图片.png

以上准备完成

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

1:创建项目的命令

vue init mpvue/mpvue-quickstart myproject

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

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

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

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

     cd myproject
     npm install
     npm run dev

####6:打开微信开发者工具


导入myproject项目

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

写完之后我发现:原来已经写过一遍了,才会如此这般的顺利
基于mpvue的小程序项目搭建的步骤一:https://www.jianshu.com/p/692b2e49f33b

点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
Web前端工程师
手记
粉丝
1.4万
获赞与收藏
118

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消