在Vue中创建一个简约大气登录页面，并提供源代码下载的功能可以使用以下步骤：
- 创建Vue项目（如果还没有）：
vue create simple-login-page
- 进入项目目录并安装必要的依赖：
cd simple-login-page
npm install
- 编辑Vue组件以创建登录表单和按钮。
LoginPage.vue:
<template>
<div class="login-container">
<h1>登录</h1>
<form @submit.prevent="login">
<input type="text" v-model="username" placeholder="用户名" />
<input type="password" v-model="password" placeholder="密码" />
<button type="submit">登录</button>
</form>
<div v-if="sourceCode">
<h2>源代码下载</h2>
<button @click="downloadSourceCode">下载</button>
</div>
</div>
</template>
<script>
export default {
data() {
return {
username: '',
password: '',
sourceCode: true, // 假设有源代码可供下载
};
},
methods: {
login() {
// 处理登录逻辑，例如验证用户名和密码
console.log('登录成功！');
},
downloadSourceCode() {
// 下载源代码的逻辑
console.log('源代码下载中...');
}
}
};
</script>
<style scoped>
.login-container {
/* 样式 */
}
form {
/* 样式 */
}
input {
/* 样式 */
}
button {
/* 样式 */
}
</style>
- 将组件添加到Vue应用中。
main.js:
import Vue from 'vue';
import App from './App.vue';
import LoginPage from './components/LoginPage.vue';
Vue.config.productionTip = false;
new Vue({
render: h => h(App),
components: {
LoginPage
}
}).$mount('#app');
App.vue:
<template>
<div id="app">
<login-page></login-page>
</div>
</template>
<script>
export default {
name: 'App'
};
</script>
<style>
/* 全局样式 */
</style>
- 运行Vue项目：
npm run serve
这样就创建了一个简约大气登录页面，并提供了源代码下载的功能。在实际应用中，登录逻辑和下载源代码逻辑需要根据实际情况进行扩展和实现。