一、前言

配置好各种工具后（参见《前端开发专栏》工具配置），现在来准备初步实现一个数据大屏！IDE为VSCode，涉及开发技术与库有vue3,ts,python,echarts,vue-router4,pinia,axios

二、前端配置

配置vue3开发环境
- 简要介绍vue3
  - 一个用于构建UI的渐进式框架
- 安装vue3框架
  - npm install vue
- 配置webpack
  - 为什么要配置
    - webpack原生不能解析.vue文件
  - 具体配置
    - 安装所需的依赖
      - npm i -D vue-loader @vue/compiler-sfc
        
        vue-loader：解析、转换/vue文件，提取出其中的逻辑代码scripts，样式代码style以及HTML模板template，再分别把它们交给对应的Loader去处理
        
        @vue/compiler-sfc：把vue-loader提取出的HTML模板编译成对应的可执行的JS代码（预先编译好HTML模板相对于在浏览器中再去编译HTML模板的好处在于性能更好）
    - 指定模板编译选项（根目录下创建vue.config.js文件）
      - 设置后项目将使用 @vue/compiler-sfc 作为 Vue 模板编译器
    - 修改webpack.config.js文件里的配置
      - module.rules ->
        
        添加解析.vue格式文件的规则
        
        {test:/.vue$/,use:['vue-loader']}
      - module.plugins里添加 new VueLoaderPlugin()
- 配置tsc（tsc：typescript编译器）
  - 为什么要配置
    - ts-loader无法识别.vue文件，因为tsc不认识.vue文件，这样就无法支持import a from "./A.vue"这样的导入
  - 如何配置
    - 建立一个vue-shims.d.ts文件（别的名字也可，不过这个文件名使用比较广泛），为.vue文件写一个类型声明（vue3与vue2的类型声明文件不同）
      - 创建位置通常与tsconfig.json位于同一目录，如果不是，则需要另外配置
        
        tsconfig.json -> complierOptions
        
        "typeRoots":["path"]
      - vue-shims.d.ts
    - 配置webpack
      - webpack.config.js
- 配置weback处理scss文件
  - 简要介绍scss
    - 一种css预处理器，相比于css，它可以更方便地管理代码，抽离公共的部分，通过逻辑写出更灵活的代码
  - 安装相关依赖
    - npm install -D node-sass style-loader css-loader sass-loader
      - 注：由于sass-loader依赖于node-sass，所以node-sass要先于sass-loader前安装
  - webpack.config.js
  - scss如何直接编译为css文件
    - node-sass name.scss name.css
- 安装、配置插件
  - VueLoaderPlugin：vue-loader包内部提供，不需要单独安装，做好配置即可
    - 简要介绍VueLoaderPlugin
      - 允许webpack正确加载解析Vue单文件组件的脚本、模板、样式
  - html-webpack-plugin：
    - npm install -D html-webpack-plugin
  - webpack.HotModuleReplacementPlugin：
    - webpack内置的用于模块热替换(HMR)的插件，可实现代码无需刷新即可即时更新
  - webpack.config.js配置如下：
- 安装Volar扩展（之前有安装Vetur的要禁用掉Vetur）
  - 简要介绍Volar, Vetur
    - 都是与Vue.js相关的开发插件，但Volar更适合开发Vue3项目，Vetur更适合Vue2
  - 开启Volar的"Takeover"模式
    - 为什么要开启：在vue+ts的项目里我们运行了两个语言服务实例，一个来自Volar,一个来自VSCode的内置服务（Volar创建了一个针对Vue的TS语言服务实例，将其用于Vue的单文件组件，但是同时普通TS文件依然由VScode内置服务器来处理），这样可能会带来性能问题
- 自定义.vue文件模板片段
  
  这几种方式都OK！
- 为src目录配置别名，简化文件引入路径（配置后，@就代表目录src！）
- 配置ts-loader（webpack.config.js）
  - 为什么要配置
    - ts-loader只能对在它之前的loader编译转换后的代码执行类型检查，这个速度很慢，而我们已经在IDE里通过单独的线程运行着类型检查了，如果还使用ts-loader在构建流程中执行类型检查，开发体验就不太好了
  - 具体配置
