接著上篇vue-cli腳手架構建項目結構建好項目之後，就開始寫個“hello world！”吧~~~

vue玩的都是組件，所以開發的也是組件。

1.新建helloworld.vue。（刪除Hello.vue）代碼如下：

<!--模板部分-->
<template>
    <div class="container">
        <h1>hello，world！</h1>
        <p>{{test}}</p>
    </div>
</template>
<!--js部分-->
<script>
export 
 
default {
    name: ‘helloworld‘,
    data() {
        return {
            test: ‘this is a test‘
        };
    }
}
</script>
<!--樣式部分-->
<style>
.container {
    background: #aaa;
    color: blue;
}
</style>

一個簡單的組件就完成了。

2.我們打開入口組件App.vue並把裏面的代碼替換成如下代碼：

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <!--使用組件-->
    <helloworld></helloworld>
  </div>
</template>

<script>

import helloworld from 
 
‘./components/helloworld‘
export default {
  components: { helloworld }
}
</script>

<style>
#app {


  font-family: ‘Avenir‘, Helvetica, Arial, sans-serif;


  -webkit-font-smoothing: antialiased;


  -moz-osx-font-smoothing: grayscale;


  text-align: center;


  color: #2c3e50;


  margin
 
-top: 60px;
}
</style>

這個時候還要將router文件夾下的index.js裏面的代碼屏蔽。因為這個栗子還沒涉及到路由功能。

3.緊接著我們就可以啟動服務了，在命令行下輸入：

npm run dev

如果不報錯，說明編譯成功了，就會在瀏覽器中看到如下頁面：

新建的helloworld.vue這個組件就運行成功了，hello world ！也就出世了。

【前端小小白的學習之路】vue學習記錄②（hello world！）