怎样创建vue脚手架并写一个简单的页面

先在需要放置脚手架文件的目录下cmd输入:vue init webpack vue-demo

然后在写一个简单的页面:分为两步

在components页面下写个.vue文件,分为三个部分:<template>,<script>,<style>

<template>
    <div>
        <h1>hello,你好,{{name}}</h1>
    </div>
</template>

<script>
export default{
    data(){
        return{
            name:"张三"
        }
    }
}
</script>

<style>

</style>

在router下index.js文件下面添加刚刚写的components对于的路由:(需要注意得导入对应文件的路径:import hello from '@/components/hello')

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import hello from '@/components/hello'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
    ,
    {
      path: '/hello',
      name: 'hello',
      component: hello
    }
  ]
})

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
好的,下面是一个简单的示例,实现Vue脚手架中的登录成功跳转到其他页面的功能。 1. 在src目录下新建一个router文件夹,并在该文件夹下新建一个index.js文件,用于配置路由。在该文件中,引入VueVue Router,并创建一个路由实例,例如: ``` import Vue from 'vue' import VueRouter from 'vue-router' import Login from '../views/Login.vue' import Home from '../views/Home.vue' Vue.use(VueRouter) const routes = [ { path: '/', redirect: '/login' }, { path: '/login', name: 'Login', component: Login }, { path: '/home', name: 'Home', component: Home } ] const router = new VueRouter({ mode: 'history', base: process.env.BASE_URL, routes }) export default router ``` 其中,routes数组中定义了路由的路径和组件。在这里,我们定义了两个路由,一个是登录页面(Login),另一个是主页(Home)。 2. 在Login.vue组件中,编登录功能,例如: ``` <template> <div> <h1>登录页面</h1> <form> <label>用户名:</label> <input type="text" v-model="username" /> <br /> <label>密码:</label> <input type="password" v-model="password" /> <br /> <button type="button" @click="login">登录</button> </form> </div> </template> <script> export default { data() { return { username: '', password: '' } }, methods: { login() { // 模拟登录成功 if (this.username === 'admin' && this.password === '123456') { this.$router.push('/home') } else { alert('用户名或密码错误') } } } } </script> ``` 其中,username和password是通过v-model指令绑定的数据,login方法用于模拟登录操作。如果用户名和密码正确,则使用this.$router.push('/home')进行路由跳转,跳转到主页(/home)的页面;否则弹出提示框,提示用户名或密码错误。 3. 在Home.vue组件中,编主页的页面内容,例如: ``` <template> <div> <h1>主页</h1> <p>欢迎来到主页!</p> </div> </template> ``` 这样,当用户在登录页面输入正确的用户名和密码后,就会跳转到主页(/home)的页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值