# demo4test

**Repository Path**: yuanyuehui/demo4test

## Basic Information

- **Project Name**: demo4test
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2025-11-06
- **Last Updated**: 2025-12-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: 网站开发技术Ddemo和Echart

## README

<!-- # demo4-test

This template should help get you started developing with Vue 3 in Vite.

## Recommended IDE Setup

[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).

## Customize configuration

See [Vite Configuration Reference](https://vite.dev/config/).

## Project Setup

```sh
npm install
```

### Compile and Hot-Reload for Development

```sh
npm run dev
```

### Compile and Minify for Production

```sh
npm run build
``` -->

# Vue.js 学习教程(Ctrl+shift+P表示打开markdown语法侧边导航栏)
## Week 15周
### Vue router
1. 安装
```bash
npm i vue-router@4
```

## Week 16周周一
### echarts图表
#### 安装
```bash
npm install echarts --save
# or
npm i echarts
```
##### 使用
```html
<template>
  <div id='chartDiv' ref="chartContainer" style="width: 600px; height: 400px;"></div>
</template>

<script>
// 引入 ECharts
import * as echarts from 'echarts';

export default {
  name: 'BasicChart',
  mounted() {
    // 初始化图表
    // const chart = echarts.init(this.$refs.chartContainer);
    // const chart = echarts.init(document.getElementById('chartDiv'));
    const chart = echarts.init(this.$el);
    
    // 配置图表选项
    const options = {
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20]
      }]
    };
    
    // 应用配置项
    chart.setOption(options);
  }
};
</script>
```
#### 注意
1. 要安装Echarts
2. 要在mouted函数中初始化图表
3. 初始化所用的demo元素要有宽高
#### 文档
[ECharts官方文档](https://echarts.apache.org/zh/index.html)
#### 错误处理
1. 若出现以下错误 ![image](./img/image11.png) 请执行
 ```
 npm install -D sass-embedded
 ```





## 常用vscode插件
1. Chineses (Simplified) - 简体中文语言包
![image](./img/image2.png)
2. Vue(Official) - 适用于Vue.js的语法高亮和自动补全![image](./img/image3.png)
3. Vue 3 Snippets - 适用于Vue.js 3的代码片段
![image](./img/image4.png)
4. Auto Close Tag - 自动闭合标签
![image](./img/image5.png)
5. Auto Rename Tag - 自动重命名标签
![image](./img/image6.png)
6. GitLens - git UI 管理工具
![image](./img/image7.png)
7. JavaScript(ES6) code snippets - 适用于JavaScript的代码片段
![image](./img/image8.png)
9. JavaScript and TypeScript Nightly - vscode 支持JavaScript和TypeScript功能
![image](./img/image9.png)