使用mpvue开发小程序

2024-05-23 01:41:10

一、安装node.js

1、在官网中安装nodejs最新版本。地址：https://nodejs.org/en/download/，根据自己环境，进行下载安装。

2、安装完成后，进行nodejs版本及npm版本查看。

打开cmd命令行，输入 node -v 和 npm -v，node安装后将会自动安装上npm，但不一定是最新的，可用命令 npm install -g npm，进行最新版本安装。

安装好之后，就可以使用vue-cli进行初始化一个vue项目。

3、使用淘宝NPM 镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

4、全局安装 vue-cli
cnpm install vue-cli -g

二、用vue创建微信小程序项目

进入放项目的目录：使用vue-cli创建一个mpvue项目
vue init mpvue/mpvue-quickstart 项目名

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

然后我们进入到项目目录，安装项目依赖
cnpm install

运行：
npm run dev
运行后，这个项目代码就进入开发模式，一旦有源代码发生修改，就会触发自动编译。

项目目录：

三、小程序

在微信开发者工具中导入项目
项目目录选择vue项目中的目录根目录
appID没有的话可以点选体验“测试号”

就可以做页面啦。

最后附上一个很完整的讲解的链接：https://www.jb51.net/article/140601.htm

使用mpvue开发小程序相关推荐

使用mpvue开发小程序教程（二）
在上一篇文章中,我们介绍了使用mpvue开发小程序所需要的一些开发环境的搭建,并创建了第一个mpvue小程序代码骨架并将其运行起来.在本文中,我们来研究熟悉一下mpvue项目的主要目录和文件结构. 在 ...
使用mpvue开发小程序教程（一）
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
使用mpvue开发小程序教程（五）
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
使用mpvue开发小程序教程（三）
[原文地址]mpvue入门系列教程: 如何在mpvue中正确的引用小程序的原生自定义组件使用mpvue开发小程序教程(六) 使用mpvue开发小程序教程(五) 使用mpvue开发小程序教程(四) 使 ...
mpvue开发小程序所遇问题及h5转化方案
项目结构 |---build|---pages.js文件目录|---src|---component子组件|---pages|---业务页面|---store,vuex储存|---utils|---请 ...
微信小程序开发之——mpvue开发小程序
一概述 mpvue:Vue.js in mini program,即mini vue.js编程框架 mpvue是把vue.js核心代码经过二次开发的框架,增加了vue.js开发小程序的能力 mpvu ...
mpvue开发小程序前端框架
mpvue是一个使用 Vue.js 开发小程序的前端框架. 一.主要特性: 彻底的组件化开发能力:提高代码复用性完整的 Vue.js 开发体验方便的 Vuex 数据管理方案:方便构建复杂应用快捷 ...
mpvue开发小程序分享朋友圈无法自定义标题解决方法
在node_modules里面找到mpvue,手动修改一下mpvue这个包下的index.js文件 // 用户点击右上角分享到朋友圈 onShareTimeline: rootVueVM.$opti ...
mpvue v-html解决方案,mpvue开发小程序所遇问题及h5转化方案
wx这个对象我们可以结合router和vux封装一下其中的navigateTo,redirectTo等路由及模态框和toast,并在webpack.base.conf配置wx指向该文件,这样我们就能直 ...

最新文章

热门文章