mpvue的使用（一）必要的开发环境

新建mpvue项目

** 1. node.js**
点击安装node
安装完成后，打开你的命令行输入如下命令，验证安装是否成功：

node --version
//成功的话输出类似：v10.6.0npm --version
//成功的话输出类似：6.1.0*将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率
npm set registry https://registry.npm.taobao.org/

2.vue-cli
vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码，包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：

npm install vue-cli -g

安装完成后，输入如下命令进行验证：

vue// 成功的话会输出如下内容：
// Usage: vue <command> [options]
//
// Options:
//
//    -V, --version  output the version number
//    -h, --help     output usage information
//
// Commands:
//
//    init           generate a new project from a template
//    list           list available official templates
//    build          prototype a new project
//    create         (for v3 warning only)
//    help [cmd]     display help for [cmd]

3.微信开发者工具

点击安装微信开发者工具

4.vsCode + Vetur
Visual Studio Code（简称vscode）是现在非常流行的一个轻量级代码编辑器，拥有非常多好用的辅助开发插件，在我的文章中我都会使用这个编辑器来编辑代码。当然，好用的代码编辑器有很多，比如Sublime Text、WebStorm等，同样可以达到我们的开发目的，你也尽管用你自己最喜欢的代码编辑器来写代码就行了。
下载vsCode地址
安装完vscode后，在它的插件管理器中，查找Vetur并安装，然后重启一下vscode后，插件即生效：

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

vue init mpvue/mpvue-quickstart firstapp

命令行将一步步的引导我们选择或填写项目的配置信息，如果你还不太明白这些内容的含义，可以先直接全部按回车：

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <kevin.zhang@moredist.com>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能 vue-cli · Generated "firstapp".To get started:cd firstappnpm installnpm run devDocumentation can be found at http://mpvue.com

6.运行项目

//运行代码
cd firstapp
npm install//进入开发模式
npm run dev

一旦有源代码发生修改，就会触发自动编译。这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下：

7.运行并查看结果
打开微信开发者工具，选择新增项目：

选择目录，打开新建好的项目文件夹
找到文件夹下的dist文件下的wx文件夹

注意：这里的appid要和项目的appid保持一致，如果没有也可以使用测试号！！！

点击导入即可
【提醒】记得在微信开发者工具的菜单》设置》编辑设置中，将“保存时自动编译小程序”勾选上，这样当mpvue的代码自动编译完成后，模拟器才会自动刷新界面。

如果项目运行出现各种对于代码格式的报错
原因：eslint报错，关闭eslint即可

打开项目目录下的 build/webpack.base.conf.js 注释以下代码{test: /\.(js|vue)$/,loader: 'eslint-loader',enforce: 'pre',include: [resolve('src'), resolve('test')],options: {formatter: require('eslint-friendly-formatter')}},

mpvue的使用（一）必要的开发环境相关推荐

基于mpvue框架搭建微信小程序开发环境
一.按照mpvue官网新建前台工程 http://mpvue.com/mpvue/quickstart.html(mpvue快速上手教程) 二.路由功能代码实现 mpvue对vue-router的支持 ...
Mpvue+koa开发微信小程序——腾讯云开发环境的搭建及部署实现真机测试
为什么写这篇文章? 之前写过一篇文章:微信小程序开发错误:LoginError {type: "ERR_WX_GET_USER_INFO"}解决方法有的伙伴在这篇文章中评论为什么 ...
微信小程序从本地开发环境到线上测试环境和生产环境的配置
这篇文章是对慕课网mpvue实战项目视频过程中环境的配置的总结与更新(因为小程序文档时不时就更新) 项目源码:https://github.com/suhuashan/bookCommentSyste ...
客快物流大数据项目(四十九)：开发环境初始化
目录开发环境初始化一.配置开发环境的HADOOP_HOME 二.将hadoop.
2021年大数据常用语言Scala（二）：Scala开发环境安装
目录开发环境安装安装JDK 安装scala SDK 步骤具体操作安装IDEA scala插件步骤开发环境安装学习如何编写scala代码之前,需要先安装scala编译器以及开发工具 sca ...
android studio 开发环境搭建
as 开发环境 1 需要下载配置JDK 2 下载 android studio JDK 配合可以参考 http://blog.csdn.net/qq_33210042/article/details/ ...
嵌入式linux编程,嵌入式Linux学习笔记 - 嵌入式Linux基础知识和开发环境的构建_Linux编程_Linux公社-Linux系统门户网站...
注:所有内容基于友善之臂Mini2440开发板一.嵌入式Linux开发环境的构建嵌入式开发一般分为三个步骤: 1.编译bootloader,烧到开发板 2.编译嵌入式Linux内核,烧到开发板 3 ...
Go 学习笔记（1）— Ubuntu 系统 Go 环境搭建、VS Code 配置 Go 开发环境、VS Code 远程开发配置
1. 安装说明 Ubuntu 下直接安装 Go 1.11 版本编译器时需要依赖 Go 1.4 版本.所以如果在使用 apt-get install go安装时参考以下链接安装:https://blog ...
emacs 搭建racket开发环境
emacs 搭建racket开发环境 emacs下搭建开发racket的环境,笔者之前用过下面两种模式:geiser和racket-mode.相对而言,后一种方式要显得简单.本文主要介绍后一种方式环境 ...
Android环境搭建和Android HelloWorld—Android开发环境搭建
Android_Android开发环境搭建-搭建Android的开发环境 1.我考虑先下载JDK7.0,在JDK的安装中,考虑一般SDK都是向上兼容的,于是选择了最高的版本7.0 这里是我总结的详细的 ...

mpvue的使用（一）必要的开发环境

mpvue的使用（一）必要的开发环境相关推荐

最新文章

热门文章