基于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项目

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

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

目录
打赏
0
0
0
0
10
分享
相关文章
小程序常见的UI框架
小程序常见的UI框架
413 60
开源的微信小程序框架
【8月更文挑战第22天】开源的微信小程序框架
338 65
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
290 2
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
113 0
微信小程序开发入门教程-小程序账号注册及开通
微信小程序开发入门教程-小程序账号注册及开通
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
轻量、可靠的小程序 UI 框架 -- Vant Weapp的安装和使用
207 1
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
基于SSM框架的童装购买平台微信小程序+vue.js附带文章和源代码设计说明文档ppt
75 1
在使用微信小程序开发中用vant2框架中的Uploader 文件上传wx.uploadFile无反应和使用多图上传
网上有的说是bind:after-read="afterRead"的命名问题不支持-,但是我这儿执行了console.log("file",file);证明函数运行了。后来发现是multiple="true"原因开启了多图上传,如果是多图上传的话file就是数组了
543 2
微信小程序MINA框架
微信小程序MINA框架
371 0

热门文章

最新文章

AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等