听说过用Vue.js跟C++做个电脑桌面程序么？是不是觉得超炫？Vue.js就是前段开发的大佬，功能强大还方便，所以网页设计师都喜欢。再加上C++这种后台强将助力，咱们就可以造出超级棒的桌面程序！别急，下面给你详细说说怎么把它们俩组合在一起，还有实战演练，保证你能学会！

安装Vue.js和相关开发工具

嗨喽，跟着我这样做，保证你轻而易举就能搞定Vue.js及其关联插件的装载！其实就是在命令行里敲几下键盘就成了！千万别省略这步它可关键着呢～

npm install -g @vue/cli

咱们搞个Vue.js项目！戳几下鼠标就搞定了！这对找工作挺有用的！

安装必要的依赖包

vue create desktop-app

咱们要做一个APP，得加些小功能！就像给C++装上翅膀似的。这就好比把Vue.js和C++连在一起，大家用了才觉得舒服。

npm install ffi ref-napi

想用Vue.js搞C++吗？得靠FFI（ForeignFunctionInterface）和ref-napi这两样神器！它们能让JavaScript轻松调用C++，速度快如闪电，功能更是牛到不行！

编写C++代码

首先，找个板凳，为我们的Vue.js项目搞个地方放些复杂的C++代码，接着，在命令行里敲个新建cpp文件的命令，就可以开始编写你的C++关键部分！

来，咱们就在native.cpp里搞C++编程！首先，做个能求两数之和的小程序。别忘了嵌套上extern”C”这让JavaScript可以像架桥一样使用我们的C++代码。

mkdir src/cpp
touch src/cpp/native.cpp

创建Vue组件调用C++函数

#include 
extern "C" {
    int add(int a, int b) {
        return a + b;
    }
}

首先，先了解一下什么是Vue组件，这样咱们用C++函数就更方便。只需要下载ffi和ref-nAPI这俩包就行！然后，我们要在mounted生命周期钩子里设置一些东西，让C++函数跑起来，看看效果如何！

告诉你个超级棒的事儿，用Vue组件咱们就能直接调用事先写好的C++函数了！比如，轻松地解决2+3等于几这样的问题！然后，把答案展示在网页上，整个页面都变得炫酷无比！

引入主组件使用新的Vue组件

别急，让我们先将新编写的Vue组件塞到App.vue里边，用起来看看效果如何。然后，咱们再来试试看能不能在Vue.js里面搞出点C++函数出来耍耍。

  

    
Desktop App
    
{{ result }}
  


import ffi from 'ffi';
import ref from 'ref-napi';
export default {
  data() {
    return {
      result: 0,
    };
  },
  mounted() {
    const lib = ffi.Library('./libnative', {
      add: ['int', ['int', 'int']]
    });
    
    const result = lib.add(2, 3);
    this.result = result;
  },
};


h1 {
  color: blue;
}

告诉你个好玩的事情，我跟朋友用Vue.js和C++做了个小玩意儿！你只要上百度就能看到一个巨大的数字“5”哦～这可是我们花了好多心思才搞定的！

Vue.js搭配C++做项目确实有挑战，但只要咬牙坚持下去，就能发现其实挺有趣，速度还飞快！把这俩技术揉在一起，前端立马焕然一新。对咱们码农而言，这也是个学点新鲜玩意儿的大好时机呀~

看完这篇文，你也能做高大上的桌面应用！用Vue.js和C++结合起来，真的很简单！不懂就问，有经验就分享，大家一起进步！

  

    
    
  


import HelloWorld from './components/HelloWorld.vue';
export default {
  name: 'App',
  components: {
    HelloWorld,
  },
};


#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
}