taro vue cssModules使用案例

### 如何在 Taro Vue3 中集成和使用 `ec-canvas` 组件 #### 配置文件修改 为了能够在项目中正常使用 `ec-canvas` 组件，在项目的入口配置文件 `index.config.ts` 中声明此组件[^1]： ```typescript export default { navigationBarTitleText: &#39;前端进阶技术栈&#39;, usingComponents: { "ec-canvas": "../../ec-canvas/ec-canvas" } } ``` #### 安装依赖包 确保安装了必要的依赖项，对于基于 Taro 和 Vue 的环境而言，通常需要通过 npm 或 yarn 来获取这些资源。 ```bash npm install echarts-for-weixin taro-vue3 # 或者 yarn add echarts-for-weixin taro-vue3 ``` #### 创建页面结构 创建一个新的页面用于展示图表功能，并引入所需的模块。这里假设已经有一个名为 `ChartPage.vue` 的文件存在。 ```vue <template> <view class="chart-container"> <ec-canvas id="mychart-dom-bar" canvas-id="mychart-bar"></ec-canvas> </view> </template> <script setup lang="ts"> import { ref, onMounted } from &#39;vue&#39;; import * as wxCharts from &#39;echarts-for-weixin&#39;; const chartRef = ref(null); onMounted(() => { const query = wx.createSelectorQuery(); query.select(&#39;#mychart-dom-bar&#39;).fields({ node: true }).exec((res) => { if (res && res[0]) { drawBarChart(res[0].node); } }); }); function drawBarChart(canvas){ var myChart = new wxCharts.Chart({ canvas, type: &#39;bar&#39;, categories: [&#39;Mon&#39;, &#39;Tue&#39;, &#39;Wed&#39;, &#39;Thu&#39;, &#39;Fri&#39;], series: [{ name: &#39;Sales&#39;, data: [320, 332, 301, 334, 390], }], animation: true, width: canvas.width, height: canvas.height, dataLabel: true, legend: false, extra: { barWidth: 20 }, }); }; </script> <style scoped> .chart-container{ display: flex; justify-content: center; align-items: center; min-height: 100vh; } </style> ``` 上述代码展示了如何在一个新的 Vue 页面内初始化并渲染柱状图实例到指定的 `<ec-canvas>` 元素上。注意这里的 `canvas.id` 应当与模板中的 ID 对应起来以便正确关联 DOM 节点。