河南大学web开发技术（vue）实验报告一

最新推荐文章于 2024-07-14 18:10:31 发布

杂学家阿艺

最新推荐文章于 2024-07-14 18:10:31 发布

阅读量529

点赞数 1

文章标签：前端 vue.js javascript

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.csdn.net/Ahuang121300/article/details/133436702

版权

由于之前的项目需要，Vue.js所需的环境已经全部具备，此处不做展示。
创建Hello World案例

2.1创建Html文件

2.2通过！快捷键，快速创建html文件架构

2.3通过script标签引入Vue.js

2.3具体代码如下

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我是第一个Vue.js案例</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    {{ message }}
</div>

<script>
    var app = new Vue({
        el: '#app',
        data: {
            message: 'Hello Vue.js'
        }
    })
</script>
</body>
</html>

2.4实验结果如图

（我直接从实验报告复制的，懒得下载到本地再上传了，各位自己调试八）

创建登录界面

3.1安装手脚架并创建一个新的Vue项目

按照PPT输入两条命令，但注意的是在创建项目时选择Vue3

1. 进入项目目录login（cd）
2. 安装Vue Router以便后续实现页面的跳转，命令为npm install vue-router@4
3. 创建LoginComponent.vue组件，添加以下代码

<template>

<div>

<h1>Login</h1>

<form>

<input type="text" v-model="username" placeholder="Username">

<input type="password" v-model="password" placeholder="Password">

<button @click="LoginComponent">Login</button>

</form>

</div>

</template>

L

<script>

export default {

data() {

return {

username: '',

password: ''

};

},

methods: {

login() {

// 在这里可以编写登录逻辑

console.log('Username:', this.username);

console.log('Password:', this.password);

}

}

};

</script>

<style scoped>

h1 {

text-align: center;

}

form {

display: flex;

flex-direction: column;

align-items: center;

margin-top: 20px;

}

input {

margin-bottom: 10px;

}

button {

padding: 10px 20px;

}

</style>

1. 打开src/main.js文件，添加以下代码到文件中

import { createApp } from 'vue'

import App from './App.vue'

import router from './router'

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

1. 在src目录下创建一个名为router.js文件，添加以下内容

import { createRouter, createWebHistory } from 'vue-router'

import LoginComponent from './LoginComponent'

const routes = [

{

path: '/',

name: 'Login-compoment',

component: LoginComponent

}

]

const router = createRouter({

history: createWebHistory(process.env.BASE_URL),

routes

})

export default router

1. 在src目录下修改App.vue文件如以下内容：

<template>

<div id="app">

<router-view></router-view>

</div>

</template>

<style>

#app {

max-width: 400px;

margin: 0 auto;

padding: 20px;

border: 1px solid #ccc;

border-radius: 5px;

box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);

}

</style>

1. 重新npm i 以更新各项配置
2. npm run serve
3. 浏览器打开8080端口
4. 结果如图

杂学家阿艺

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
河南大学web开发技术（vue）实验报告一

title>我是第一个Vue.js案例</title>（我直接从实验报告复制的，懒得下载到本地再上传了，各位自己调试八）按照PPT输入两条命令，但注意的是在创建项目时选择Vue3。快捷键，快速创建html文件架构。2.3通过script标签引入Vue.js。3.1安装手脚架并创建一个新的Vue项目。// 在这里可以编写登录逻辑。2.1创建Html文件。
复制链接

扫一扫

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。