vue创建项目接入sentry监控

1、安装node.js

下载网址：node.js中文网
下载完成后，点击安装，一直下一步就好了，完成后查询当前的版本号，因为我之后在E盘创建项目，所以这里显示的E盘

补充：因为国内使用npm会很慢，因此可以使用淘宝的NPM，网速好的克忽略

npm install -g cnpm --registry=https://registry.npm.taobao.org

因为之后你可能会使用到yarn，所以这里我们也全局安装一下yarn

npm i -g yarn

2、创建项目

前面的准备工作做好以后，我们开始创建项目
（1）安装Vue Cli脚手架，这里我们就可以使用之前的淘宝NPM镜像安装了

// 使用-g @vue/cli安装的是最新的版本
cnpm install -g @vue/cli

// 下面的写法安装的不一定是最新的版本
npm install vue-cli -g

下面是部分截图，使用cnpm话，会先出现download下载

// 查看Vue版本
Vue --version

（2）、vue创建项目

// vue cli3使用这个
vue create 项目名
// vue cli3以下
vue-init webpack 项目名

然后直接选择默认就好了，之后的很多选择都被省略，直接会创建的


到此一个项目就创建完成了，看到最后有两个命令行，先后执行，就可以运行这个项目了，现在我们可以开始接入sentry监控了。

3、安装sentry的依赖

这里我用的vscode打开的项目，所以剩下的操作在vscode的控制台执行

yarn add @sentry/integrations
yarn add @sentry/browser
// 也可以
cnpm install @sentry/integrations
cnpm install @sentry/browser

接下来配置sentry，在项目的main.ts加入以下代码：

import * as Sentry from "@sentry/browser";
import * as Integrations from "@sentry/integrations";

Sentry.init({
  // dsn需要替换新建项目的dsn，从下面截图中的地方获取
  dsn: "https://a21877a8baef4d5688908cf5ee30f848@sentry.io/1420283",
  integrations: [
    new Integrations.Vue({
      Vue,
      attachProps: true
    })
  ]
});

这里在sentry上创建项目我省略了，使用的语言是Vue，你们创建项目的选择Vue语言就好了，然后create project后就会生成上面的部分了。

4、最后就是测试接入

我们继续在刚才的main.ts文件中，最后添加抛出异常

new Vue({
  render: h => h(App),
}).$mount('#app')

// 这里就是抛出的异常
throw "sentry for demo 123"

然后控制台运行项目

yarn serve

点击上面的网址，就可以进入我们的界面了，这时也就可以去sentry官网上找到我们的刚才建的项目，里面会出现我们抛出的异常。

到此这个项目接入sentry的简单监控就算完成了，大家快去试试吧