vue js问题解决办法-持续更新

qq_冯小阳

已于 2024-05-14 18:43:15 修改

阅读量200

点赞数 2

文章标签： json vue.js

于 2024-04-23 07:53:08 首次发布

本文链接：https://blog.csdn.net/qq_35216918/article/details/138105733

版权

文章讲述了用户在使用Vue和element-ui时遇到的问题，包括npm下载错误、版本不兼容导致的界面空白以及node.js环境设置错误。解决方法包括使用--legacy-peer-deps选项、升级element-ui版本、调整node项目配置和MyBatis数据库连接设置。

摘要由CSDN通过智能技术生成

1.vue使用npm下载elment时出错

命令行输入 npm install element-ui@2.15.3
报警：

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: test@0.1.0
npm ERR! Found: vue@3.4.24
npm ERR! node_modules/vue
npm ERR!   vue@"^3.2.13" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.5.17" from element-ui@2.15.3
npm ERR! node_modules/element-ui
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!
npm ERR! For a full report see:
npm ERR! C:\Users\admin\AppData\Local\npm-cache\_logs\2024-04-22T23_42_50_383Z-eresolve-report.txt

npm ERR! A complete log of this run can be found in: C:\Users\admin\AppData\Local\npm-cache\_logs\2024-04-22T23_42_50_383Z-debug-0.log

根据报警提示咱们在后面加上–legacy-peer-deps 写成npm install element-ui@2.15.3 --legacy-peer-deps 既可

2 elemen-ui编译能通过但是网页界面是空白的

查看vue的版本 vue -V发现是@vue/cli 5.0.8 版本很新，所以之前装的element-ui的版本是2.15.3 需要更新版本到element-plus
步骤 1 npm uninstall element-ui 删除原先的版本
步骤2 npm install element-plus --save 安装新版本发现也不会像上面安装一样出错了
步骤3

import ElementPlus from 'element-plus';
import 'element-plus/theme-chalk/index.css';

createApp(App).use(store).use(router).use(ElementPlus).mount('#app')

正确引入头文件
接着正常使用就ok了。

3.node前端项目运行报错:Error: error:0308010C:digital envelope routines::unsupported**

问题原因
新安装的node.js跑之前的vue项目
package.json中修改

"scripts": {
    "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
}

4 vscode创建前端工程化代码

在vscode中使用vue init 项目名称或者vue create hello-world创建前端工程化目录

具体创建前端工程步骤：
步骤1：在文件系统中创建文件夹作为工程目录
步骤2：弹出控制windows窗口输入 vue ui 创建模板工程
步骤3：打开vscode软件加入工程所在的文件夹
步骤4：修改默认端口：在vue.config.js中添加

devServer:{
    port:7070
  },

步骤5：调出终端窗口下载element-plus 终端输入npm install element-plus --save
步骤6：安装element加入布局和加入元素

5.jsherp vue目录结构

在这里插入图片描述

6.MyBatis逆向工程报错You must configure either the server or JDBC driver (via the ‘serverTimezone）

添加serverTimezone=Asia/Shanghai

connectionURL="jdbc:mysql://localhost:3306/jsh_erp?serverTimezone=Asia/Shanghai"