vue3+vite 解决debugger断点调试定位不准确问题

### Vue3 + Vite + TypeScript + Element Plus + ECharts 项目源码 以下是创建一个包含 Vue3、Vite、TypeScript、Element Plus 和 ECharts 的项目的基础指南和代码结构： #### 初始化项目 通过 `npm` 或 `yarn` 创建一个新的 Vite 项目，并选择 Vue 和 TypeScript 支持： ```bash npm create vite@latest my-vue-app --template vue-ts cd my-vue-app ``` 安装必要的依赖项，包括 Element Plus 和 ECharts： ```bash npm install element-plus echarts ``` #### 配置环境 在 `vite.config.ts` 文件中引入并配置 Element Plus 和 ECharts。以下是一个完整的配置示例： ```typescript import { defineConfig } from &#39;vite&#39;; import vue from &#39;@vitejs/plugin-vue&#39;; import path from &#39;path&#39;; // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue()], resolve: { alias: { &#39;@&#39;: path.resolve(__dirname, &#39;./src&#39;), // 路径别名配置 }, }, css: { preprocessorOptions: { scss: { additionalData: `@use "@/styles/variables.scss" as *;`, // SCSS 变量全局导入 }, }, }, }); ``` #### 安装 ESLint 和 Prettier 并配置 为了保持代码风格一致性和质量控制，可以按照以下方式设置 ESLint 和 Prettier。 1. **ESLint 插件安装** ```bash npm install eslint eslint-plugin-vue @typescript-eslint/parser @typescript-eslint/eslint-plugin --save-dev ``` 2. **Prettier 插件安装** ```bash npm install prettier eslint-config-prettier eslint-plugin-prettier --save-dev ``` 3. **配置 `.eslintrc.cjs`** ```javascript module.exports = { root: true, env: { node: true, }, extends: [ &#39;plugin:vue/vue3-essential&#39;, &#39;eslint:recommended&#39;, &#39;@vue/typescript/recommended&#39;, &#39;plugin:prettier/recommended&#39;, // 添加此行启用 Prettier ], parserOptions: { ecmaVersion: 2020, }, rules: { &#39;no-console&#39;: process.env.NODE_ENV === &#39;production&#39; ? &#39;warn&#39; : &#39;off&#39;, &#39;no-debugger&#39;: process.env.NODE_ENV === &#39;production&#39; ? &#39;warn&#39; : &#39;off&#39;, }, }; ``` 4. **配置 `.prettierrc`** ```json { "semi": false, "singleQuote": true, "tabWidth": 2, "trailingComma": "all" } ``` 5. **更新 `package.json` 中的脚本命令**[^2] ```json "scripts": { "dev": "vite", "build": "vite build", "preview": "vite preview", "lint": "eslint . --ext .vue,.ts,.tsx,.js,.jsx --fix", "format": "prettier --write src/" } ``` #### 使用 Element Plus 在 `main.ts` 文件中注册 Element Plus 组件库： ```typescript import { createApp } from &#39;vue&#39;; import App from &#39;./App.vue&#39;; import ElementPlus from &#39;element-plus&#39;; import &#39;element-plus/dist/index.css&#39;; // 导入样式文件 const app = createApp(App); app.use(ElementPlus); app.mount(&#39;#app&#39;); ``` #### 使用 ECharts 在组件中动态加载 ECharts 图表实例： ```vue <template> <div ref="chartRef" style="width: 600px; height: 400px;"></div> </template> <script setup lang="ts"> import * as echarts from &#39;echarts&#39;; import { onMounted, ref, Ref } from &#39;vue&#39;; const chartRef: Ref<HTMLDivElement | null> = ref(null); onMounted(() => { const chartDom = chartRef.value; if (chartDom) { const myChart = echarts.init(chartDom); const option = { title: { text: &#39;ECharts 示例&#39;, }, tooltip: {}, legend: { data: [&#39;销量&#39;], }, xAxis: { data: [&#39;衬衫&#39;, &#39;羊毛衫&#39;, &#39;雪纺衫&#39;, &#39;裤子&#39;, &#39;高跟鞋&#39;, &#39;袜子&#39;], }, yAxis: {}, series: [ { name: &#39;销量&#39;, type: &#39;bar&#39;, data: [5, 20, 36, 10, 10, 20], }, ], }; myChart.setOption(option); } }); </script> ``` #### CSS 样式管理 可以通过 SCSS 进行全局样式定义，在 `src/styles/variables.scss` 文件中声明通用变量[^3]： ```scss $primary-color: #409eff; $font-size-base: 14px; body { font-family: Arial, sans-serif; color: $primary-color; } ``` --- ###