vite vue3 echarts 项目的创建和引入配置流程
时间: 2024-03-21 12:40:30 浏览: 135
好的,下面是Vite + Vue3 + ECharts项目的创建和引入配置流程:
1. 首先,需要全局安装Vite:`npm install -g vite`
2. 创建一个新的Vue3项目:`npm init @vitejs/app`
3. 根据提示输入项目名称,选择Vue3作为框架,然后进入项目目录:`cd 项目名称`
4. 安装Vue3:`npm install vue@next`
5. 安装ECharts:`npm install echarts`
6. 在项目目录下创建一个`index.html`文件,引入Vue3和ECharts的CDN链接:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Vue3 + ECharts</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/echarts"></script>
</head>
<body>
<div id="app"></div>
<script src="./main.js"></script>
</body>
</html>
```
7. 在项目目录下创建一个`main.js`文件,引入Vue3和ECharts:
```javascript
import { createApp } from 'vue'
import App from './App.vue'
import * as echarts from 'echarts'
createApp(App).mount('#app')
// 在需要使用ECharts的地方,使用echarts.init()方法初始化ECharts实例
var myChart = echarts.init(document.getElementById('chart'))
```
8. 编写Vue组件,在需要使用ECharts的地方,使用`<div id="chart"></div>`标签作为ECharts图表容器。
9. 运行项目:`npm run dev`
这样,就完成了Vite + Vue3 + ECharts项目的创建和引入配置流程。
阅读全文