Vuetify前端界面构建与启动

执行命令

npm create vuetify-project
cd vuetify-project
npm run dev

文件结构

vuetify-project/
├── src/
├── components/
│   ├── Home.vue
│   ├── ProductInfo.vue
├── views/
│   ├── Dashboard.vue
│   ├── TradingViewPage.vue
├── App.vue
├── router.js
├── main.js
├── vuetify.js  // 在这里创建 vuetify.js 文件
├── package.json

main.js 是入口文件，里面构建了根组件，执行 APP.vue ，APP.vue 根据 router.js 路由调用其他组件

安装项目依赖
进入项目根目录，执行命令，会自动安装所需依赖
```
npm install
```
运行项目
```
npm run dev
```
官方操作文档
Get started with Vuetify 3 — Vuetify (vuetifyjs.com)

.vue文件的通常结构

<template>
  <div>
    <!-- 使用Vue的ref指令创建一个DOM容器 -->
    <div ref="chartContainer" style="width: 700px; height: 500px;"></div>
  </div>
</template>
<script>
import * as echarts from 'echarts';
export default {
  mounted() {
    // 获取DOM容器
    let chartContainer = this.$refs.chartContainer;
    // 初始化ECharts实例
    let myChart = echarts.init(chartContainer);
    // 数据模型和计算MA函数，你可以在这里定义或引入
    var data0 = splitData([
      // 你的数据
    ]);
    function splitData(rawData) {
      // 数据处理逻辑，你可以在这里定义
    }
    function calculateMA(dayCount) {
      // MA计算逻辑，你可以在这里定义
    }
    var option = {
      // ECharts的配置项
      // ...
    };
    // 渲染图表
    myChart.setOption(option);
  },
};
</script>

vuetify前端界面构建与启动

.vue文件的通常结构