vue 简约 大气登录页

在Vue中创建一个简约大气登录页面，并提供源代码下载的功能可以使用以下步骤：

1. 创建Vue项目（如果还没有）：

vue create simple-login-page

2. 进入项目目录并安装必要的依赖：

cd simple-login-page
npm install

3. 编辑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>

4. 将组件添加到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>

5. 运行Vue项目：

npm run serve

这样就创建了一个简约大气登录页面，并提供了源代码下载的功能。在实际应用中，登录逻辑和下载源代码逻辑需要根据实际情况进行扩展和实现。