Vue前端界面的创建和路由的配置

大纲：创建vue文件并访问

*创建vue文件，在views目录创建文件

*在文件的template节点中添加要显示的内容

*在route目录下的index.js文件中配置路由
        *使用import引入vue文件

        *配置路由

        {

                path:'/url',

                component:引入的名称

        }

*在App.vue中通过router-linker进行链接

---

*vue文件的页面结构，就是我们要在浏览器中实现的内容

        *位置：在view下面创建

        *命名要求：XXXXXView.vue 例如：UserLoginView.vue

<template>
    <!--显示的内容--！>
</template>
<script>
    export default{
        name:'页面名称',
        data(){
            return{
        
                //声明变量和值
                名称:值
          }

    },
        methods:{
            函数名(){
                //代码
        }
    }

}
</script>
<style scoped>
    /*css样式*/
</style>

*在router目录下的index.js中配置路由（url与vue文件的对应关系）

        *使用import引入需要的vue文件

import 名称 from '@/views/vue文件.vue'

        *配置url和组件的对应关系

        {

                path:'/url',

                compontent:名称

        }

        *例如：

{
    path:'/demoView',
    compoent:DemoView

}

        *如何访问

                *通过超链接访问

<router-link to="url">文本<router-link>

                *在js代码完成跳转

this.$router.push("/url");