Building a WeChat Web Notification Frontend with Vue and VUX for Azure DevOps

The author introduces the motivation behind developing a WeChat web application for Azure DevOps notifications, explaining that both WeChat mini‑programs and public‑account web pages are essentially web apps, and choosing Vue together with the VUX UI framework for rapid development.

Project Initialization

The project starts from a webpack2 template. The author references another article for .NET Core integration with Vue, then runs the following commands to set up the environment:

npm install vue-cli -g # if not installed yet
vue init airyland/vux2 projectPath
cd projectPath
npm install --registry=https://registry.npm.taobao.org # or cnpm install or yarn
npm run dev # or yarn dev

After installation, several screenshots show the generated project structure, including the build (webpack configuration) and config (Vue project settings) directories.

Component Usage

VUX components can be used via local registration or global registration. For local registration, the example imports the Group and Cell components:

import { Group, Cell } from 'vux';

<group title="cell demo">
  <cell title="VUX" value="cool" is-link></cell>
</group>

The component is then exported in the Vue file:

export default {
  components: {
    Group,
    Cell
  }
};

For global registration, the author demonstrates adding a component (e.g., toast ) in the entry file, referencing the source on GitHub, and shows the resulting UI after mounting a loading indicator.

Online Product Demonstration

The final integrated product, named “DevOps Assistant”, provides Azure DevOps message notifications via a WeChat public account. Users can subscribe to a DevOps server and receive work‑item updates, build triggers, and other events directly in WeChat. Several images illustrate the notification list, detail view, subscription management, and historical messages.

Conclusion

The author notes that developing a WeChat mobile web front end is relatively straightforward with mature toolchains, and that front‑end/back‑end interaction and cross‑origin issues are easily handled in this model, encouraging readers to try the approach.

Source code is available at https://github.com/WalkerLu/vux-demo .