node package manager
Share your code. npm Orgs help your team discover, share, and reuse code. Create a free org ¬Ľ



NPM version

ūüėÉcli for wechat miniprogram developing.



use npm for installing wxa. npm i -g @wxa/cli


  1. basic build wxa build

  2. watch mode wxa build --watch

  3. build without cache and more detail log wxa build --no-cache --verbose

  4. create new project with template, see template wxa create base projectname

  5. invoke wechatdevtools, windows need setup wechatwebdevtools in wxa.config.js

  • wxa cli open: open dev tools
  • wxa cli preview: preview project
  • wxa cli upload -m 'upload msg' --ver 'verion': upload project
  • wxa cli login: login tool, preview and upload command need login your wechat account


  1. npm support
  2. vue develop pattern
  3. support multi plugins
  4. support custom compiler


core configs file is wxa.config.js, mostly like below:

const path = require('path');
const UglifyjsPlugin = require('@wxa/plugin-uglifyjs');
const ReplacePlugin = require('@wxa/plugin-replace');
let prod = process.env.NODE_ENV === 'production';
const envlist = []; // your env configurations
module.exports = {
    wechatwebdevtools: '/Applications/', // path to your wechat dev tool
    resolve: {
        alias: {
            '@': path.join(__dirname, 'src'),
    use: ['babel', 'sass', 'stylus'],
    compilers: {
        sass: {
            // compiler options
    plugins: [
        new ReplacePlugin({
            list: envlist,
if (prod) {
    module.exports.plugins.push(new UglifyjsPlugin());


use vsCode to make coding more enjoyable. use vetur for beautify .wxa file. following vscode's configurations is recommended:

    "javascript.implicitProjectConfig.experimentalDecorators": true,
    "vetur.grammar.customBlocks": {
    "config": "json"
  "vetur.validation.template": false,
  "eslint.enable": true

and also a list of eslint configs:

    "extends": [
    "root": true,
    "env": {
        "commonjs": true,
        "es6": true,
        "node": true
    "parser": "vue-eslint-parser",
    "parserOptions": {
        "parser": "babel-eslint",
        "ecmaFeatures": {
            "experimentalObjectRestSpread": true
        "ecmaVersion": 2017,
        "sourceType": "module"
    "rules": {
        "vue/valid-template-root": "off",
        "no-const-assign": "warn",
        "valid-template-root": "off",
        "no-this-before-super": "warn",
        "no-undef": "warn",
        "no-unreachable": "warn",
        "no-unused-vars": "warn",
        "constructor-super": "warn",
        "valid-typeof": "warn",
        "one-var": "warn",
        "max-len": "off",
        "no-trailing-spaces": "off",
        "require-jsdoc": "warn",
        "camelcase": "warn",
        "no-invalid-this": "warn",
        "new-cap": "warn",
        "guard-for-in": "warn"


  1. Base Template


wxa will resolve component in npm folder. you can easily import com from others.

// in your page's config.json
    "usingComponents": {
        "counting": "@wxa/ui/src/components/counting"

output mostly like this:

    "usingComponents": {
        "counting": "./../npm/@wxa/ui/src/components/counting"

and wxa-ui is coming soon.