🚀 KK ~

新项目草记

3分钟阅读

创建项目见之前，使用的是一样的

npm create vue@latest
cd vue-project
npm install
npm run format
npm run dev

组件库 element-plus

npm install element-plus --save

之后按照文档中的快速开始，进行引入即可，国际化操作 import 时参考：github

import zhCn from "element-plus/es/locale/lang/zh-cn"

svg图标使用 iconfont ，其中需要配置一个插件，vite-plugin-svg-icons，该文档中记录了如何在 vite.config.ts 中配置，并且封装成一个组件使用，需要参考具体安装的版本里的文档去使用，我直接执行命令安装的是老版本，清除缓存后重新安装

npm cache clean --force
npm install vite-plugin-svg-icons@latest -D

参考官方文档里弄好了之后，要是不同的视图里，都需要使用svg图片，那每次使用都需要导入一次，比较麻烦，所以可以利用自定义插件将该组件变成全局组件，并通过循环自动完成测试

SCSS（Sassy CSS）是一种基于 CSS 的预处理器语言。它扩展了 CSS，提供了一些额外的功能，使得样式表的编写更加灵活和可维护。通过脚手架设置的项目我没有看到该插件，所以需要自己安装一下：

npm install -D sass

安装完成后，就可以使用了，只需要在 style 部分通过 lang 指明是 scss 即可，为了可以使用一些全局样式，我们将一些 scss 文件存放到 src/styles 下，第一步就是清除默认样式，之后设置的全局变量需要在一个单独的文件，并且在 vite.config.ts 进行配置

// scss 全局变量的配置
css: {
	preprocessorOptions: {
		scss: {
			javascriptEnabled: true,
			additionalData: '@import "./src/styles/variable.scss";'
		}
	}
}

使用 axios 来发送请求，但在使用前对其进行一个封装，方便一些处理

npm install axios

上传控件的使用：https://www.bilibili.com/video/BV1CN411v72n?p=4

音频展示的使用：https://github.com/staskobzar/vue-audio-visual

图表展示：https://github.com/ecomfe/vue-echarts

pinia同步播放器数据：https://www.bilibili.com/video/BV1Za4y1r7KE?p=48

关系图谱