目录

template标签

script标签

export default 

import

style标签

例子

---

template标签

这个标签里面写html的代码。html代码在前端三大件中的地位就是在最顶层，其作用通常是设置框架和整体布局。比如下面一段的代码

<template>
    <div class="row">
        <div class="col-3">
            <img src="https://cdn.acwing.com/media/user/profile/photo/200349_lg_080b3b050d.jpg" class="img-fluid"
                alt="">
        div>
        <div class="col-9 ">
            <div class="username">小仙女div>
            <div class="fans">粉丝：123div>
            <button type="button" class="btn btn-secondary btn-sm">+关注button>
        div>
    div>
template>

script标签

这个标签里面写JS的代码。 通常包含有export default{.........}，import 'name' from '文件路径'

export default 

里面通常要写两个属性。

components：描述这个组件或者页面中用到了哪些我们写出来的组件

name：描述了这个组件的名字，在以后import引入到其他页面的时候会用到。 

下图就是一个例子。

通过这一段代码可以看出，这个页面的名字是UserList，所用到了的组件有ContentBase和UserProfileInfo

import

通常写做import 'name' from '文件名'； 

把需要的组件引入到当前的文件中去。

style标签

这个标签里面填写CSS定义样式的代码。CSS里要添加scoped的属性，表示设置的相关属性只影响当前的页面。 

例子

<template>
  <ContentBase>
    404
  ContentBase>
template>
 
<script>
import ContentBase from '../components/ContentBase';
 
export default {
  name: "NotFoundView",
  components: {
    ContentBase,
  }
}
script>
 
<style scoped>
style>