mpvue-simple

辅助 mpvue 快速开发 Page 级小程序页面的工具，所以也需要有一定的小程序开发经验。

mpvue QuickStart 只支持项目级应用开发，对 Page 级和自定义组件 Component 级小程序页面开发场景缺少支持，而 simple 刚好来填补这部分需求，用以支持 mpvue 和原生小程序（或者其他方式小程序）的混用。

工具用法

command line

# install by global
npm i mpvue-simple -g

# create an *.vue SFC
echo -e '<template><h1>Hello {{msg}}!</h1></template>\n<script>\nexport default {\n  data () {\n    return { msg: 233 }\n  }\n}\n</script>\n<style>\n  h1 {\n    color: red;\n  }\n</style>' > App.vue

# build for signel Page
mpvue-simple --build

# or more options
mpvue-simple --build --entry ./src/login.vue --output ./mp-pages/ --pageName login --config ./build/webpack.page.js

Node.js API

install

npm i mpvue-simple --save-dev

example

const mpvueSimple = require('mpvue-simple')

// build for signel Page
mpvueSimple.build()

// or more options
mpvueSimple.build({
  output: 'mp-pages',
  pageName: 'login'
})

// maybe you want to do something after building
mpvueSimple.build()  // => Promise
.then(() => console.log('mpvue build success'))
.catch(err => throw new Error(err))

API

• mpvueSimple.build(argvOptions)
• mpvueSimple.devServer(argvOptions)
• mpvueSimple.getWebpackConfig()
• mpvueSimple.getDevWebpackConfig()

argv options

修改小程序的配置

在小程序项目的 app.json 中 pages 字段添加前文工具编译生成的小程序页面路径。
然后访问该路径页面查看检查。