목차
2. 평소와 같이 vue.config.js에서 몇 가지를 구성합니다.
3.2.3 요소 플러스의 온디맨드 도입 확인(피트가 여기에 있음)
3.3 요소와 사용자 지정 테마(여기에도 함정이 있음)
5.3 주문형 echarts에 의해 도입된 구성 요소 테스트
6 Fanwai(px to vw 플러그인, 시각화 프로젝트에 적합)
머리말
소스 코드 주소는 github 
https://github.com/liuxin00020/vue3-elementplus-axios-mock-echarts 아래 링크를 클릭해주세요.
이를 수행하기 전에 컴퓨터에 node, npm 및 vue-cli가 설치되어 있는지 확인하십시오. 해당 버전은 다음과 같습니다.
1. vue-cli로 프로젝트 생성
vue create vue3-elementplus-mock-echartsps: vue-cli를 설치한 경우 열 때 다음과 같은 오류가 발생합니다. 관리자 권한이 없기 때문에 cmd.exe를 관리자 권한으로 열어야 합니다.
자신의 필요에 따라 여기에서 선택하십시오. 다음 선택은 참조용입니다.
다음 프롬프트가 나타나면 생성이 성공한 것이므로 npm run serve를 실행하여 시도할 수 있습니다.
2. 평소와 같이 vue.config.js에서 몇 가지를 구성합니다.
transpileDependencies: true,
publicPath: "./", // 公共路径，这样设置，打包后的index.html才可以打开
productionSourceMap: false, // 打包后不要映射文件
lintOnSave: true, // 保存时，使用eslint，不想用则置为false
devServer: {
host: "localhost", // 解决自动打开0.0.0.0
port: 9090, // 端口
open: true // 编译完成，自己打开浏览器
},
pages: {
index: {
entry: 'src/main.js',// page 的入口
template: 'public/index.html',// 模板来源
// 当使用 title 选项时，
// template 中的 title 标签需要是 <title><%= htmlWebpackPlugin.options.title %></title>
title: 'vue3简易框架代码',
},
}3. 요소 플러스 관련 설정
다음 작업의 경우 공식 웹 사이트 설치를 볼 수 있습니다 | Element Plus https://element-plus.org/zh-CN/guide/installation.html
3.1 설치
npm install element-plus --save3.2 주문형 가져오기( 여기에 함정이 있음 )
3.2.1 설치 필수 종속성
npm install unplugin-vue-components --save-dev3.2.2 vue.config.js에 다음 구성 추가
const Components = require("unplugin-vue-components/webpack");
const { ElementPlusResolver } = require("unplugin-vue-components/resolvers");
configureWebpack: {
plugins: [
// 按需引入element
Components({
resolvers: [
ElementPlusResolver({
// 按需引入修改主题色添加这一行，使用预处理样式
importStyle: "sass",
}),
],
}),
],
},3.2.3 요소 플러스의 온디맨드 도입 확인( 피트가 여기에 있음 )
지금 프로젝트를 시작하고 요소와 구성 요소를 마음대로 코드에 도입하고 성공하는지 확인하십시오. 나는 여기서 성공했고, 실패한 친구들은 왜 그런지 모르겠으니 직접 확인하세요.
n개월전 n이전버전 사용하던 블로거 일반컴포넌트 도입으로 문제없음 v-로딩등 일부 피드백컴포넌트는 수동으로 컴퍼넌트와 스타일 불러와야함. 문제가 있으면 솔루션 보기 https://blog.csdn.net/liuxin00020/article/details/125099212를 클릭하십시오.
3.3 요소와 사용자 지정 테마( 여기에도 함정이 있음 )
블로거는 공식 홈페이지를 참고하여 운영합니다.
https://element-plus.org/zh-CN/guide/theming.html#%E9%80%9A%E8%BF%87-scss-%E5% 8F%98%E9%87%8F- element의 테마 색상을 커버하기 위해 적당한 폴더에 elementplus.scss를 생성합니다.
- 공식 웹 사이트의 프롬프트에 따라 elementplus.scss 파일에 포함된 변수를 작성하고 모든 변수를 보려면 여기를 클릭하십시오.
/* 只需要重写你需要的即可 */
@use "./variable.scss" as *;
@forward "element-plus/theme-chalk/src/common/var.scss" with (
$colors: (
"primary": (
"base": $primaryColor,
),
"success": (
"base": $successColor,
),
"waring": (
"base": $waringColor,
),
"danger": (
"base": $dangerColor,
),
"error": (
"base": $errorColor,
),
"info": (
"base": $fontColor,
),
),
// colors
$bg-color:
(
"": $bgColor,
"page": $bgColor,
"overlay": $overlayColor,
),
$text-color: (
"primary": $fontColor,
"regular": $headerColor,
"secondary": $titleColor,
"placeholder": $titleColor,
"disabled": $primaryColor-light-7,
),
// Background
$link:
(
"text-color": $fontColor,
"hover-text-color": $headerColor,
),
$border-color: (
"": $primaryColor,
"light": $borderLightColor,
"lighter": $primaryColor-light-7,
"extra-light": $primaryColor-light-9,
"dark": $primaryColor-light-5,
"darker": $primaryColor-light-3,
),
$fill-color: (
"": $bgColor,
blank: $bgColor,
light: $primaryColor-light-5,
lighter: $primaryColor-light-7,
extra-light: $primaryColor-light-9,
),
$button: (
"hover-text-color": $hoverColor,
"hover-bg-color": $primaryColor-light-3,
"hover-border-color": $primaryColor-light-7,
),
$dialog: (
"box-shadow": $primaryColor,
"bg-color": $dialogColor,
)
);
- vue.config.js(블로거가 여기에서 소개하고 적용하려면 다시 시작해야 함 ) 또는 main.js 파일에 전역적으로 elementplus.scss를 도입합니다.
css: {
loaderOptions: {
sass: {
// 全局scss 和自定义element主题
prependData: `@use "~/src/style/variable.scss" as *; @use "~/src/style/elementplus.scss" as *;`,
},
},
},이곳은 모든 것이 완벽하지만 오늘은 블로거가 꽉 차서 다크 모드의 커스텀 테마( 큰 구덩이 속으로!!! ) 를 시도해보려고 합니다 . 동일한 문제가 발생하면 솔루션을 보려면 클릭하십시오 https://blog.csdn.net/liuxin00020/article/details/125205049
4개의 axios 및 mockjs 관련 구성
https://blog.csdn.net/liuxin00020/article/details/125082135 문서를 참조하세요.
5개의 echarts 관련 구성
공식 웹 사이트 https://echarts.apache.org/zh/index.html
5.1 설치
npm install echarts --save5.2 필요에 따라 일부 구성 요소 소개
utils 폴더 아래에 echartsUtil.js를 만들고 일반적으로 사용되는 일부 구성 요소를 소개합니다.
/*
* @Author: liuxin
* @Date: 2022-06-13 11:02:26
* @LastEditors: liuxin
* @LastEditTime: 2022-06-13 11:08:26
* @Description: echarts按需引入的组件
*/
// 引入 echarts 核心模块，核心模块提供了 echarts 使用必须要的接口。
import * as echarts from "echarts/core";
// 引入提示框，标题，直角坐标系，数据集，内置数据转换器组件，组件后缀都为 Component
import {
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LegendComponent,
} from "echarts/components";
// 标签自动布局，全局过渡动画等特性
import { LabelLayout, UniversalTransition } from "echarts/features";
// 引入 Canvas 渲染器，注意引入 CanvasRenderer 或者 SVGRenderer 是必须的一步
import { CanvasRenderer } from "echarts/renderers";
// 注册必须的组件
echarts.use([
TitleComponent,
TooltipComponent,
GridComponent,
DatasetComponent,
TransformComponent,
LabelLayout,
UniversalTransition,
CanvasRenderer,
LegendComponent,
]);
export default echarts;5.3 주문형 echarts에 의해 도입된 구성 요소 테스트
- 앞으로 사용할 때마다 echartsUtil.js 및 해당 차트 구성 요소를 직접 가져올 수 있습니다.
<!--
* @Author: liuxin
* @Date: 2022-06-13 11:03:49
* @LastEditors: liuxin
* @LastEditTime: 2022-06-13 11:51:48
* @Description: 测试echarts
-->
<template>
<div>
<div id="chartTest"></div>
</div>
</template>
<script>
import { getChart } from "@/apis/mockTest";
import { reactive, toRefs, onMounted } from "vue";
import echarts from "@/utils/echartsUtil";
// 引入柱状图图表，图表后缀都为 Chart
import { BarChart } from "echarts/charts";
// 注册必须的组件
echarts.use([BarChart]);
export default {
setup() {
const state = reactive({});
onMounted(() => {
getChart().then((res) => {
initChart(res.data.xDatas, res.data.yDatas);
});
});
/**
* @description: 渲染图表
* @param {*} xDatas x轴数据
* @param {*} yDatas y轴数据
* @return {*}
* @Author: liuxin
*/
const initChart = (xDatas, yDatas) => {
// 接下来的使用就跟之前一样，初始化图表，设置配置项
const myChart = echarts.init(document.getElementById("chartTest"));
myChart.setOption({
grid: {
containLabel: true,
},
tooltip: {
trigger: "axis",
},
legend: {
show: false,
},
xAxis: {
type: "category",
name: "日期",
data: xDatas,
axisLabel: {
rotate: xDatas.length > 10 ? -20 : 0,
},
},
yAxis: {
type: "value",
name: "人数",
},
series: [
{
name: "客流流量",
data: yDatas,
type: "bar",
barMaxWidth: "40%",
},
],
});
};
return {
...toRefs(state),
};
},
};
</script>
<style lang="scss" scoped>
#chartTest {
width: 100%;
height: 600px;
}
</style>- 각 차트 구성 요소의 이름을 보고, 공식 웹사이트에서 예제를 찾을 수 있으며, 공식 웹사이트 이름에 따라 가져옵니다(첫 글자는 대문자로 표시되고 뒤에 차트가 옵니다. 예: line--->LineChart) 또는 node_modules\ 자신의 프로젝트 \dist\charts.d.ts에 있는 echarts\types 찾기
5.4 echarts 테마 사용자 정의
5.4.1 공식 웹사이트에서 기존 테마 다운로드
- 테마 다운로드 - Apache ECharts
- 다크 또는 기타 테마를 선택하고 연 후 코드를 폴더에 복사합니다(블로거는 utils/echartsDark.js에 있음).
- 앞에서 작성한 페이지에 echartsDark.js를 도입하여 사용
// 引入dark主题
import "@/utils/echartsDark";
// 使用dark主题
const myChart = echarts.init(document.getElementById("chartTest"),"dark");5.4.2 완전 맞춤형 테마
- 공식 웹사이트 Theme Editor - Apache ECharts 에서 테마 수정
- 수정된 테마를 다운로드하고 설명서에 따라 사용 방법을 선택합니다.
6 Fanwai(px to vw 플러그인, 시각화 프로젝트에 적합)
디자인 도면의 px픽셀이 완성됩니다.완성 후 스스로 적응하고 싶다면 이 변환 플러그인을 사용할 수 있으므로 백분율이나 vw 값을 수동으로 계산할 필요가 없습니다.
- postcss-px-to-viewport 설치
npm install postcss-px-to-viewport --save-dev- 루트 디렉토리에 postcss.config.js 파일 생성
/*
* @Author: liuxin
* @Date: 2022-06-13 16:28:18
* @LastEditors: liuxin
* @LastEditTime: 2022-06-13 16:28:38
* @Description: px转vw
*/
module.exports = {
plugins: {
'postcss-px-to-viewport': {
viewportWidth: 1920,
unitPrecision: 6, // 指定`px`转换为视窗单位值的小数位数
viewportUnit: 'vw',
selectorBlackList: ['.ignore', '.hairlines', '.train-msg', '.RM-mode-line'], // 指定不转换为视窗单位的类，可以无限添加
minPixelValue: 1,
mediaQuery: false, // 允许在媒体查询中转换`px`
// 不转换的只能这么写 只写文件夹的名字，不写整个目录 如views下面的login,只写/login/
// exclude: [/node_modules/],
}
}
}
ecahrts도 창에 적응해야 하는 경우 리스너 이벤트를 추가합니다.
window.addEventListener("resize", function () {
myChart.resize();
});