Vue -3：單文件組件

在很多 Vue 項目中，我們使用 Vue.component 來定義全局組件，緊接着用 new Vue({ el: '#container '}) 在每個頁面內指定一個容器元素。

這種方式在很多中小規模的項目中運作的很好，在這些項目里 JavaScript 只被用來加強特定的視圖。但當在更復雜的項目中，或者你的前端完全由 JavaScript 驅動的時候，下面這些缺點將變得非常明顯：

• 全局定義 (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(單文件組件) 為以上所有問題提供了解決方法，並且還可以使用 webpack 或 Browserify 等構建工具。

好了，以上是官方所嗶嗶的，下面我們直接學習如何使用Vue單文件組件：

1、環境准備：

 上面的工具都安裝完畢之后：

2、通過vue ui 命令啟動vue cli的圖像化管理頁面：

注意，這里你再哪個路徑下啟動uve ui，你的項目就在那里創建

啟動完畢之后會自動打開下面的網頁：

 接下來我們創建項目：

此時在命令行我們可以看到項目的創建進度：

等待一會之后我們的項目就創建完畢了，我們可以去D盤下去查看我們的項目：

 

 

並且圖像化管理界面會有所提示：

此時我們就可以關閉cmd窗口和圖像化管理界面了；

3、將我們的項目導入開發工具，項目結構如下：

 注意，我這里使用的編輯器是WebStrom，可能其他孩兒們使用的是其他五花八門的開發工具，這里我只介紹如何使用webStrom運行Vue項目並拓展補充Hbuilder X運行Vue項目的方法：

a、WebStrom：

 

 

 配置完成之后啟動項目：

項目啟動完成瀏覽器訪問：

 b、Hbulider X：

 如果你不傻，通過自己分析項目結構和HelloWorld.vue以及App.vue中的代碼，你應該大體知道，HelloWorld.vue其實就是一個單文件組件，App.vue引入了HelloWorld.vue並顯示出來了。。。

4、自己創建單文件組件測試：

 

 

 

 在test.vue添加我們的代碼：

<template>
    <div id="testdiv">
    <h2>{{testMsg}}</h2>
    </div>
</template>

<script>
    export default {
        name: "test",
        props:{//為組件注冊屬性
            testMsg:{//規范寫法
                type:String,
                default:"測試字符串默認值"
            }
        },
        methods:{//為組件注冊方法

        },
        data:function () {//為組件注冊數據
            return{

            }
        }
    }
</script>

<style scoped>
#testdiv{
    color: red;
}
</style>

在App.vue文件引入我們自定義的test單文件組件：

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <test test-msg="我是測試字符串"></test>
    <HelloWorld msg="Welcome to Your Vue.js App"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'
import test from './components/test'
export default {
  name: 'app',
  components: {
    HelloWorld,
    test
  }
}
</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>

最后重啟Vue項目：

 

 至此單文件組件的創建和使用基本內容已經演示完畢，謝謝孩兒們觀看！！！