微软PowerBI客户端Vue.js项目启动与配置教程-CSDN博客

本文链接：https://blog.csdn.net/gitblog_00224/article/details/147549711

微软PowerBI客户端Vue.js项目启动与配置教程

powerbi-client-vue-js Power BI Vue.js component. This library lets you embed Power BI report, dashboard, dashboard tile, report visual, or Q&A in your Vue.js application. 项目地址: https://gitcode.com/gh_mirrors/po/powerbi-client-vue-js

1. 项目的目录结构及介绍

在克隆或下载微软的PowerBI客户端Vue.js项目后，您将看到以下目录结构：

powerbi-client-vue-js/
├── examples/          # 示例应用目录
│   ├── public/        # 公共文件目录
│   │   └── index.html # 入口HTML文件
│   ├── src/           # 源代码目录
│   │   ├── assets/    # 静态资源目录
│   │   ├── components # Vue组件目录
│   │   ├── App.vue    # 根组件
│   │   ├── main.js    # 应用启动文件
│   │   └── ...
│   └── ...
├── packages/          # 项目依赖包目录
├── scripts/           # 脚本目录
├── README.md          # 项目说明文件
└── ...

examples/: 包含了使用PowerBI客户端的示例Vue.js应用。
public/: 存放应用的静态文件，如HTML、CSS和JavaScript等。
src/: 源代码目录，包含了所有的Vue组件和JavaScript代码。
packages/: 项目依赖的npm包存放目录。
scripts/: 存放构建和开发过程中使用的脚本文件。

2. 项目的启动文件介绍

项目的启动文件位于examples/src/main.js。以下是启动文件的基本内容：

import Vue from 'vue';
import App from './App.vue';

Vue.config.productionTip = false;

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

这段代码导入了Vue库和根组件App.vue，然后创建了一个Vue实例，并将其挂载到ID为app的DOM元素上。

3. 项目的配置文件介绍

项目的配置文件通常位于项目根目录下的package.json文件。以下是配置文件的基本内容：

{
  "name": "powerbi-client-vue-js",
  "version": "1.0.0",
  "description": "PowerBI client for Vue.js",
  "main": "examples/main.js",
  "scripts": {
    "start": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "vue": "^2.6.11",
    "vue-powerbi": "^1.0.0",
    ...
  },
  "devDependencies": {
    "@vue/cli-plugin-eslint": "^4.5.0",
    "eslint": "^6.7.2",
    ...
  },
  ...
}

在scripts对象中定义了一些常用的npm脚本命令：