spring boot+vue前后端分离项目问题
目录
idea运行vue项目,打开地址为http://0.0.0.0:8080
创建项目
安装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过期
- 关闭 Navicat;
- Win R,输入regedit回车;
- 删除 HKEY_CURRENT_USER\Software\PremiumSoft\Data 文件夹;
- 展开 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,但是为了防止其他网页调用接口,后端一般不写跨域注解。
详细内容可以参考:
快捷键
CTRL / 注释
alt enter 导入
这篇好文章是转载于:学新通技术网
- 版权申明: 本站部分内容来自互联网,仅供学习及演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,请提供相关证据及您的身份证明,我们将在收到邮件后48小时内删除。
- 本站站名: 学新通技术网
- 本文地址: /boutique/detail/tanhihccgg
-
photoshop保存的图片太大微信发不了怎么办
PHP中文网 06-15 -
photoshop扩展功能面板显示灰色怎么办
PHP中文网 06-14 -
word里面弄一个表格后上面的标题会跑到下面怎么办
PHP中文网 06-20 -
TikTok加速器哪个好免费的TK加速器推荐
TK小达人 10-01 -
《学习通》视频自动暂停处理方法
HelloWorld317 07-05 -
excel图片置于文字下方的方法
PHP中文网 06-27 -
Android 11 保存文件到外部存储,并分享文件
Luke 10-12 -
微信提示登录环境异常是什么意思原因
PHP中文网 04-09 -
微信运动停用后别人还能看到步数吗
PHP中文网 07-22 -
微信人名旁边有个图标有什么用
PHP中文网 03-11