Vue的使用方法(入门)

首先

用Visual studio code打开创建好的vue文件夹

1. 在src下创建vue的demo(这里以home.vue跟about.vue做样式)

注意:一定要放在src目录下

这里是home.vue

<template>

    <div>

        <h1>home</h1>

        <p>{{msg}}</p>

    </div>

</template>

<script>

    export default {

        data () {

            return {

                msg: "我是home 组件"

            }

        }

    }

</script>

这里是about.vue

<template>

    <div>

        <h1>about</h1>

        <p>{{aboutMsg}}</p>

    </div>

</template>

<script>

    export default {

        data () {

            return {

                aboutMsg: '我是about组件'

            }

        }

    }

</script>

2.在App.vue里面放入下面的router组件

<template>

  <div id="app">

    <img src="./assets/logo.png">

    <header>

<!-- router-link 定义点击后导航到哪个路径下 -->

//这里是路由的跳转

      <router-link to="/home">Home</router-link><br>

      <router-link to="/about">About</router-link>

    </header>

    <!-- 对应的组件内容渲染到router-view中 -->

    <router-view></router-view>   

  </div>

</template>

3.在main.js中引入element-ui跟router

import Vue from 'vue'

import App from './App.vue'

import ElementUI from 'element-ui'

import VueRouter from "vue-router"

Vue.use(ElementUI)

// 引入组件

import home from "./home.vue";

import about from "./about.vue";

// 要告诉 vue 使用 vueRouter

Vue.use(VueRouter);

Vue.config.productionTip = false 

const routes = [

  { path:"/home", component: home },

  { path: "/about",  component: about }

]

var router =  new VueRouter({

  routes

})

new Vue({

  router,  // 注入到根实例中

  render: h => h(App),

}).$mount('#app')

这样,一个最基础的路由就搭建完成了!

具体详情可以参考下面网址来源：http://daohang.1994july.club/