vue3前端学习

前期准备工作

1.创建vue工程：npm init vue@latest

2.安装依赖：

npm install element-plus --save

npm install axios

npm install sass -D

3.目录调整：

删除components下面自动生成的内容

新建目录api、utils、views

将资料中的静态资源拷贝到assets目录下

删除App.vue中自动生成的内容

启动后台服务

所在jar包目录下执行：java -jar xxx.jar

并启动redis-server.exe

路由

1.npm install vue-router@4（几s内完成了，视频23m，更新镜像后，速度加快)

2.在src文件夹下新建router文件夹，index.js文件

3.main.js文件中添加两行代码

import router from '@/router'  //如果上一步文件名为index.js，后面文件名省略，否则加入文件名

app.use(router)

4.App.vue文件中声明router-view标签

<template>

  <router-view></router-view>

</template>

pina使用

1.npm install pinia

2.在vue应用实例中使用pinia，即在main.js文件中添加以下几代码

import { createPinia } from 'pinia'

const pinia = createPinia();

app.use(pinia);

3.在src/stores/token.js中定义store

4.在组件中使用store

跟敲过程中出现的问题

1.解决跨域问题后，弹窗显示注册失败。

推测原因：复制的jar包里yml文件，数据库密码不是自己的。

2.改变消息提示的效果后，没有显示出来。

命令行报错：[vite] http proxy error: /user/register
Error: connect ECONNREFUSED ::1:8080
    at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1555:16)

解决办法：启动后台服务

3.登录页面没有消息提示。

推测原因：后台数据库

4.登录成功后，路由完成跳转，没有实现

5.row报错：配置了语法规范,不影响运行