配置vue-tsc
- 简要介绍vue-tsc
  - 一个专门用来检查Vue单文件组件的TS类型的工具，同时它可以生成相应类型声明文件
    - 还有，由于Vue单文件组件的特殊结构（包含模板、脚本、样式），如果直接用tsc命令进行类型检查和编译，无法正确处理，但是vue-tsc就解决了整个问题
- 安装相关依赖（typescript和vue也是依赖项，不过前面先安装了一遍，这里就没加上去）
  - npm install -D @types/node @types/vue vue-tsc
- 配置TS编译器，指定需要编译的文件路径(tsconfig.json)
  - include -> path
    - 例如： "include": ["src//*.ts","src//.tsx","src/**/.vue"]
- 配置构建命令（package.json）
  - scripts ->
    - "vts": "vue-tsc --declaration --emitDeclarationOnly --declarationDir ./src"
- 进行类型检查
  - cmd环境下：npm run vts
创建vue应用实例
- 创建根组件App.vue（创建位置：project_name/src/）
- 创建vue应用实例并将其挂载到真实DOM元素上（project_name/src/main.ts里）
  - main.ts：整个vue应用的入口文件
  - index.html：项目根目录下创建
vue-router安装、路由配置
- 简要介绍vue-router
  - vue.js的官方路由
- 安装vue-router
  - npm install vue-router@4
- 创建路由实例
  - 创建目录：project_name/src/router
  - 注意
    - 建议采用按需导入，这样模块只有需要加载时才会加载，而不是在应用程序启动时一次性加载所有模块，减少了初始加载时间和资源占用，可以提高性能和用户体验！
    - 如果要采取按需导入 -> 要对TS编译器进行必要的配置，将module设置为符合条件的模块系统（具体是什么可查看报错信息）
  - 历史管理模式的选择
    - Hash模式
      - 创建方式
        
        使用createWebHashHistoty()创建
      - 特点
        
        在内部传递的实际URL之前使用了'#'这个符号，'#'之后的URL没有发送到服务器进行处理，所以不用做服务器配置
      - 不足
        
        SEO有不好的影响
    - HTML5模式
      - 创建方式
        
        使用createWebHistoty()创建
      - 特点
        
        URL里没有'#'号，要做服务器配置
      - 不足
        
        SEO友好
  - 注册路由实例(main.ts里)
  - router.ts, main.ts, App.vue
pinia安装、配置
- 简要介绍pinia
  - 拥有组合式API的vue状态管理库
- 安装pinia
  - npm install pinia
- 创建pinia应用实例并进行注册(main.ts里)
- 创建store
  - 创建目录：project_name/src/store
echarts安装、配置
- 简要介绍echarts
  - 一个基于JS的开源可视化图表库
- 安装
  - npm install echarts
- 按需在要使用echarts的组件文件(即.vue文件)里引入echars的必备配置
  - 单独一个文件放按需引入echarts的必需配置
    - project_name/src/echarts/importre.ts
  - 图表选项设置也是单独一个文件
    - project_name/src/echarts/left.ts
  - 组件里使用echarts
    - project_name/src/views/Home.vue

import * as echarts from "echarts/core";
import {
	BarChart,
	LineChart
} from "echarts/charts";
import {
	TitleComponent,
	TooltipComponent,
	GridComponent,
	// 数据集组件
	DatasetComponent,
	// 内置数据转换器组件 (filter, sort)
	TransformComponent
} from "echarts/components";
import { LabelLayout, UniversalTransition } from "echarts/features";
import { CanvasRenderer } from "echarts/renderers";
import type {
	// 系列类型的定义后缀都为 SeriesOption
	BarSeriesOption, 
	LineSeriesOption
} from "echarts/charts";
import type {
	// 组件类型的定义后缀都为 ComponentOption
	TitleComponentOption,
	TooltipComponentOption,
	GridComponentOption,
	DatasetComponentOption
} from "echarts/components";
import type { 
	ComposeOption, 
} from "echarts/core";

