使用mpvue开发小程序（1）：学习教程与安装

---

01 学习参考

1.1 vue学习参考

• Vue的官方文档
  https://cn.vuejs.org/v2/guide/
• 菜鸟教程 vue
  https://www.runoob.com/vue2/vue-tutorial.html

1.2 mp vue学习参考

• 简书专栏：mpvue入门系列教程
  https://www.jianshu.com/p/8f779950bfd9
• mpvue官网
  http://mpvue.com
• mpvue官网-快速上手
  http://mpvue.com/mpvue/quickstart.html
• 基础入门：以图书扫码为实例
  https://segmentfault.com/a/1190000015545555

02 安装

2.1 nodejs安装

1. 官网下载：https://nodejs.org/en/download/
   下载的是msi文件，一路next
   安装完成后，进入cmd输入，查看版本，如果可以，则说明安装成功

node -v
//成功的话输出类似：v10.6.0

npm -v
//成功的话输出类似：6.1.0

2. （如果没有问题跳过这步即可）
   如果输入以上指令，提示找不到node指令，则说明环境变量还未配置成功
   （新版本的node安装过程中，理论上是自动配置环境变量的，但不知道我的电脑他怎么了 😦 )
   解决： 在系统变量path下添加新的值，指向nodejs安装位置（如 D:\Applications\node）

3. 安装成功后，我们需要执行以下命令，将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率
   该指令是永久切换到淘宝镜像库

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

安装成功验证

// 配置后可通过下面方式来验证是否成功
npm config get registry
// 或
npm info express

关于淘宝镜像库的相关可以参考 https://blog.csdn.net/fhjdzkp/article/details/90038959

2.2 vue-cli

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

npm install vue-cli -g
npm install -g vue-cli

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

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]

问题： vue不是内部或外部命令
解决： 仍然是环境变量的原因
在环境变量path中添加vue.cmd所在文件夹的路径
关于 vue.cmd的位置：

1. 如果通过npm config set prefix 自己设置过路径。那么vue.cmd就在制定路径的node_global文件夹下。
2. 如果您在安装npm过程中没有设置过路径，那么一般默认路径在C:\Users\用户名\AppData\Roaming\npm
3. cmd中输入“npm config get prefix”，获取安装位置
4. 如果上面两个地方都没有找到，那么就只能全局搜索vue.cmd了

如果还不可以，而已重新启动cmd或重启电脑

03 开始一个mpvue小程序

• 创建一个项目
  https://jingyan.baidu.com/article/9158e0000e6178a2541228d5.html
• 如何运行github上的mpvue小程序开源项目
  https://www.jianshu.com/p/1dec372a22c2

3.1 打开一个gitlab上下载的mpvue项目

1、 打开cmd，cd进入文件夹

2、安装依赖（npm已改为淘宝镜像）
	npm install
	
3、安装完成后，输入运行命令
	npm run dev
	
4、打开微信开发者工具，导入项目

（每次打开都要cd进那个文件夹，然后运行npm run dev，而安装依赖只需要第一次）

报错及解决：
小程序之插件未授权使用-解决1
小程序之插件未授权使用-解决2
最后解决：问公司leader，小程序后台服务器域名配置+给我开发权限

3.2 新建一个mpvue项目

1、vue init mpvue/mpvue-quickstart my-project
	例如需要建立的项目位置为  e:\mpvueProject
	命令则将“my-project”改为你的项目的目录路径

	在安装的过程中，会询问项目名称、小程序APPID、项目描述、作者、是否使用 vue build 、是否使用vuex、是否使用ESLint等，根据自身项目需要选择即可
	初学者直接默认，一路回车就好

2、 cd进入文件夹

3、安装依赖（npm已改为淘宝镜像）
	npm install
	
4、安装完成后，输入运行命令
	npm run dev
	
5、打开微信开发者工具，导入项目

04 怎么关闭npm run命令

开启了npm run dev命令以后，如何关闭或者退出？
CTRL+C

05 文件结构

5.1 build目录

是一些用于项目编译打包的node.js脚本和webpack配置文件
一般情况下不需要修改这些文件

5.2 config目录

包含了用于开发和生产环境下的不同配置
dev.env.js用于开发环境
prod.env.js用于生产环境
可以将开发阶段和生产阶段不一样的信息（如后台API的url地址等）配置到这两个文件中去，然后在代码中以变量的形式进行引用
这2个文件中分别配置了不同的API_BASE_URL值，如

// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_BASE_URL: '"http://127.0.0.1:8080/api"'
})

// prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  API_BASE_URL: '"https://www.my-domain.com/api"'
}

在编写请求后端API的代码时，你就可以使用这个环境配置，像这样

const baseURL = process.env.API_BASE_URL
wx.request({
  url: `${baseURL}/products`
})

这样,开发阶段和上线发布阶段的环境可以清楚的区分开来

5.3 dist目录

把Web代码编译成小程序代码。编译后的代码会在dist目录下

5.4 src目录

是我们主要进行小程序功能编写的地方
默认生成的demo代码为我们创建了几个子目录：components、pages和utils
还有2个文件：App.vue和main.js
其实它们都不是必须的，可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了，比较易于理解，所以我们可以遵循这个结构进行开发

• components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录

• pages：存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式

• utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下

• 可新建其他目录，存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等

• main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体。

5.5 static目录

static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等
代码中可通过相对路径或绝对路径进行访问

5.6 package.json

项目的主配置文件
里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息

5.7 project.config.json

用于管理微信开发者工具的小程序项目的配置文件
其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息