spring boot+vue前后端分离项目问题总结

目录

创建项目

安装vue脚手架报错

vue命令创建项目失败

项目导入idea

idea过期激活

idea运行vue项目，打开地址为http://0.0.0.0:8080

项目目录

vue文件不显示V图标

前端

Vue3+Element-plus，icon图标不显示

快捷键

---

创建项目

安装vue脚手架报错

命令行来安装脚手架

npm install -g @vue/cli

一堆error，从网上查，这个方法最可行

删除后还是报错 npm ERR! code FETCH_ERRORnpm ERR! errno FETCH_ERROR

尝试使用淘宝的镜像源

npm config set registry https://registry.npm.taobao.org

vue命令创建项目失败

报错：Warning: name can no longer contain capital letters

不能用大写！！！

修改后回车，提示

？Your connection to the default npm registry seems to be slow.

Use https://registry.npm.taobao.org for faster installation? (Y/n)  

选择n

选择n后跳转，按 '↓' 选择 "Manually select features"，回车 

 按回车后选择vue版本号，选择3.x版本，回车

 跳转到如下界面

 按照提示，输入命令，等待启动项目

 

 项目启动成功

 在浏览器输入网址，显示以下页面

按CTRL+C，选择Y终止批命令操作

项目导入idea

接下来我们就可以到idea中打开项目了，直接把刚刚创建的项目拖拽到桌面上的ieda即可。

idea过期激活

好久不用idea了，发现已经过了试用期，支持正版，建议有能力的还是去买正版，学生还有半价优惠

idea运行vue项目，打开地址为http://0.0.0.0:8080

在package.json的scripts里的serve后面追加 '--open'，表示执行完 npm run serve后，自动跳转到浏览器

1. 方案一：手动去更改host

使用全局搜索（快捷键：Ctrl+shift+F），快捷键打不开的，edit=》find=》find in files

在中全局搜索node_modules文件下的@vue/cli-service/lib/commands/serve.js，修改以下内容即可

修改的时候，会提示每个项目都改还是只有一次之类的，按自己需求改就好了。

2. 方案二：降低cli版本

但是我嫌麻烦，用的第一种

   卸载当前脚手架
   npm uninstall -g vue-cli
   安装指定版本脚手架
   npm install -g @vue/cli@4.5.15

项目目录

public=>index.html：vue文件编译后，通过index.html来显示。

src=>asserts：存放静态资源，如图片，css，js

src=>components：定义组件

src=>router：路由，路径和页面进行映射

src=>store：定义变量，页面跳转需要的参数可以存进去

src=>views：一些代码通过组件的方式进行打包，变成vue文件

package.json：项目依赖

vue文件不显示V图标

存在错误的解决方案：

正确步骤：

在File=>settings=>Plugins中下载Vue.js，完成后项目中的vue文件会自动改变图标

如果没有自动改变图标，检查File=>settings=>Editor=>File Types中Vue template是否存在*.vue，没有的话自己加进去。

前端

Vue3+Element-plus，icon图标不显示

这个我真的从网上找了好久</(ㄒoㄒ)/~~>

①安装，在Terminal中运行下行命令

npm install @element-plus/icons-vue

② 在main.js文件中导入所有图标并进行全局注册

import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

 ③在想要使用图标的vue文档中写入代码

④怎么下标箭头和文字挨的那么近？为它增加一个宽度就好了。

⑤效果图

如果还想让侧栏高度充满视图高度，增加下行代码，vh表示视图高度，50px是因为我还有一个头部，所以要减去头部的高度，注意"-"号两边有空格，不然会报错。

style="width: 200px;min-height: calc(100vh - 50px)"

element-plus国际化，将默认的英文改为中文

在main.js文件中

import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'

createApp(App).use(router).use(ElementPlus,{locale})

效果图

Please specify npm scripts to run

我产生这个提示的原因是没填Scripts，之前遇到过Node interpreter那里爆红，修改Node路径就可以，如果还不行，可能是Node环境配置有问题

后端

application.properties显示灰色

 改变默认端口号，发现不起作用

File=》Settings=》Editor=》Inspections=》Properties=》Unused property去掉勾选

Unsupported characters for the charset 'ISO-8859-1'

Navicat过期 

1. 关闭 Navicat；
2. Win + R，输入regedit回车；
3. 删除 HKEY_CURRENT_USER\Software\PremiumSoft\Data 文件夹；
4. 展开 HKEY_CURRENT_USER\Software\Classes\CLSID，依次展开每一个子文件夹，如果子文件夹中只包含一个名为Info的文件夹，就删除Info。

idea 模糊查询不能匹配中文

在前端页面显示的内容包含中文，进行搜索功能时，没有查询结果，中文不能匹配上。

在配置文件application.properties中

useUnicode=true改为characterEncoding=UTF-8

前后端跨域配置

前端有一个添加功能，点击添加弹出表单，填写内容点击提交后把数据传给后端。有些同学这时会报错

找到前端项目中的vue.config.js文件，如果没有自带这个文件的话，可以在前端项目中创建vue.config.js文件，存放在根目录中。

// 跨域配置
module.exports = {
    devServer: {                //记住，别写错了devServer//设置本地默认端口  选填
        port: 9876,
        proxy: {                 //设置代理，必须填
            '/api': {              //设置拦截器  拦截器格式   斜杠+拦截器名字，名字可以自己定
                target: 'http://localhost:9090',     //代理的目标地址
                changeOrigin: true,              //是否设置同源，输入是的
                pathRewrite: {                   //路径重写
                    '/api': ''                     //选择忽略拦截器里面的单词
                }
            }
        }
    }
}

也可以不修改前端内容，在后端进行跨域配置，即controller中添加注解@CrossOrigin，但是为了防止其他网页调用接口，后端一般不写跨域注解。

详细内容可以参考： 

(5条消息) Vue vue.config.js 的详解与配置_前端菜鸟-AllenYe的博客-CSDN博客_vueconfig.js

快捷键

CTRL+/ 注释

alt+enter 导入