前端学习（二）简单修改vue的项目内容

上一篇把框架搭建起来了，这篇就修改一下框架的内容，看看效果。
稍微查了下资料，知道vue框架的代码入口是“App.vue（style模块没变化，这里就不贴出来了）”:

<!--这个template模块就是整个网站的起始页面配置-->
<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png"> <!--    这一行就是那个页面那个大图标-->
    <HelloWorld msg="Welcome to Your Vue.js App"/> <!--    接着就是将HelloWorld的内容引进来-->
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

所以这里我们可以想到，想要修改这个页面的内容，可以在两个地方改，一个是直接在App.vue的“template”里加，也可以去HelloWorld 里面加。
首先可以试试在App.vue里加：

<template>
  <div id="app">
    <span>测试添加内容</span> <!--    添加了这一行-->
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

可以看到页面上显示了，只是这个位置不符合预期，不过先不管他，以后学到再说。
现在再去HelloWorld.vue 中改，改之前要把刚才加的那一句话删掉，不要影响我们测试。

<template>
  <div class="hello">
    <span>测试添加内容2</span> <!--    添加了这一行-->
    <h1>{{ msg }}</h1>
    <p>

由于篇幅，这里只粘贴前后几行，这里就是HelloWorld.vue的前五行，下面内容都是没改动的。

可以看到也生效。到这里可以发现稍微懂一点前端，想要改一些简单的东西还是不难的。

这篇就是很基础的东西，主要是帮助理解vue框架的代码从哪进入，该修改哪里。