vue3实战项目安装各种爆时候报错问题和解决 |
您所在的位置：网站首页 › 羊毛衫讲解 › vue3实战项目安装各种爆时候报错问题和解决 |
vue3实战项目安装各种爆时候报错问题和解决
|
文章目录
1.安装:npm install -g sass报错问题1.npm install失败,报错如下
引入使用echarts 相关问题1. vue3中npm install echarts --save报错但是这个地方有报提示,问题待解决...........
1.安装:npm install -g sass
注释: 多种安装方法 2.vue中局部引用,也可以设置全局css文件引入使用(使用场景全局的主题颜色更改等) overflow: hidden;溢出模块隐藏 visibility: hidden;隐藏全部 报错问题1.npm install失败,报错如下https://www.baidu.com/s?ie=UTF-8&wd=npm%20ERR!%20Fix%20the%20upstream%20dependency%20conflict,%20or%20retry%20npm%20ERR!%20this%20command%20with%20–force,%20or%20–legacy-peer-deps%20npm%20ERR!%20to%20accept%20an%20incorrect%20(and%20potentially%20broken)%20dependency%20resolution.%20npm%20ERR!%20npm%20ERR!%20See%20D%3A%5Cnode%5Cnode_cache%5Ceresolve-report.txt%20for%20a%20full%20report.%20npm%20ERR!%20A%20complete%20log%20of%20this%20run%20can%20be%20found%20in%3A%20npm%20ERR!%20D%3A%5Cnode%5Cnode_cache%5C_logs%5C2023-03-03T04_20_57_593Z-debug-0.log 解决: npm install --legacy-peer-deps 即可成功安装 node_modules 引入使用echarts 相关 问题1. vue3中npm install echarts --save报错npm WARN ERESOLVE overriding peer dependency npm WARN While resolving: @element-plus/[email protected] npm WARN Found: [email protected] npm WARN node_modules/vue npm WARN peer vue@“3.0.0-beta.14” from @vue/[email protected] npm WARN node_modules/@vue/compiler-sfc npm WARN peer @vue/compiler-sfc@“^3.0.0-alpha.4” from [email protected] npm WARN node_modules/vue-cli-plugin-vue-next npm WARN 1 more (the root project) npm WARN 5 more (vue-cli-plugin-vue-next, vue-demi, …) npm WARN npm WARN Could not resolve dependency: npm WARN peer vue@“^3.2.0” from @element-plus/[email protected] npm WARN node_modules/@element-plus/icons-vue npm WARN @element-plus/icons-vue@“^1.1.4” from [email protected] npm WARN node_modules/element-plus npm WARN npm WARN Conflicting peer dependency: [email protected] npm WARN node_modules/vue npm WARN peer vue@“^3.2.0” from @element-plus/[email protected] npm WARN node_modules/@element-plus/icons-vue npm WARN @element-plus/icons-vue@“^1.1.4” from [email protected] npm WARN node_modules/element-plus npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: @vue/[email protected] npm ERR! Found: [email protected] npm ERR! node_modules/eslint-plugin-vue npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer eslint-plugin-vue@“^5.2.3 || ^6.0.0” from @vue/[email protected] npm ERR! node_modules/@vue/eslint-config-typescript npm ERR! dev @vue/eslint-config-typescript@“^5.0.2” from the root project npm ERR! npm ERR! Conflicting peer dependency: [email protected] npm ERR! node_modules/eslint-plugin-vue npm ERR! peer eslint-plugin-vue@“^5.2.3 || ^6.0.0” from @vue/[email protected] npm ERR! node_modules/@vue/eslint-config-typescript npm ERR! dev @vue/eslint-config-typescript@“^5.0.2” from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force, or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution. npm ERR! npm ERR! See D:\node\node_cache\eresolve-report.txt for a full report. npm ERR! A complete log of this run can be found in: npm ERR! D:\node\node_cache_logs\2023-03-03T04_29_35_204Z-debug-0.log 解决: npm install echarts --legacy-peer-deps 之后在App.vue中引入 import * as echarts from 'echarts' import { provide } from 'vue' export default { name: 'App', setup(){ provide('echarts',echarts) }, components: { } }之后在新建echart.ts文件 import * as echarts from "echarts/core"; // 引入折线图、饼状图、柱状图 import { LineChart, PieChart, BarChart } from "echarts/charts"; // 引入提示框、标题、直角坐标系、数据集、内置数据转换器组件 import { TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent, } from "echarts/components"; // 标签自动布局，全局过渡动画等特性 import { LabelLayout, UniversalTransition } from "echarts/features"; echarts.use([LineChart, PieChart, BarChart, TitleComponent, TooltipComponent, GridComponent, DatasetComponent, TransformComponent, LegendComponent, LabelLayout, UniversalTransition]); export default echarts;引入使用 import echarts from '../../utils/echart'; //注意这里引入了onMounted这个钩子，等会有用 import { onMounted, nextTick } from "vue"; export default { name: '', setup() { onMounted(() => { nextTick(() => { console.log(document.getElementById('hom_chart')) const myChart = echarts.init(document.getElementById('main')); myChart.setOption({ title: { text: 'ECharts 入门示例' }, tooltip: {}, xAxis: { data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子'] }, yAxis: {}, series: [ { name: '销量', type: 'bar', data: [5, 20, 36, 10, 10, 20] } ] }); }) }) return { } } }显示样式
|
【本文地址】
今日新闻 |
推荐新闻 |