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

使用vue.js开发小程序

刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比。话不多说,我们现在感受一下如何使用mpvue开发小程序。(以下内容参照mpvue文档完成)、开发环境noden

刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比。

使用vue.js开发小程序

话不多说,我们现在感受一下如何使用mpvue开发小程序。(以下内容参照mpvue文档完成)、

开发环境
  • node

  • npm:这里建议安装淘宝镜像

  • 微信开发者工具

操作顺序

首先下载vue-cli

npm install -g vue-cli

使用vue-cli创建一个mpvue项目

vue init mpvue/mpvue-quickstart my-project

使用vue.js开发小程序

创建的过程中会有一些设置,包括项目名称,作者等等内容,一路回车到底就行。

然后我们进入到项目目录,安装项目依赖

cd my-projectnpm install

使用vue.js开发小程序

最后,运行走起~

npm run dev

使用vue.js开发小程序

这时候项目就跑起来了,当前项目的目录结构如下所示:

使用vue.js开发小程序

有vue开发经验的朋友对这个目录肯定不会陌生了,这里就不多说了。

接下来我们要使用微信开发者工具运行这个小程序。

在微信开发者工具中新建项目

使用vue.js开发小程序

其中项目目录选择vue项目中的dist目录。

appID填写自己小程序的appID,没有的话可以点选体验“小程序”,只影响是否可以真机调试。

最后点击【确定】按钮,就可以看到实例代码的效果了,我们也可以扫码在真机中调试。

 

大家可以看到,这是官方为我们提供的一个计数器的效果,点击+,数字会加1,点击-,数字会减1。我们可以在此基础上简单地修改代码。

使用vue.js开发小程序

我们修改src>page>count>store.js中的数值,就能改变计数器添加和减少的数量,修改完成之后,直接保存,项目会自动编译,然后我们就可以在微信开发者工具中查看小程序的效果了。

写在最后

我并不是一个小程序开发者,但是我能感受到腾讯对小程序的投入和重视越来越大,各大公司对小程序的动作也越来越多,我想2018年小程序绝对不会像2017年那样平淡。

使用vue.js开发小程序


推荐阅读
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 嵌入式开发环境搭建与文件传输指南
    本文详细介绍了如何为嵌入式应用开发搭建必要的软硬件环境,并提供了通过串口和网线两种方式将文件传输到开发板的具体步骤。适合Linux开发初学者参考。 ... [详细]
  • 深入理解Vue.js:从入门到精通
    本文详细介绍了Vue.js的基础知识、安装方法、核心概念及实战案例,帮助开发者全面掌握这一流行的前端框架。 ... [详细]
  • 使用JS、HTML5和C3创建自定义弹出窗口
    本文介绍如何结合JavaScript、HTML5和C3.js来实现一个功能丰富的自定义弹出窗口。通过具体的代码示例,详细讲解了实现过程中的关键步骤和技术要点。 ... [详细]
  • Vue 开发与调试工具指南
    本文介绍了如何使用 Vue 调试工具,包括克隆仓库、安装依赖包、构建项目以及在 Chrome 浏览器中加载扩展的详细步骤。 ... [详细]
  • 本文探讨了2019年前端技术的发展趋势,包括工具化、配置化和泛前端化等方面,并提供了详细的学习路线和职业规划建议。 ... [详细]
  • Vue 项目构建与部署指南
    本文将指导您完成Vue项目的构建和部署过程,包括环境搭建、项目初始化及配置、以及最终的部署步骤。 ... [详细]
  • 本文详细探讨了Xshell6评估版到期后无法使用的常见问题,并提供了有效的解决方案,包括如何合法购买授权以继续使用。 ... [详细]
  • 本文探讨了前端包管理器的核心功能,包括注册机制、文件存储、上传下载、以及依赖分析等关键特性,并介绍了几种流行的前端包管理工具。 ... [详细]
  • 使用 Angular CLI 快速构建 Web 前端项目
    本文详细介绍如何利用 Angular CLI 的常用命令来搭建和管理 Angular 项目,包括项目创建、依赖管理、组件生成等核心操作。 ... [详细]
  • Vue项目中应用骨架屏实践
    在当前开发的项目中,由于登录过程涉及多次重定向,导致用户体验不佳。为了改善这一状况,本文介绍了如何使用vue-skeleton-webpack-plugin插件在Vue项目中实现骨架屏,以减少用户感受到的白屏时间。 ... [详细]
  • 本文探讨了Vue项目在Internet Explorer浏览器中遇到的问题及解决方案,包括axios请求失效和页面在低版本浏览器中显示为空白的问题。 ... [详细]
  • 前言ReactNative是目前最流行的跨平台框架,并且是Facebook团队开源的项目。架构及实现技术上都有很高的研究价值,本系列就来分析一下Reac ... [详细]
  • 案例1:在子组件中两个按钮1和-1,点击后修改count整个操作的过程还是在子组件中完成,但是之后的展示交给父组件这样,我 ... [详细]
  • Node.js与npm安装及Vue项目搭建指南
    本文详细介绍了如何安装Node.js和npm,以及如何使用npm安装Vue及其相关工具,包括vue-router和vue-cli,并创建一个简单的Vue项目。 ... [详细]
author-avatar
小水沉伦
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有