1、去官方倉庫（地址）下載程式碼到本地

2、進到專案資料夾 => 可用node啟動專案 => npm install http-server -g => http-server -p 9090

3、通過index.html檔案，知道以下三個檔案是必須要引入的檔案 和檔案庫

<script type="text/javascript" src="charting_library/charting_library.min.js"></script>
<script type="text/javascript" src="datafeeds/udf/dist/polyfills.js"></script>
<script type="text/javascript" src="datafeeds/udf/dist/bundle.js"></script>
 

即

charting_library      /*資料夾*/
polyfills.js        /*js檔案*/
bundle.js       /*js檔案*/

1. 把以上三個js檔案與檔案庫放到vue根目錄下的static資料夾下
2. 把tradingview中在index.html中引入的三個檔案，通過vue根目錄下面的入口檔案index.html引入
3. 在對應的元件引入tradingview---這裡的構造器 widget 配置可檢視官方文件（地址）

<template>
    <div id="tv_chart_container" style="width: 652px;height: 350px;margin:auto"></div>
</template>

<script>
  export default {
    name:'...',
    data(){return{}},
    mounted(){

        var widget = window.tvWidget = new TradingView.widget({
          fullscreen: true,
          symbol: '164',  //商品標識
          interval: '1D',  //初始化顯示的時間範圍
          container_id: "tv_chart_container",
          datafeed: new Datafeeds.UDFCompatibleDatafeed("...",10000), 
          library_path: "../../static/charting_library/",
          locale: "zh",
          autosize: true,
          timezone:"Asia/Shanghai",
          toolbar_bg:"#121c31",
          custom_css_url:'style/black.css',
          drawings_access: { type: 'black', tools: [ { name: "Regression Trend" } ] },
          disabled_features: [ 
          //禁用功能（隱藏圖示按鈕）陣列
          "use_localstorage_for_settings"
              ...
          ],

          overrides:{
          //覆蓋操作
            "mainSeriesProperties.style": 8,
            'paneProperties.background': "#121c31",
            'paneProperties.vertGridProperties.color': "#1C2843",
            'paneProperties.horzGridProperties.color': "#1C2843",
            'paneProperties.crossHairProperties.color': "#bcc4d0",
            'mainSeriesProperties.haStyle.upColor': "#09BB07",
            'mainSeriesProperties.haStyle.downColor': "#F03869",
            'scalesProperties.fontSize': 11,

          },
          studies_overrides: {
            //柱狀顏色修改
            "volume.volume.color.0": "#F03869",
            "volume.volume.color.1": "#09BB07"
          }
        });
    }
  }
</script>
<style>
  iframe{
    height: 350px !important;
  }
</style>
 

4、相信用vue的你一定有node環境，用node啟動你的專案 => 如果有報錯，就根據錯誤提示修改

   常見錯誤，可能會有跨域錯誤和資料引入錯誤，這裡可自行搜尋解決方案，這樣的解決方案網上很多

5、最後迭代知識（上面幾步做好之後，基本快速入門了，然後想對tradingview更加熟悉，不推薦直接看文件，而是先看教程）

最後，感謝你的閱讀。。。如果對你有幫助，或者你在此基礎上學到了一點東西，或是自己在此基礎上摸索出來一些東西，希望你能本著開源精神分享你的知識