前端考试准备专用帖子

最新推荐文章于 2024-06-08 14:43:17 发布

XiaoYuAnShAO

最新推荐文章于 2024-06-08 14:43:17 发布

阅读量22

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/ly_0dys0/article/details/130302060

版权

考试专用总结步骤

1.装一个新版本的脚手架

npm config set registry https://registry.npm.taobao.org

npm i -g @vue/cli

2.vue ui 建立项目安装插件

安装 Vetur

设置自动保存：左上角文件下面有自动保存

3.新增文件我这里已经准备好了两个文件 AxBx.vue 可做登陆页面 BxAx.vue 作为跳转的页面

AxBx.vue

<template>
  <div>
    <div>{{ a }}</div>
    <div>{{ b }}</div>
    <div>
        <input type="submit" @click="ab()">
    </div>
  </div>
  
</template>

<script>
export default {
    data(){
        return{
            a:123,
            b:456
        }
    },
    methods:{
        ab(){
            this.$router.push({name: 'b'});
        }
    }
}
</script>

<style>

</style>

BxAx.vue


<template>
  <div> i love you </div>
</template>

<script>
export default {

}
</script>

<style>

</style>

4.更新文件

4.0删除文件

Views下面的所有文件都可删除

components下面的所有文件都可删除

4.1App.vue

<template>
  <div id="app">
    <nav>
      <!-- <router-link></router-link> -->
    </nav>
    <router-view/>
  </div>
</template>

<style>

</style>

4.2 router目录下的 index.js

import Vue from 'vue'
import VueRouter from 'vue-router'
import A from '../views/AxBx.vue'
import B from '../views/BxAx.vue'

Vue.use(VueRouter)


const routes = [
  {
    path: '/',
    name: 'a',
    component: A
  },
  {
    path: '/a',
    name: 'a',
    component: A
  },
  {
    path: '/b',
    name: 'b',
    component: B
  },
  
]

const router = new VueRouter({
  routes
})

export default router