vuecli4开发小程序

Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统，包含脚手架工具、插件体系和构建工具等。而小程序是指在微信、支付宝等平台上运行的小型应用程序。本文将介绍如何使用 Vue CLI 4 来开发小程序。

一、概念介绍

微信小程序的底层是基于 WebView，也就是使用 Web 技术实现的应用程序。小程序提供了一些特殊的 API，使得我们可以在小程序中进行一些操作，比如获取用户信息、发起网络请求等。使用 Vue CLI 开发小程序可以让我们使用 Vue 的开发思路来开发小程序，同时也可以使用 Vue 的生态工具和插件。

二、安装 Vue CLI 4

首先，我们需要在本地安装 Node.js 和 npm。安装完成后，执行以下命令安装 Vue CLI 4。

```

npm install -g @vue/cli

```

三、创建小程序项目

执行以下命令来创建一个小程序项目。

```

vue create --preset WeFlexOfficial/vue-cli-plugin-uni-preset-vue my-project

```

其中，`WeFlexOfficial/vue-cli-plugin-uni-preset-vue` 是一个针对 uni-app 的预设配置。`my-project` 是项目名称。

四、配置小程序平台

执行以下命令来添加支持的小程序平台。

```

vue add uni-app

```

根据提示选择要添加的小程序平台，比如微信小程序、支付宝小程序等。

五、开发小程序

使用 Vue CLI 4 开发小程序和使用 Vue 开发 Web 应用程序基本相同，可以使用 Vue 提供的组件和指令来实现小程序中的业务逻辑。但需要注意一些小程序特有的 API 的使用。

1. 页面配置

和 Vue 单文件组件不同的是，在小程序中，需要在页面的 `vue` 文件中配置一些特殊的属性。

例如，以下是一个微信小程序的页面配置。

```vue

```

在上面的代码中，可以看到，在 `export default` 后面，有一个叫做 `config` 的对象。这个对象是配置小程序页面的，比如页面的标题、页脚、背景颜色等。

2. 特殊 API 使用

在小程序中，一些原本可以使用 Web API 的操作需要使用小程序特有的 API，比如获取用户信息、发起网络请求等。可以使用第三方库如 `axios`、`fly` 等来实现在小程序中发起网络请求。

```javascript

import axios from "axios";

export default {

methods: {

async getData() {

const res = await axios.get("http://xxx.com/data.json");

console.log(res.data);

}

}

};

```

注意，在小程序中使用 `axios` 等第三方库时需要注意跨域问题。

六、构建小程序

小程序的构建和打包与 Vue 应用程序相同。可以使用以下命令构建和打包小程序。

```

npm run dev:mp-weixin # 开发模式

npm run build:mp-weixin # 生产模式

```

小程序的构建目录为 `dist/mp-weixin`，其中 `mp-weixin` 是开发者所选小程序对应的名称。

七、总结

使用 Vue CLI 4 开发小程序，可以使用 Vue 的开发思路和工具链来开发小程序。虽然需要注意小程序特有的属性和 API 使用，但是在代码复用、页面切换等方面，可以显著提高开发效率，是一种值得尝试的开发方式。