热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

微信小程序搭建(mpvue+mpvueweui+fly.js),多图

微信小程序框架:mpvueui框架:mpvue-weuirequest请求:fly.js1.项目初始化注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认

微信小程序框架:mpvue
ui框架:mpvue-weui
request请求:fly.js

1.项目初始化

注:如果没有安装node环境的请先去网上下载node.js下来安装,安装后默认安装npm了
接下到你要建项目的目录下打开cmd窗口(快捷方法:打开到目录后按住键盘shift,然后点击鼠标右键选择在此处打开powershell窗口即可)
npm默认从外网下载包,可能会比较慢,可以换成国内的下载地址,如下

npm set registry https://registry.npm.taobao.org/

这样就换成国内的淘宝镜像下载了

npm install -g vue-cli

全局安装vue-cli,vue的官方脚手架

npm install -g webpack

安装webpack打包管理

npm install -g vue

全局安装vue框架

安装完上面的必须组价后,我们就进去正题了,初始化mpvue框架

vue init mpvue/mpvue-quickstart my-project

《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

进入项目文件夹,并安装依赖包
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

项目跑起来
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

运行的原理
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

2.项目运行

引入项目,到微信小程序官网下载此开发工具
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

项目跑起来
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

3.引入mpvue-weui

接下来就引入mpvue-weui了
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

只要引入weui.css文件即可,其他都不用
mpvue-weui的网站

https://kuangpf.com/mpvue-weui/#/

接下来新建一页测试页面来试用weui
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

需要注意的标点符号,否则会报错
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

新增了一页要重新npm run dev,否则会找不到页面(终止的命令:ctrl+c)
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

重新运行后
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

进入到test页面,证明跳转是没问题的
引用一下weui的grid作为示例
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

结果
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

此功能界面的代码都是从上面网站上复制过来的,也可以从git上把mpvue-weui的项目clone下来,里面有更多详细的代码,可以直接复制下来用

4.引入fly请求

接下来request部分,fly.js也是上面推荐的,使用方法如下
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》

使用npm安装fly.js

npm install flyio

使用方法
《微信小程序搭建(mpvue+mpvue-weui+fly.js),多图》


推荐阅读
  • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • Node.js中子进程的创建与管理详解
    本文深入探讨了Node.js中如何使用child_process模块来创建和管理子进程,包括exec、spawn和fork三种方法的具体应用及其实现细节。 ... [详细]
  • 前端开发中的代码注释实践与规范
    本文探讨了前端开发过程中代码注释的重要性,不仅有助于个人清晰地回顾自己的编程思路,还能促进团队成员之间的有效沟通。文章将详细介绍HTML、CSS及JavaScript中的注释使用方法,并提出一套实用的注释规范。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 使用 VSCode 配置 launch.json 启动 Vue 项目时遇到问题的解决方案
    本文介绍了如何在 VSCode 中通过配置 launch.json 文件来启动 Vue 项目,并提供了当项目运行中途出现错误时的解决方法。 ... [详细]
  • 1:有如下一段程序:packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]
  • Node.js 入门指南(一)
    本文介绍了Node.js的安装步骤、如何创建第一个应用程序、NPM的基本使用以及处理回调函数的方法。通过实际操作示例,帮助初学者快速掌握Node.js的基础知识。 ... [详细]
  • 如何使用Ionic3框架创建首个混合开发应用
    混合开发是指结合原生(Native)与网页(Web)技术进行移动应用开发的方法。本文将详细介绍如何利用Ionic3这一流行的混合开发框架,从环境搭建到创建并运行首个应用的全过程。 ... [详细]
  • 使用 Angular CLI 快速构建 Web 前端项目
    本文详细介绍如何利用 Angular CLI 的常用命令来搭建和管理 Angular 项目,包括项目创建、依赖管理、组件生成等核心操作。 ... [详细]
  • 本文介绍了如何利用Webpack中的HtmlWebpackPlugin插件实现HTML文件的自动化生成,包括详细的安装步骤和配置方法。 ... [详细]
  • 本文探讨了Vue项目在Internet Explorer浏览器中遇到的问题及解决方案,包括axios请求失效和页面在低版本浏览器中显示为空白的问题。 ... [详细]
  • 腾讯视频 Node.js 服务国庆阅兵直播高并发实战
    本文分享了腾讯视频团队在国庆阅兵直播项目中,如何利用Node.js服务成功应对2.38亿次观看的高并发挑战。文章将从服务架构、可用性保障、缓存策略、日志与告警等方面详细解析。 ... [详细]
author-avatar
拍友2502887597
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有