Vue项目中创建vue文件并运行

目录

1.在src.components文件夹中新建一个Vue文件

2.保存之后我们打开src.components.index.js文件，在第三行后面导入test文件

3.完成页面的制作

---

1.在src.components文件夹中新建一个Vue文件

我的叫test.vue，然后写入如下代码：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <button @click="clickme">点我</button>
  </div>
</template>
​
<script>
export default {
  name: 'tname',
  data () {
    return {
      msg: '这是首页'//这是h1标签哟啊显示的文字
    }
  },
  methods: {
    clickme () {//这是按钮实现的方法
      alert(1)
    }
  }
}
</script>
​

​

2.保存之后我们打开src.components.index.js文件，在第三行后面导入test文件

import tname from '@/components/test'

然后在routes中加入如下代码

 {
      path: '/tname',
      name: 'tname',
      component: tname
    }

3.完成页面的制作

保存一下到浏览器，然后就会发现页面没有改变，我们把网页的链接改为 http://localhost:8080/#/tname