day05--vue登录页面shop_vue

登录/退出功能

1.visual studio code下载

https://pc.qq.com/detail/16/detail_22856.html

2.使用visual studio code开发工具

PS D:\projects\项目实战day01\code\vue_shop> git status
On branch master
Your branch is up to date with 'origin/master'.

nothing to commit, working tree clean
PS D:\projects\项目实战day01\code\vue_shop> git checkout -b login
Switched to a new branch 'login'
PS D:\projects\项目实战day01\code\vue_shop> git branch      
* login
  master

3.使用vue 运行任务中的serve点击启动app

4.删除vue_shop中不必要的组件，留下干净的页面

App.vue

<template>
  <div id="app">
    app 根组件
  </div>
</template>

<script>


export default {
  name: 'app'
 
}
</script>

<style>

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './plugins/element.js'

Vue.config.productionTip = false

new Vue({
  router,
  render: h => h(App)
}).$mount('#app')

router.js

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [

  ]
})

5.定义登录组件和重定向到登录页面

Login.vue

template>
    <div>
        登录组件
    </div>
</template>

<script>
export default {
    
}
</script>

<style lang="less" scoped>

</style>

App.vue

<template>
  <div id="app">
    app 根组件
    <!--路由占位符-->
    <router-view></router-view>
  </div>
</template>

<script>


export default {
  name: 'app'
 
}
</script>

<style>

</style>

router.js

import Vue from 'vue'
import Router from 'vue-router'
import Login from './components/Login.vue';
Vue.use(Router)

export default new Router({
  routes: [
    { path: '/',redirect: '/login' },
    { path: '/login', component:Login }
  ]
})