三、创建组件

1.创建组件模板

每一个vue的单页面组件都是由三部分组成：

1. template代表结构，也就是相当于我们以前学的html
2. script相当于我们以前学的js
3. style相当于我们以前学的css

比如我们在views下面新建News.vue页面（一般文件的名字是首字母大写），我们如果手动去写基本结构比较麻烦，建议用下面的配置

vscode中的file-preferences-user snippets,然后输入vue，输入模板如下：

{
  "Print to console": {
    "prefix": "vue",
    "body": [
      "<!-- $0 -->",
      "<template>",
      "  <div></div>",
      "</template>",
      "",
      "<script>",
      "export default {",
      "  data () {",
      "    return {",
      "    };",
      "  },",
      "",
      "  components: {},",
      "",
      "  computed: {},",
      "",
      "  mounted(){},",
      "",
      "  methods: {}",
      "}",
      "",
      "</script>",
      "<style lang='less' scoped>",
      "</style>"
    ],
    "description": "Log output to console"
  }
}

备注 上面的prefix代表你要生成结构所用的快捷键，body里面是生成的结构模板，自己可以修改。

我们保存以后下次再新建xx.vue页面，输入vue然后按tab键就会自动生成下面类似的结构模板。

 

2.修改路由 

我们根据新建的vue页面创建路由如下：

首页根组件App.vue设置路由链接和路由占位符

 

页面显示如下： 

此时相当于我们的vue根组件中有三个路由跳转链接，每一个路由跳转链接中可以再根据实际情况实现自己的页面配置。