【對Vue寫一個小測試吧】－第一隻.vue檔

建立檔案

到這邊為止環境算是建置完了，你的結構應該長這樣：

webpack.config.js 裡面應該長這樣：

接下來我們來建立我們的其他檔案吧～
touch index.html
mkdir components
cd components
touch index.js
touch app.vue

所以會長的像：

vue-SPA

官網介紹

來編輯 app.vue 吧～先放進一點簡單的範例程式：

plaintext

<template>
  <div class="example">{{ msg }}</div>
</template>

<script>
module.exports = {
  data () {
    return {
      msg: 'Hello world!'
    }
  }
}
</script>

<style>
.example {
  color: red;
}
</style>

在 webpack.config.js 中新增：

plaintext

// webpack.config.js

module.exports = {
  module: {
    rules: [
      // ... 其它规则
      {
        test: /\.css$/,
        use: [
          'vue-style-loader',
          'css-loader'
        ]
      }
    ]
  }
}

整個變成：

---

這樣對第一隻 vue component 的建置就算是簡單地完成了，下一篇我們來對周圍的 index.html 與 webpack.config.js 再做最後一點點的小修改吧～