深圳网站建设制作网络公司_电商平台开发成本_百度指数是怎么计算的_群排名优化软件官网

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');