// 通过 ComposeOption 来组合出一个只有必须组件和图表的 Option 类型
export type ECOption = ComposeOption<
  | BarSeriesOption
  | LineSeriesOption
  | TitleComponentOption
  | TooltipComponentOption
  | GridComponentOption
  | DatasetComponentOption
>;

// 注册必须的组件
echarts.use([
	TitleComponent,
	TooltipComponent,
	GridComponent,
	DatasetComponent,
	TransformComponent,
	BarChart,
	LineChart,
	LabelLayout,
	UniversalTransition,
	CanvasRenderer
]);

import { ECOption } from "./importre"
export const option: ECOption = {
	xAxis: {
		data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]
	},
	yAxis: {},
	series: [
		{
			type: "bar",
			data: [23, 24, 18, 25, 27, 28, 25]
		}
	]
};

<!--
    author: peaky
-->
<template>
  <div id = "left">
    主页
  </div>
  <div>{{ store.count}}</div>
</template>

<script lang="ts" setup>
import * as echarts from "echarts/core.js"
import "../echarts/importre"
import { option } from "../echarts/left"
import { onMounted } from "vue";
import { useCounterStore } from "@/store/store"
// 可以在组件中的任意位置访问 `store` 变量 ✨
const store = useCounterStore()
onMounted(() => {
  const myChart = echarts.init(document.getElementById("left"), null, {
    width : 600,
    height: 700 
  });
  myChart.setOption(option);
});
</script>

<style lang="scss" scoped>
</style>

配置axios
- 简要介绍axios
  - 一个基于Promise的网络请求库
- 安装axios
  - npm install axios
- 创建axios实例（project_name/src/api/axioInstance.ts）
- 配置axios发送请求

三、后端配置

flask配置
- 简要介绍flask
  - 一个轻量级的Python Web框架
- 创建项目文件夹：在里面设置一个Python虚拟环境并安装Flask
  - 安装环境：虚拟环境
    - 不同的项目依赖于不同Python库，虚拟环境可为每个项目安装独立的Python库
  - 创建虚拟环境（Windows下）
    - py -3 -m venv .venv
  - 激活虚拟环境
    - .venv\Scripts\activate
  - 在虚拟环境里安装Flask
    - pip install Flask
- 项目内文件夹
  - flaskr/：包含应用代码和文件的Python包
  - tests/：包含测试模块的文件夹
  - .venv/：一个Python虚拟环境，用于安装Flask和其他依赖的包
  - pyproject.toml：项目管理文件
  - .gitignore：忽略文件
- 定义和操作数据库
  - 使用数据库：SQLite数据库
    - 这样我们就不需要单独配置一个数据库服务器
  - 创建表：flaskr/schema.sql
- 创建数据库模型类
  - 安装Flask-SQLAlchemy
    - 是什么
      - 一个用于在Flask应用中与数据库进行交互的扩展模块
    - 安装命令：pip install Flask-SQLAlchemy【在上述的虚拟环境里安装】
    - 数据库模型类创建（project_name/flaskr/models.py）
    - init.py里配置SQLite数据库的连接信息
- 配置路由（project_name/flaskr/routes.py）【暂时配置如下，后继会根据前端需求改变】
- 项目目录下这些文件夹要有
- 处理前端请求后端数据发生的跨域问题（CORS问题）
  - 给Flask配置合适的CORS头部，这样浏览器就不会阻止跨域请求
  - 安装相关扩展：pip install flask-cors【在上述的虚拟环境里安装】
  - 导入、配置启动Flask服务器：项目根目录下打开终端
    - flask --app flaskr run --debug

四、启动webpack-dev-server

npm start

五、错误及警告处理

Export ‘render’ (imported as ‘render’) was not found 或者 export 'default' (reexported as 'default') was not found
- 关闭ts-loader类型检查，只进行转译
this.setDynamic is not a function
Feature flags VUE_OPTIONS_API, VUE_PROD_DEVTOOLS are not explicitly defined

参考资源：

开发技术及库官网
chatGPT

Vue+Python+Echarts实现数据大屏（一）

一、前言

二、前端配置

三、后端配置

四、启动webpack-dev-server

五、错误及警告处理