code还需要使用node.js这个的作用就类似于JDK当我们都下载好之后winR键打开命令提示符我们在这里可以查看版本

npm

https://mirrors.huaweicloud.com/repository/npm/

npm

然后在d盘建一个文件夹名字叫easyvue我们在这个文件夹目录执行下面语句

npm

在执行完毕之后我们需要输入我们的新项目的名称比如easyvueb

然后依次选择vue和javascript虽然TypeScript也能选但是尽量使用java的在选择完毕之后我们就可以去vscode打开这个文件夹然后我们需要去配置我们的路由因为vue是单页面的我们为了实现页面之间跳转需要使用路由告诉页面需要向那个网页跳转我们需要先在中端输入以下语句下载路由

npm

然后在src下面建立一个新的文件夹再新建一个文件叫index.js里面的代码如下

import

{createRouter,createWebHashHistory}

from

routercreateRouter({history:createWebHashHistory(),routes:[{path:/easy,component:()import(../views/easy.vue),children:[{path:/stafflist,component:()import(../views/stafflist.vue)}]}]}

);export

第一行是代表导入了两个对象从vue-router文件中这个文件是我们的node-modules里面的是我们的配置文件如果没有子路由children包括后边的可以不写子路由是在浏览器页面中我们通过点击需要跳转到的页面比如我们在一个页面中需要查看表格就需要使用到我们的子路由。

在代码中路径部分意思是每当我们路径是访问easy的时候就是要访问views下面的easy.vue文件。

最后一行代码代表是要导出这个路由这样才能被使用要不然其他文件里面导入不进去。

然后我们就需要在main.js文件夹下面导入这个路由然后使用这个路由

import

//导入路由语句createApp(App).mount(#app)

//原本的//使用之后createApp(App).use(router).mount(#app)然后我们再中端下载axios

npm

这个可以帮助我们进行前后端数据交互下载好了之后再src包下建一个新的文件夹util然后建一个文件

http.js在里面我们需要导入如下代码

{//配置每次发送请求都从sessionStorage中获取名字叫token的数据,//添加到请求头部的Authorization属性中//Object.assign用于合并对象的数据options.headers

Object.assign({

返回一个promise对象用于异步请求//options是一个对象其中包含了许多用于配置请求的参数//例如请求的url、请求方法GET、POST等、请求头等return

status,

{//该函数在请求成功并返回数据时被调用//statusHTTP状态码例如200表示请求成功。

//data服务器返回的数据。

//

statusTextHTTP状态文本例如OK表示请求成功。

console.log(data);if

(status

Error(statusText);}}).catch(e{return

这样我们就可以进行数据交互了。

也可以开始写项目了在src包下的view包下建一个文件easya.js在里面我们需要用到我们的三大标签script,template,style在template标签中键写h1easy

page/h1,然后我们还需要在我们的app文件中将所有的都删除只留下三大标签还是在template中间写上router-view/router-view这是我们的视图占位符这时候我们启动项目

npm

逻辑script里面是使用我们的javascript编写一般包含属性方法生命周期这里面用于处理数据逻辑事件处理

HTML

Bootstrap等来编写样式。

通常建议使用作用域样式以确保样式只应用于当前组

如果我们想实现每当我们点击按钮我们的文本数字就增加1我们可以在template中间写

button

changenumfunction(){console.log(changenumber

method)number.valuenumber.value1;

template

changeshiwufunction(){console.log(gaibian)shiwu.value!shiwu.value;

const

getDataasync(){staffData.valueawait

easyAPI.get(/api/getstaff)console.log(staffData.value);

就可从数据库中获取数据但是这里面路径要是http://localhost:8080/getstaff

template

tabletrtdid/tdtdcode/tdtdname/tdtdsalary/td/trtr

v-for(item,index)

easyAPI.get(/api/getstaff);staffData.valueresult.data;console.log(staffData.value);

});

在src包下建一个api文件夹在里面建一个index.js文件写下面代码

import

配置vite冷启动项目自动使用浏览器访问首页open:true,proxy:

/api:

http://localhost:8080,changeOrigin:

true,rewrite:

})这样之后我们就可以和2.4一样写api就可以了如果以后端口号改变了只需要在这里面改一次就行不需要到处更改