從零開始的vue學習筆記（五）

單文件組件

Vue.component 來定義全局組件的缺點：

• 全局定義 (Global definitions) 強制要求每一個 component 中的命名不得重複
• 字符串模板 (String templates) 缺少語法高亮，在 HTML 有多行的時候，須要用到醜陋的
• 不支持 CSS (No CSS support) 意味着當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
• 沒有構建步驟 (No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Pug (formerly Jade) 和 Babel

因此有了文件擴展名爲 .vue 的 single-file components(單文件組件)，例子：

<template>
    <input
        type="text"
        class="input"
        :value="value"
        v-on="listeners"
    >
    </template>

    <script>
    export default {
    props: {
        value: {
        type: String,
        default: '',
        }
    },
    computed: {
        listeners () {
        return {
            // Pass all component listeners directly to input
            ...this.$listeners,
            // Override input listener to work with v-model
            input: event => this.$emit('input', event.target.value)
        }
        }
    }
    }
    </script>

    <style lang="scss" scoped>
    @import '../variables.scss';

    .input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid $vue-blue;
    }
    </style>

每個單文件的基本組成結構都包含：template，script，style 三個部分。

好處：

• 完整語法高亮
• CommonJS 模塊
• 組件做用域的 CSS
• 能夠使用包管理器npm、預處理器Babel、打包工具webpack、腳手架vue-cli
  一個完整的單文件組件示例

Vue CLI

這是vue官方提供的腳手架工具

• npm install -g @vue/cli or yarn global add @vue/cli
• vue create my-app
• cd my-app
• npm run serve

tips：vscode裏安裝插件vetur和eslint，*.vue單文件裏輸入scaffold會提示一鍵生成template，script，style 三個部分。

基礎篇的官方文檔基本擼完了，後續的學習將經過《極客時間_vue開發實戰》進行