vue初探

1、官网下载node.js 本次安装选择的是v22.14版本

Node.js — Download Node.js®

下载完成后点击安装选择安装位置

安装完成后查看版本，环境变量安装时已经自动配置，任意位置打开dos，查看版本

安装vue 2

npm install -g @vue/cli

下一步创建项目路径 我选择的  D:\Program Files\vue

vue create hello-world

 安装时候会然选择版本本次选择vue2 然后下一步 安装完成后进入目录路径 启动vue服务

 $ cd hello-world
 $ npm run serve

查看服务  此时 vue安装完成

第一个helloword编写

创建路径 index.js D:\Program Files\vue\hello-world\src\router

import Vue from 'vue';
import Router from 'vue-router';
import UserLogin from '@/components/UserLogin.vue';  // 假设 Login.vue 存在
import Reg from '@/components/Reg.vue';  // 假设 Reg.vue 存在

Vue.use(Router);

export default new Router({
  mode: 'history',  // 使用 history 模式
  routes: [
    {
      path: '/',
      name: 'UserLogin',
      component: UserLogin,  // 默认路由
    },
    {
      path: '/reg',
      name: 'Reg',
      component: Reg,  // 注册页面
    },
  ],
});

 创建 D:\Program Files\vue\hello-world\src\components  UserLogin.vue 和 Reg.vue

<template>
    <div class="UserLogin">
      <h2>用户登录</h2>
      <form @submit.prevent="login">
        <div>
          <label for="username">用户名：</label>
          <input type="text" id="username" v-model="username" required />
        </div>
        <div>
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <button type="submit">登录</button>
      </form>
      <p>
        <router-link to="/reg">没有账号？点击这里注册</router-link>
      </p>
    </div>
  </template>
  
  <script>
  export default {
    name: "UserLogin",
    data() {
      return {
        username: "",
        password: "",
      };
    },
    methods: {
      login() {
        if (this.username && this.password) {
          // 处理登录逻辑
          console.log(`登录成功，用户名: ${this.username}`);
        } else {
          alert("请填写用户名和密码");
        }
      },
    },
  };
  </script>
  
  <style scoped>
  /* 样式代码 */
  </style>
  

<template>
    <div class="register">
      <h2>用户注册</h2>
      <form @submit.prevent="register">
        <div>
          <label for="username">用户名：</label>
          <input type="text" id="username" v-model="username" required />
        </div>
        <div>
          <label for="email">邮箱：</label>
          <input type="email" id="email" v-model="email" required />
        </div>
        <div>
          <label for="password">密码：</label>
          <input type="password" id="password" v-model="password" required />
        </div>
        <button type="submit">注册</button>
      </form>
      <p v-if="message">{{ message }}</p>
    </div>
  </template>
  
  <script>
  export default {
    name: "RegisterPage",

    data() {
      return {
        username: "",
        email: "",
        password: "",
        message: "",
      };
    },
    methods: {
      register() {
        if (this.username&& this.email && this.password) {
          this.message = `注册成功！欢迎, ${this.username}`;
        } else {
          this.message = "请填写所有字段";
        }
      },
    },
  };
  </script>
  
  <style scoped>
  .register {
    width: 300px;
    margin: auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    text-align: left;
  }
  label {
    display: block;
    margin: 10px 0 5px;
  }
  input {
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
  }
  button {
    width: 100%;
    padding: 10px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
  }
  button:hover {
    background-color: #218838;
  }
  p {
    color: green;
    margin-top: 10px;
  }
  </style>
  

app.vue

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">

    <!-- 通过 router-view 动态显示匹配的路由组件 -->
    <router-view></router-view>
  </div>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
</style>

 main.js

import Vue from 'vue';
import App from './App.vue';
import router from './router'; // 引入路由

Vue.config.productionTip = false;

new Vue({
  render: h => h(App),
  router,  // 使用路由
}).$mount('#app');