mpvue开发小程序基本配置

mpvue是一个使用Vue.js框架开发微信小程序的框架。它使用了Vue.js的语法和思想，提供了一种快速开发微信小程序的解决方案。

mpvue的基本配置分为两个部分：webpack的配置和小程序的配置。

1. webpack的配置

mpvue使用webpack作为打包工具，所以我们需要对webpack进行一些配置。

首先需要安装一些依赖包：

```bash

npm i vue-loader vue-template-compiler mpvue-loader mpvue-webpack-target webpack

```

接着，在webpack.config.js中进行配置:

```javascript

const mpvuePlugin = require('mpvue-webpack-plugin')

module.exports = {

entry: 'src/main.js',

output: {

path: '',

filename: 'main.js'

},

plugins: [

new mpvuePlugin()

],

module: {

rules: [

{

test: /\.vue$/,

loader: 'mpvue-loader',

options: {

checkMPEntry: true

}

},

{

test: /\.js$/,

loader: 'babel-loader'

},

{

test: /\.json$/,

loader: 'json-loader'

}

]

},

target: 'mpvue'

}

```

其中，entry指定入口文件，output指定输出文件，mpvuePlugin是一个自定义插件。

在module中，我们需要使用mpvue-loader来解析vue文件，使用babel-loader来解析js文件，使用json-loader来解析json文件。

target指明打包的目标平台为mpvue。

2. 小程序的配置

在项目的根目录下，需要添加project.config.json文件，用于配置小程序的相关信息，比如appid、项目名称、版本等等。

```javascript

{

"miniprogramRoot": "",

"appid": "",

"projectname": "",

"description": "",

"version": "",

"setting": {

"urlCheck": true,

"es6": true,

"postcss": true,

"minified": true,

"newFeature": true,

"coverView": true,

"nodeModules": true,

"autoAudits": false,

"uglifyFileName": false,

"checkInvalidKey": true,

"checkSiteMap": true,

"uploadWithSourceMap": true,

"compileHotReLoad": false,

"useMultiFrameRuntime": false,

"useApiToGetUserInfo": false,

"useIsolateContext": true

},

"appid": ""

}

```

其中，miniprogramRoot指定小程序的根目录，appid是小程序的id，projectname是小程序的名称，version是小程序的版本号。setting中可以设置小程序的一些运行时属性。

在src文件夹中，我们需要添加一个pages文件夹，用于存放小程序的页面。页面由.vue文件、js文件和json文件组成。其中，.vue文件中定义了页面的模板和逻辑，js文件中定义了页面的逻辑，json文件中定义了页面的配置项。

由于mpvue使用了Vue.js框架，因此在.vue文件中可以使用Vue.js的语法和指令。

以上就是mpvue开发小程序的基本配置。通过以上步骤，我们可以使用Vue.js框架开发微信小程序，开发过程中可以使用Vue.js的语法和思想，使得开发效率更高。